CSS第三节

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）只能在水平方向起作用。垂直方向不起作用。

外边距合并

第一种外边距合并的情况：

当两个块级元素，上面块级元素拥有下外边距，下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取 两个边距的最大值，而不是把两个盒子的边距进行加和处理。

第二种外边距合并的情况：

当块级元素进行嵌套的时候，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和 复盒子的上外边距会进行合并。