码迷,mamicode.com
首页 > Web开发 > 详细

CSS优先级和定位

时间:2018-04-11 23:10:40      阅读:579      评论:0      收藏:0      [点我收藏+]

标签:电子   坐标   不显示   文本   data   网站开发   baidu   空间   继承   

 

overflow属性 hidden scroll auto

hidden 超出隐藏

 

scroll 滚动条

Auto 自动

display属性 block inline inline-block none

Block 块显示

inline 按行内显示

inline-block 双重作用。既有行的特点又有块的特点

在一行内显示,又具有宽高。

 

None

不显示。

Display:none;

 

CSS引入的方式 行内,内嵌,外部

行内

在标签内部,直接使用style=”CSS规则

容易写错:<p style=”color=red;”>文字</p>

这个地方用冒号

内嵌

写在<head></head>

写法

<style type=”text/css” >样式</style>

外部

通过link,将外部的样式表文件(*.css,引入当前页面。

写法:

<link type=”text/css”  rel=”stylesheet” href=”*.css” />

Rel说明,当前文件与链接的文件是什么关系

Stylesheet 样式表的关系。

Href:指定样式表文件在什么地方(路径)

备注:我们在做网站时开发时,通常用的就是这种方式。

 

CSS优先级

CSS冲突的时候

就近原则

行内样>内嵌样式>外部样式

行内样式>id>class>标签

//权重值,特性值

 

标签:1

类:10

ID100

Style:1000

!important

 

CSS继承

和文本相关的一般都会继承。、

边框,宽,高,margin,padding  背景等都不继承。

继承的权重为0

定位属性:position:static fixed relative absolute

position: (配合着定位坐标

Left距左边, top距上边, right 距右边, bottom距底边

static 静态,不定位

fixed 固定, 脱离正常的文档流,比普通元素层级要高。相对于浏览器窗口进行定位。

relative

相对定位。相对于谁?(相对于自己,霸道的相对)

 

absolute

绝对定位,相对于最近的具有定位属性(不管是相对定位,或者绝对定位都可以)的元素进行定位。

脱离正常文档流,层级高于普通元素。

相对于它的祖先,有定位属性的祖先。

如果没有,相对于body定位。

 

 

 

备注:相对定位与绝对定位

外层元素通常设置相对定位,不用坐标。

内层元素设置绝对定位。配合着定位坐标。

 

 

定位坐标:

课堂练习:限时抢

 

盒子模型:边框线,内填充,外边距

border 边框线

padding 内填充

margin 边距

top,right bottom left

总宽度:(margin-left+padding-left+border-left)*2+width(内容宽度)

总宽度问题 DTDIE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

外边距合并问题

margin,上下合并(大吃小),左右叠加

 

常见布局PPT

个人主页

 

绿色案例(作业)

浏览器兼容性简介

浏览器市场份额:http://tongji.baidu.com/data/browser

常用兼容性技巧

初始化清除浏览器默认值及HACK法:

初始化清除浏览器默认值:ul,li,body{margin:0;padding:0}

.box{

color:white;

background:blue; /*ff,7*/

background:red \9; /*ie6 7 8*/

*background:black; /*ie6 7*/

_background:orange;/*ie6*/

}

IE6 双边距 问题的处理

 

IE6 1px高度的DIV

如何实现?

 

制作网站的流程

有没有域名和空间?

开发网站类型,企业网站,电子商务,移动开发

功能模块选择:如:新闻系统,会员系统,商品展示,在线支付等

模板选择:色系选择

效果图

签订合同,首次支付30%

网站开发

内部测试,在线测试

客户测试

交付使用

支付余款

合同完成

服务年费

增加功能,加个论坛,微网站(再合同)

升级服务

CSS优先级和定位

标签:电子   坐标   不显示   文本   data   网站开发   baidu   空间   继承   

原文地址:https://www.cnblogs.com/Mangosy/p/8799150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!