1. 盒子模型基础
1.1 基本说明
- 使用类选择器画盒子：三属性
- 实际书写中，几乎都是盒子，<div>大量使用
1.2 常用属性
| 属性 | 说明 |
|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
老三样了，上来就是这仨+flex
2. 盒子模型组成
2.1 内容区
| 属性 | 说明 |
|---|
| width | 内容区的宽度 |
| height | 内容区的高度 |
2.2 内边距
| 属性 | 说明 |
|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
| padding | 简写属性，可同时设置四个方向的内边距 |
没那么多讲究，一个padding就行
2.3 外边距
| 属性 | 说明 |
|---|
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
| margin | 简写属性，可同时设置四个方向的外边距 |
没这么多讲究，一个margin就行
2.4 边框
| 属性 | 说明 |
|---|
| border-width | 边框宽度 |
| border-style | 边框样式，如solid、dashed、dotted等 |
| border-color | 边框颜色 |
| border | 简写属性，可同时设置宽度、样式和颜色 |
| 方向边框 | border-top、border-right、border-bottom、border-left |
一般一个border: 1px soild <颜色>+border-raidus就行
2.5 box-sizing属性
| 属性 | 说明 |
|---|
| content-box | 标准盒子模型（默认值） |
没用过
3. 盒子装饰
3.1 圆角
| 项目 | 说明 |
|---|
| border-radius | 设置元素的圆角 |
| 取值 | 像素值、百分比 |
| 设置圆形 | border-radius: 50%; |
3.2 盒子阴影
| 项目 | 说明 |
|---|
| box-shadow | 设置元素的阴影效果 |
| 语法 | box-shadow: h-shadow v-shadow blur spread color inset |
| h-shadow | 水平阴影位置 |
| v-shadow | 垂直阴影位置 |
| blur | 模糊距离 |
| spread | 阴影大小 |
| color | 阴影颜色 |
| inset | 内阴影（可选） |
做hover效果用的，一般一个位移+阴影，增加动感
4. 外边距问题
4.1 外边距合并
- 场景：垂直排列的兄弟元素，上下 margin 会合并
- 现象：取两个 margin 中的较大值生效
4.2 外边距塌陷
- 场景：父子级的标签，子级的添加上外边距会产生塌陷问题
- 现象：导致父级一起向下移动
- 解决方法：
- 1.取消子级margin，父级设置padding
- 2.父级设置 overflow: hidden
- 3.父级设置 border-top
没注意过，实际开发中，写的屎山代码调一调其他属性，也还凑合
5. 内容溢出overflow属性
5.1 基本属性
| 属性 | 说明 |
|---|
| overflow | 控制内容溢出时的显示方式 |
| overflow-x | 控制水平方向的内容溢出 |
| overflow-y | 控制垂直方向的内容溢出 |
5.2 常见取值
| 取值 | 说明 |
|---|
| visible | 默认值，内容溢出时会显示在元素外部 |
| hidden | 内容溢出时会被裁剪，不显示溢出部分 |
| scroll | 无论内容是否溢出，都会显示滚动条 |
| auto | 只有当内容溢出时，才会显示滚动条 |
一般一句overflow:auto就不管了