css盒模型，外边距合并

1. 什么是盒模型

就是一个布局

2. 标准盒模型

box-sizing: content-box;
实际宽度 = content + border + padding

4. 外边距简写规则

/* 上下左右都是50px */
margin: 50px;
/* 上下10px 左右20px */
margin: 10px 20px;
/* 上10px 左右20px 下30px */
margin: 10px 20px 30px;
/* 上右下左 */
margin: 10px 20px 30px 40px;

5. border

border： 1px solid red

				大小 样式 颜色

样式： solid （实线） dashed（虚线） dotted（点线） double（双线）

单独写法：
border-top-style: solid
border-top-width: 1px
border-top-color: red
border-width: 上右下左
border-color: 上右下左

5. css3盒模型

box-sizing: border-box;
实际宽度 = 给定的宽度

6. 外边距合并现象

浮动元素不会出现外边距合并现象

解决方案：
（1）给父元素加一个border
（2）给父级加一个padding
（3）父级加 overflow:hidden（相当于隔离）