CSS学习笔记2-CSS的继承_层叠_类型和CSS盒子模型

1 CSS属性的继承

1.1 CSS的某些属性具有继承性(Inherited):

如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

1.2 如何知道一个属性是否具有继承性呢?

常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
注意：继承过来的是计算值, 而不是设置值

2 CSS属性的层叠

2.1 CSS的翻译是层叠样式表, 什么是层叠呢?

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
那么属性会被一层层覆盖上去;
但是最终只有一个会生效;

2.2 那么多个样式属性覆盖上去, 哪一个会生效呢?

判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
判断二: 先后顺序, 权重相同时, 后面设置的生效;

2.3 选择器的权重

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

3 HTML元素的类型

为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:

3.1 通过CSS修改元素类型（display属性)

CSS中有个display属性，能修改元素的显示类型，有4个常用值

事实上display还有其他的值, 比如flex, 后续会专门学习;

3.2 注意：

行内非替换元素不可以设置宽高，如：span，a
行内替换元素可以设置宽高，如：img，input

3.3 编写HTML时的注意事项

3.4 元素隐藏方法

4 CSS盒子模型

4.1 内容 - width和height

4.2 内边距 - padding

4.3 边框 - border

4.4 外边距 - margin

4.4.1 上下margin的传递

4.4.2 上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
水平方向上的margin（margin-left、margin-right）永远不会collapse

4.5 外轮廓 - outline

4.6 盒子阴影 - box-shadow

在线制作盒子阴影：https://html-css-js.com/css/generator/box-shadow/

4.7 文字阴影 - text-shadow

在线制作文字阴影： https://html-css-js.com/css/generator/text-shadow/