CSS第三节：CSS进阶

盒子模型的概念

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

网页就是多个盒子嵌套排列的结果。

内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。（IE6的盒模型的bug：背景色不能穿透边框）

外边距是该元素与相邻元素之间的距离。

如果给元素定义边框属性，边框将出现在内边距和外边距之间。

注意：虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。

---

����边框属性—设置边框样式（border-style）

去掉图片默认的边框，兼容性最好的写法是同时输入0 none

---

作业：圣诞树模型

内边距属性：

padding属性用于设置内边距，也是复合属性，相关设置如下：

padding-top:上内边距                    padding-right:右内边距

padding-bottom:下内边距               padding-left:左内边距

padding:上内边距[右内边距下内边距左内边距]

内边距是享有背景色的。

---

外边距属性：

margin-top:上外边距                    margin-right:右外边距

margin-bottom:下外边距              margin-left:上外边距

margin:上外边距  右外边距  下外边距  左外边距

margin:上下外边距  左右外边距

margin相关属性的值，以及复合属性margin取1~4个值的情况与padding相同。

外边距可以使用负值，使相邻元素重叠。

对块元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局，示例代码如下：header{ width:960px; margin:0 auto;}

结果如下图

代码看上图

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

注意：使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。