深入CSS｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天

一、CSS特性

1.继承性

• css中的属性可以继承，如果本标签的属性没有设置或者默认，就会去继承父级的属性
• 一般来说与文字相关的属性可以继承，与和模型相关的属性不可以继承

• 还可以用inherit关键字，让不可继承的元素继承元素值

2.优先级：

• 不同的选择器有可能对应到同样的元素，那么那一条选择生效呢。

• 当选择器越特殊，指定的属性越明确，那这条选择就生效。

• 不同的选择器会有一个权重来确定他的特殊性,随着选择器的组合，权重也会叠加

3.层叠性

• 设置不同样式，样式会层层叠加共同作用于标签上
• 相同属性相同优先级，最后写的样式生效

二、CSS原理

css查找、渲染原理

浏览器建立成dom树后，为了布局、渲染页面，会遍历页面每一个元素的所有css属性。要查找势必需要“关键字”，选择器等就是我们的“关键字”。

• 第一步 (Filtering)样式规则拿到后，筛选相匹配的选择器、匹配属性和media等

  • 得到属性声明值：某个属性可能有多个声明值都能改变其元素样式

    p{font-size:16px}
    p.text{font-size:1.2rem}
    

• 第二步 (Cascading)按照层叠性选择一个属性（来源、!important、选择器特异性、都相同看书写顺序等）

  • 得到层叠值：层叠优先级最高的值

• 第三步 (Defaulting)如果层叠值为空，继承父级属性或者使用初始值

  • 得到指定值：经过第二步和第三步最后一定会得一个指定值

• 第四步 (resolving)将相对值或者关键字转化为绝对值，如em转为px，相对路径转为绝对路径

  • 得到计算值：在不实际布局的情况下，所能得到的最具体的值，比如相对父级的60%

• 第五步 (formatting) 将计算值进一步转换，关键字、百分比等绝对值

  • 得到使用值：经过格式化后会得到一个可以用的值，不会再有相对值或关键字，比如400.2px

• 第六步 (constraining) 将小数像素值强制转为整数，或者根据窗口大小选择展示min-width或者直接展示视口大小

  • 得到实际值：渲染时实际生效的值比如400px

布局

css中的布局其实是一种自动控制内容位置和大小的算法。它依据元素、容器、嵌套兄弟关系和内容等信息计算

三、CSS学习的建议

• 充分利用MDN和W3C CSS的规范

• 保持好奇心，善用浏览器的开发者工具。看别人的效果是如何实现的

• 持续学习，CSS新特性还在不断出现

查漏补缺

• overflow可以实现让超出的部分隐藏起来，或者隐藏后还可以在盒子里滚动查看

    overflow:hidden;/*隐藏*/
    overflow:scroll;/*滚动查看*/

• text-align行内元素水平对齐，

  vertical-align行内元素垂直对齐

• flexbox是单一的布局，grid是二维的布局