CSS 的框模型
1、外边距
1.1、语法
margin-top：上外边距
margin-bottom：下外边距
margin-right：右外边距
margin-left：左外边距
| 取值 | 说明 |
|---|---|
| 5px | 以px为单位的数字 |
| 10% | 父元素的10%作为外边距 |
| -5px | 移动元素时使用 |
| auto | 自动，只能对设定宽度的块级元素有效，只对左右外边距有效 |
margin：4个方向的外边距
margin：5px 上下左右外边距都是5px
margin：5px 3px 上下外边距5px，左右外边距3px
margin：0 auto 块级元素居中对齐
margin：1px 2px 3px 上外边距1px，左右外边距2px，下外边距3px
margin：1px 2px 3px 4px 上外边距1px，右边距2px，下外边距3px，左外边距4px（从顶端，顺时针方向）
1.2、页面中有默认外边距的元素
body、p、ol、ul、h1——h6都具备默认外边距，通过css重写的方式，取消默认外边距 body,p,ol,ul,h1,h2,h3,h4,h5,h6{margin:0}
2、内边距
2.1、语法
padding-top：上内边距
padding-bottom：下内边距
padding-right：右内边距
padding-left：左内边距
| 取值 | 说明 |
|---|---|
| 5px | 以px为单位的数字 |
| 10% | 父元素的10%作为内边距 |
padding：4个方向的内边距
padding：5px 上下左右内边距都是5px
padding：5px 3px 上下内边距5px，左右内边距3px
padding：1px 2px 3px 上内边距1px，左右内边距2px，下内边距3px
padding：1px 2px 3px 4px 上内边距1px，右内距2px，下内边距3px，左内边距4px（从顶端，顺时针方向）
2.1、页面中有默认内边距的元素
ol，ul，文本框，密码框，按钮都有默认内边距
3、box-sizing 属性
作用：重新指定框模型的计算方式
| 取值 | 说明 |
|---|---|
| content-box | 元素的width和height属性只表示内容区域的尺寸，默认值 |
| border-box | 元素的width和height属性包含内容区域，边框和内边距的全部尺寸，建议使用 |