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/
来源：https://www.cnblogs.com/falling-maple/p/17522906.html |
发表于 2023-7-3 14:54:00
