深入理解CSS总结2~字节X豆包MarsCode青训营

深入理解CSS总结2------字节跳动 X 豆包MarsCode-HowieCong

前端入门~基础语言篇------课程讲师：赵文博

一、选择器的优先级

• 选择器的优先级决定了样式应用的顺序，优先级高的选择器样式会覆盖优先级低的。

• 优先级顺序：内联样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器

二、选择器的特异度

• 特异度（Specificity）是一种衡量选择器权重的方式，用于确定哪个选择器在样式冲突时具有更高的优先级。它通过一个数值来表示，这个数值由三个部分组成，分别对应不同类型的选择器计数：

  1. 内联样式：记为 1,0,0

  2. ID 选择器：每个 ID 选择器记为 0,1,0

  3. 类选择器、属性选择器和伪类选择器：每个记为 0,0,1

  4. 元素选择器和伪元素选择器：每个记为 0,0,0,1

• 计算特异度时，将各个部分的计数相加，得到一个总的特异度值。例如，#myDiv p的特异度为 0,1,0 + 0,0,0,1 = 0,1,0,1；.highlight a:hover的特异度为 0,0,1 + 0,0,0,1 + 0,0,1 = 0,0,3。特异度值越大，优先级越高

三、继承&显式继承

继承：在 CSS 中，某些属性会自动从父元素继承到子元素，除非在子元素上显式指定了不同的值。这使得文档的样式具有一致性，减少重复代码。例如，文本相关的属性，如font-family、font-size、color等通常会被继承。如果在body元素上设置了font-family: Arial, sans-serif;，那么body内的所有子元素（如p、h1、div等）都会默认使用这个字体，除非它们自己设置了不同的font-family
显式继承：通过inherit关键字，可以明确指示一个属性从父元素继承值。这在某些情况下很有用，例如当你想覆盖一个元素的默认样式，但又希望它从父元素继承特定属性时。

四、初始值

• CSS中，每个属性都有一个初始值:每个 CSS 属性都有一个初始值，这是在没有任何样式规则应用到元素时该属性所具有的值。例如：

  • background-color的初始值为transparent

  • margin-left的初始值为0

• 可以使用initial关键字显式重置为初始值

  • background-color: initial; /* 将背景颜色重置为初始的透明 */

  • margin-left: initial; /* 将左边距重置为初始的0 */

五、CSS求值过程（难！复杂！多理解！）:

Dom树&样式规则 => filtering => 声明值=> cascading => 层叠值 => defaulting => 指定值 => resolving => 计算值 => formatting => 使用值 => constraining => 实际值

• Dom树&样式规则:浏览器首先解析 HTML 文档构建 DOM 树，同时解析 CSS 样式表获取所有样式规则。DOM 树表示文档的结构，而样式规则定义了如何显示这些元素

• filtering:在这一步，浏览器会根据选择器的匹配规则，筛选出哪些样式规则应用到哪些元素上。只有匹配到特定元素的样式规则才会进入后续流程

• 声明值 :确定应用到元素的样式规则后，提取出每个属性在这些规则中声明的值。例如，p { color: blue; }，这里color属性的声明值就是blue

• cascading:当一个元素可能匹配多个样式规则，且这些规则对同一个属性有不同声明时，就需要进行层叠。根据选择器的优先级和特异度，以及 "后来居上" 原则，确定每个属性最终的层叠值

• 层叠值:经过层叠过程后确定的属性值

• defaulting :如果层叠值为空（即没有匹配的样式规则为该属性指定值），则根据属性的特性，从继承或初始值中获取一个值。例如，如果某个元素没有为color属性设置层叠值，且它的父元素设置了color，那么它会继承父元素的color值；如果没有可继承的值，则使用color属性的初始值（通常是黑色，具体取决于浏览器默认样式）

• 指定值:通过层叠或默认处理后确定的最终应用到元素的属性值

• resolving :对一些相对值（如百分比、em 等）进行解析，根据相关元素的尺寸或字体大小等计算出具体的值。例如，如果一个元素的宽度设置为50%，浏览器会根据其父元素的宽度计算出实际的像素值

• 计算值:经过解析相对值后得到的最终数值

• formatting:将计算值转换为适合文档显示的格式，例如将颜色值转换为实际的 RGB 或 HSL 表示，将长度值转换为具体的像素值等

