CSS第三节
CSS盒模型
网页中所有的元素都是矩形的，所以可以看出一个个盒子。
网页由多个盒子组成。
盒子：边框+内边距+内容区域+外边距组成。
IE6的盒模型的bug：背景色不能穿透 边框。
而且如果不设置争取的doctype的话，ie6显示的盒子也不是标准的盒子。
边框
边框可以被背景色穿透，边框包括三部分可以进行设置：边框的宽度、边框的颜色、边框的样式。
可以分别分开设置，也可以进行合写进行统一设置。
设置内容
样式属性
常用属性值
上边框
border-top-style:样式;
border-top-width:宽度;
border-top-color:颜色;
border-top:宽度 样式 颜色;
下边框
border-bottom-style:样式;
border- bottom-width:宽度;
border- bottom-color:颜色;
border-bottom:宽度 样式 颜色;
左边框
border-left-style:样式;
border-left-width:宽度;
border-left-color:颜色;
border-left:宽度 样式 颜色;
右边框
border-right-style:样式;
border-right-width:宽度;
border-right-color:颜色;
border-right:宽度 样式 颜色;
样式综合设置
border-style:上边 [右边 下边 左边];
none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置
border-width:上边 [右边 下边 左边];
像素值
颜色综合设置
border-color:上边 [右边 下边 左边];
颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置
border:四边宽度 四边样式 四边颜色;
/* 去掉默认的边框 ，兼容性最好的写法是*/
border: 0 none;
内边距
内边距是设置盒子与子盒子之间的距离。
Pading: 10px; 设置上下左右都是10px的内边距。
Padding： 10px 12px; 设置上下是10培训的宽度，左右是12像素的宽度。
Pading： 10px 12px 13px 14px; // 分别设置的是 上 右 下 左
如果设置三个值： 上 左右 下
外边距
外边距设置兄弟元素之间的距离。
Margin的设置跟padding的一样。
Margin： 0 auto; 可以让 块级元素水平的居中。
原理： auto是设置外边距自动赋值。如果左右都是auto的时候，会把盒子所在行剩余的宽度除以2，然后分别赋值给左右的magin值，自然就会让盒子居中显示了。
行内元素的margin（padding）只能在水平方向起作用。垂直方向不起作用。
外边距合并
第一种外边距合并的情况：
当两个块级元素，上面块级元素拥有下外边距，下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取 两个边距的最大值，而不是把两个盒子的边距进行加和处理。
第二种外边距合并的情况：
当块级元素进行嵌套的时候，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和 复盒子的上外边距会进行合并。
