开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
9.三大特性
9.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（覆盖）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
- 样式冲突，遵循的原则就是就近原则，那个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
9.2 继承性
字标签会继承父类标签的某些样式，如文本颜色和字号；
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line- 这些元素开头的可以继承，以及color属性）
9.3 优先级
继承的权重为0
10.盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
10.1 边框(border)
border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
- 语法：
border:border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框样式 |
| border-color | 边框颜色 |
- 简写：
border:1px solid red; /*无顺序*/
- 边框分开写法：
border-top:1px solid red; /*只设置上边框，其余同理*/
- border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
border-collapse:collapse;
- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起
10.2 内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
简写：
| 值的个数 | 表达的意思 |
|---|---|
| padding：5px | 1个值，表示上下左右都有5 像素内边距 |
| padding：5px 10px | 2个值，表示上下内边距是5 像素，左右内边距是10像素 |
| padding：5px 10px 20px | 3个值，表示上内边距5像素，左右内边距10像素，下边距20像素 |
| padding：5px 10px 20px 30px | 4个值，上右下左 |