• 使用值：格式化后用于实际渲染元素的属性值

• constraining：考虑到一些布局限制和设备特性，对使用值进行约束和调整。例如，在响应式设计中，根据屏幕宽度调整元素的布局和尺寸

• 实际值：最终应用到页面上显示元素的实际属性值

六、布局（Layout）

• 确定内容的大小和位置的算法

• 依据元素、容器、兄弟节点和内容等信息来计算

• 布局相关技术：

（1）常规流Normal Flow

- 行级、块级、表格布局、FlexBox、Grid布局

- 盒模型：Content：width + height、padding、border、margin

- Width：指定content box宽度；取值为长度、百分数、auto；auto由浏览器根据其他属性确定；百分数相对于容器的content box宽度

- Height：指定content box高度；取值为长度、百分数、auto；auto由内容计算得来；百分数相对于容器的content box高度；容器有指定的高度时，百分数才生效

- Padding：指定元素四个方向的内边距；百分数相对于容器宽度

- Border：指定容器边框样式、粗细和颜色；三种属性：border-width、border-style、border-color；四个方向：border-top、border-right、border-bottom、border-left ；CSS画三角形：宽度高度都设置为0，设置颜色不一样，粗细不一样 => 不同的三角形

- Margin：指定元素四个方向的外边距；取值为长度、百分数、auto；百分数相对于容器宽度；使用margin:auto水平居中；margin collapse

- box-sizing：border-box => width + heigth + padding + border

- overflow:visible|hidden|scroll => 溢出的内容

- 块级盒子（Block Level Box）：不和其他盒子并列摆放，适用所有的盒模型属性

- 行级盒子（Inline Level Box）：和其他行级盒子一起放在一行或拆成多行，盒模型中的width、height不同

- 块级元素：生成块级盒子；body、article、div、main、section、h1-h6、p、ul、li等；display:block

- 行级元素：生成行级盒子，内容分散在多个行盒（line box）中；span、em、strong、cite、code等；display:inline

- display属性：block（块级盒子）；inline（行级盒子）；inline-block（本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行）；none（排版时完全被忽略）

1. 行级排版上下文Inline Formatting Content（IFC）

- 只包含行级盒子的容器会创建一个IFC

- IFC内的排版规则
    - 盒子在一行内水平摆放

    - 一行放不下时，换行显示

    - text-align决定一行内盒子的水平对齐

    - vertical-align决定一个盒子在行内的垂直对齐

    - 避开浮动（float）元素

2. 块级排版上下文Block Formatting Context（BFC）

• 某些容器会创建一个BFC

  • 根元素

  • 浮动、绝对定位、inline-block

  • Flex子元素和Grid子元素

  • overflow值不是visible的块盒

  • display:flow-root

• BFC内的排版规则

  • 盒子从上到下摆放

  • 垂直margin合并

  • BFC内盒子的margin不会与外面的合并

  • BFC不会和浮动元素重叠

3. Flex布局

4. Grid布局

5. Table布局

（2）浮动Float

（3）绝对定位

🧠关于豆包MarsCode

1. 推荐使用！

豆包MarsCode简单方便，上手快，能应对日常的编程任务，刷题时也能给你提供不错的解题思路和示例代码，很适合新手和老手，大大提高了工作效率；所以个人挺推荐使用豆包MarsCode去辅助开发！

2. HowieCong与豆包MarsCode"未完待续"的经历

1. 线上参加过两次的字节跳动 X 豆包MarsCode的青训营，积极参与其中，搭配着MarsCode去刷算法题和项目开发真能学到很多

2. 线下在参加Pycon China 2024上海站时看到了MarsCode参展，MarsCode团队成员非常热情的，拿到了MarsCode的一些周边

3. 线上参与字节跳动可视化解决方案VisActor开源基于VStory开发动态信息图贡献demo，搭配着MarsCode理解代码，辅助编写项目，扩展一门新的的技术

❓其他

1. 疑问与作者HowieCong声明

• 如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

• 若想让作者更新 哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

• 声明 ：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！

2. 作者社交媒体/邮箱-HowieCong

• HowieCong Social Meida : Wechat|Instagram|Feishu...

• HowieCong Mail : howiecong@163.com