- Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像。
1个值 上下左右采用统一的值
2个值 上下和左右采用不同的值 上下采用第一个值 左右采用第二个值
3个值 上 左右 下 ；
4个值 按顺时针的顺序 上右下左
margin-top margin-left margin-right margin-bottom
padding：内边距 ：内容和边框之间的距离（其属性值的用法与margin相同）
border-style的属性
none：无边框
dotted：点边框
solid：实线边框
double：双线
groove：定义3D沟槽边界
ridge：定义3D脊边界
inset：定义3D嵌入边框
outset：定义3d突出边框
border-color要和border-style配合使用
外边距，内边距，边框都会影响内容的宽度。
box-shadow ：x轴方向偏移 y轴方向偏移 模糊范围 阴影拓展范围 阴影颜色（右下角）
inset 内阴影（左上角）
outline：轮廓线 不会占据空间
盒子的摆放模式：
标准流模式
块级盒子
行级盒子
浮动盒子
浮动盒子不会自动展开，表现为行级元素的样子，且标准盒子视浮动盒子为不存在而占据浮动盒子的位置，但内容会受到浮动盒子的影响。
父级盒子中的所有合资都采用浮动元素，若父级盒子未指定高度，则父级盒子高度为0
可以设置clear属性，使标准流中的元素不受浮动属性的影响
清除浮动的三种方式：
1.添加clear：both属性 （ 不推荐）
2.为父元素添加一个div。并为其添加clear：both属性（会给代码增加一个div）
3.为父元素添加一个伪类 after属性：
.cleanfix:after{
content: "";
display: block;
clear: both;
}
如果浏览器不兼容，添加zoom：1