css盒模型——2017.2.26

盒子模型的概念

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

IE6的盒模型的bug:

背景色不能穿透边框

结论：

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

内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中

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

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

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

设置上边框的宽度

border-top-width:20px;

设置上边框的颜色

border-top-color: red;

设置上边框的样式

border-top-style: solid;

边框的样式设置也可以进行合写

border-top: 宽度 样式 颜色;

border-top: 5px solid red;

可以用1行css设置上下左右所有的边框的样式

border: 10px dotted blue;

去掉默认的边框，兼容性最好的写法是

border: 0 none;

上 右 下 左

padding: 20px 5px 10px 5px;

可以让div水平居中显示：

margin: 0 auto;

行内元素 关于padding和margin问题

注意：

          行内元素不要给上下的margin和padding

          上下margin和padding会被忽略

          左右margin和padding会起作用

整个盒子的占用的空间宽度： 左边框宽度+左padding+width+右padding+右边框

整个盒子的占用的空间高度： 上边框宽度+上padding+highth+下padding+下边框

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，择他们之间的垂直间距不是margin-bottom和margin-top之和，而是两者中的较大者。

这种现象被称为相邻块元素垂直外边框的合并（也称外边距坍塌）

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即是父元素的上外边距为0，也会发生合并

如果希望外边距不合并，可以为父元素定义1像素的上边框或上内边距。