CSS中盒子模型就是把HTML页面中布局元素看作是一个盒子，用来封装周围HTML的元素，一个盒子包括边框、外边距、内边距和实际内容。
1. 盒子的边框border如上图所示，我们可以给border设置宽度、样式和颜色。
<head>
<style>
div {
border:1px solid red;
}
</style>
</head>
<body>
<div>这是一个盒子</div>
</body>border的第一个参数是宽度，当边框定义了宽度时，会影响盒子的实际大小。border样式常用的有四种，分别是solid 实线 dashed 虚线 dotted 点线 none 没有边框。border既可以直接设置所有边框的宽度样式大小，也可以分别设定四个边的样式。
对于表格的边框，有个属性border-collapse专门用来设置表格边框，它控制相邻单元格的边框设置。该样式将相邻的边框合并到一起。
border-collapse:collapse;
解决边框对盒子实际大小的影响，有两种办法：
- 测量盒子大小的时候不测量边框
- 如果测量的时候包含了边框，在定义盒子width/height的时候要减去边框的宽度
2.padding是指内边距，也就是内容和边框之间的距离
使用padding可以设置盒子与盒子之间的距离，可以像border一样用一个参数设置所有内边距，也可以单独设定一个方向的页边距。
padding的设定顺序按照顺时针，上、右、下、左。单位是像素
padding：5px;
padding:5px 5px 5px 5px;
padding也会影响盒子的实际大小
设定了padding之后，内容和边框之间的距离变大，盒子也就变大。因此如果要消除padding的影响，需要在设定width和height的时候减去padding的大小。
padding的巧妙运用：
在做导航栏时，每个小模块的内容可能不一致，如果想要每个盒子的边距一致，看上去美观，可以为每个盒子设定左右padding值。
为a标签设定上下padding为0，左右为20px
.nav a{
text-decoration: none;
font-size: 12px;
color:#4c4c4c;
display: inline-block;
height:41px;
padding:0 20px;
}
效果如下：
如果盒子本身没有指定height/width属性（完全不写）此时padding不会影响盒子的实际大小。
3.margin
margin设置的外边距，也就是可以设置盒子与盒子之间的距离。设置参数顺序也是顺时针。
margin的典型应用是通过margin来使块级盒子水平居中：
- 必须指定盒子的width
- 盒子左右的外边距都设置为auto
.header{ width:500px; margin :0 auto; }
.header{ width:500px; margin: auto; }
.header{ width:500px; margin-left:auto; margin-right:auto;}
如果需要使得行内元素或者行内块元素水平居中，只需要在其父元素中添加text-align:center 。
4.相邻块元素垂直外边距的合并
上下相邻的两个盒子，如果上面盒子设置了margin-bottom,下面盒子设置了margin-top，那么他们之间的垂直边距计算如下：
比较margin-top和margin-bottom的取值，较大者为垂直间距。
相当于较小的margin会被隐藏。
解决办法：尽量只给一个盒子设置margin。
5.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷相对较大的外边距值，而子元素没有实现上外边距效果。
对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上边距，假如父元素的margin值是：
margin-top:10px;子元素的margin值为：margin-top：20px；
此时父元素与外部的距离就是20px，而不是给他设定的10px；此时子元素没有实现外边距的效果。
解决办法：
- 为父元素设定上边框
- 为父元素设定内边距
- 为父元素添加overflow：hidden
- 使用浮动、固定、绝对定位来设置盒子的位置
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
