盒子模型的概念
盒子模型由：内容区域（content）+ 内边距区域（padding）+ 边框区域（border）+ 外边距区域（margin）组成
标准盒子模型：margin + border + padding + content（width + height）
1.外边距（margin）-取值
常见取值
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin：10px | 上下左右都设置为10px |
| 两个值 | margin：10px 20px | 上下设置10px，左右设置20px |
| 三个值 | margin：10px 20px 30px | 上设置10px，左右设置20px，下设置30px |
| 四个值 | margin：10px 20px 30px 40px | 上设置10px，右设置20px，下设置为30px，左设置为40px |
分开设置
- margin-left
- margin-top
- margin-right
- margin-bottom
记忆规则：从上开始赋值，然后顺时针赋值，
2.内边距（padding）-取值
取值也和margin一样
3.边框（border）
作用：给设置边框粗细、边框样式、边框颜色效果
属性：
- border-width: 值为数字+px
- 边框样式 border-style：实线solid、虚线dashed、点线dotted、双实线double
连写：border：10px solid red
单个写
- border-top
- border-right
- border-bottom
- border-left
4.怪异盒模型
- 怪异盒模型：box-sizing: border-box
- 标准盒模型：box-sizing: content-box
5.扩展内容
1.不会撑大盒子的情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
2.清除默认内外边距
浏览器会默认给不封标签设置默认的margin和padding。但一般在项目开始前需要先清除这些标签默认的margin和padding
- 比如：body标签默认有margin：8px
- 比如：P标签默认有上下的margin
- 比如：ul标签默认有上下的margin和padding-left
3.margin合并现象
垂直布局的块级元素，上下的margin会合并。
结果：最终两者距离为margin的最大值，解决方法：只给其中一个盒子设置margin即可。
4.margin塌陷现象
互相嵌套的块级元素，子元素的margin-top会作用在父元素上。
结果：导致钴元素一起往下移动；解决方法：
- 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素
- 设置浮动
5.行内元素的margin和padding无效情况
给行内元素设置margin和padding时。
结果
- ==水平方向的margin和padding布局中有效==
- ==垂直方向的margin和padding布局中无效==
