这是我参与「第五届青训营」伴学笔记创作活动的第 12 天，还在新的组件上纠缠，所以继续昨天的css复习，这次是有关css的三大特性，还有一些我平时遇到的问题。
css 继承
- css 继承是指子元素会继承父元素的样式。
继承条件：父元素的有关的文字属性会被继承，而非文字属性则不会被继承。
css 层叠
- css 层叠是指当一个元素同时被多个样式影响时，会按照一定的规则来决定最终的样式。
层叠规则:当样式冲突，并且选择器优先级相同时，后面的样式会覆盖前面的样式。
css 优先级
-
css 优先级：!important > 内联样式 > id 选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 浏览器默认样式 > 继承样式。
-
!important不能提高继承样式的优先级。 -
尽量少用
!important，因为它会使得代码难以维护。 -
复合选择器的权重计算
分别比较两个复合选择器中各优先级选择器的个数，如果个数相同，则比较下一个优先级的选择器，直到找到个数不同的选择器，确定复合选择器的优先级
比较顺序为：（行内，id，类，标签）。
每日查漏补缺
box-sizing: border-box;：这个属性可以让我们设置的盒子宽高包括内边距和边框。- 脱离文档流的方式：
float：left/right、position：absolute/fixed会脱离文档流。 但是position：relative不会脱离文档流。 - css 画三角形：
- 将盒子宽高设为 0，颜色设置突出一边的 border 颜色，就能得到一个三角形：
div {
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: red;
}
- css 书写顺序：布局定位属性 > 自身样式 > 文本样式 > 其他样式。注重 css 书写顺序可以减少浏览器 reflow，提高浏览器渲染性能。样例如下：
.box {
/* 布局定位属性 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 自身样式 */
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid #000;
background: #fff;
/* 文本样式 */
font-size: 14px;
font-weight: bold;
color: #000;
/* 其他样式 */
cursor: pointer;
opacity: 1;
}
