盒子模型的概念
所谓盒子模型就是把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像素的上边框或上内边距。
网友评论