一.层叠
浏览器层叠各个来源样式的顺序:
- 浏览器默认样式表
- 用户样式表
- 作者链接样式表(按照它们链接到页面的先后顺序)
- 作者嵌入样式
- 作者行内样式
计算特指度:ICE公式
- 选择符中有一个ID, 就在I的位置加1;
- 选择符中有一个类,就在C的位置加1;
- 选择符中有一个标签名(元素名),就在E的位置加1;
- 得到一个三位数
body p#largetext ul.mylist li // 1-1-4特指度=114
查理版简单层叠要点
规则一:包含ID的选择符 > 包含类的选择符 > 包含标签名的选择符
规则二:行内样式 > 嵌入样式 > 链接样式
规则一 > 规则二 (如果选择符特指度更高), 无论在哪里,都会胜出
规则三: 设定的样式胜过继承的样式,此时不考虑特指度
二.盒模型
盒模型简写
{margin: 5px 10px 12px 8px;} //属性值的顺序:上、右、下、左(顺时针旋转)
{margin: 12px 10px 6px;} //借用对边的值,即左右都为10px
{margin: 12px 10px;} //借用对边的值,上下12px,左右10px
{margin: 12px;} //四个方向都是12px
{margin: 0 0 2px 4px} //使用0
三种粒度
1.全部3个属性,全部4条边
{border: 2px dashed red;}
2.1个属性,全部4条边
{border-style: dashed;}
3.1个属性,1条边
{border-left-style: dashed;}
混合使用三种粒度
{border: 4px solid red;} //先给4条边设置相同的样式
{border-left- 1px;} //修改左边框宽度
{border-right: none;} //移除右边框
盒子宽度
1.没有宽度的元素始终会扩展到填满其父元素的宽度为止。
添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。
2.有宽度的元素,如果再添加水平边框、内边距和外边距,会导致盒子扩展得更宽。
width属性设定只是盒子内容区的宽度。