css设计指南-笔记3

一.层叠

浏览器层叠各个来源样式的顺序：

• 浏览器默认样式表
• 用户样式表
• 作者链接样式表（按照它们链接到页面的先后顺序）
• 作者嵌入样式
• 作者行内样式

计算特指度：ICE公式

1. 选择符中有一个ID， 就在I的位置加1；
2. 选择符中有一个类，就在C的位置加1；
3. 选择符中有一个标签名（元素名），就在E的位置加1；
4. 得到一个三位数

---

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属性设定只是盒子内容区的宽度。