深入CSS

选择器优先级（特异度）

优先级

行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式

内外部样式加载

就近原则
原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

继承

类选择器的继承

类选择器可以被子元素继承，子元素可以通过选择器与父元素及祖先元素相关的样式，从而共享相同的样式数据。这种继承效果在设计和排版的时候非常有用，可以减少大量的代码冗余。

派生选择器的继承

派生选择器可以解决CSS中继承的问题。它通过改变文档层次结构来实现继承。它的语法是以输入规则中的选择器作为一个简单选择器的起点。例如，下面的 CSS 样式表将对文档中所有。类为 notable 的段落应用背景颜色。

p.notable { background-color: #eee; }

显式继承

父元素的一些属性可以被子元素继承，例如 color、font-size 或 line-height 等属性都会被默认继承。这种继承效果可以拓展css的适用范围。

继承总结：通过继承，实现代码重用和设计排版的高效性和可读性，是css的一种非常重要的机制。在实际使用中，需要根据不同的情况选择合适的继承方式，提高CSS的效率和减少代码重复。

初始化

CSS中，每个属性都有一个初始值

background-color的初始值为transparent
margi-left的初始值为0
可以使用initial关键字显式重置为初始值例如：

background-color：initial

初始值对于继承属性和非继承属性，有着不同的含义：

对于继承属性，初始值只能被用于没有指定值的根元素上；
对于非继承属性，初始值可以被用于没有指定值的任意元素上。

CSS求值过程

CSS求值过程（也称为CSS解析和计算过程）是指浏览器在渲染网页时解析和应用CSS样式的过程。它包含以下几个阶段：

解析：浏览器首先会从下载的CSS文件或style标签中解析CSS代码。解析过程将CSS代码转换为浏览器可以理解的数据结构，通常是称为CSS对象模型（CSS Object Model，简称CSSOM）的树形结构。CSSOM表示了文档中的CSS规则，包括选择器、属性和值等。
层叠和计算：在解析完成后，浏览器开始对文档中的元素应用CSS样式。这涉及到层叠（Cascading）和计算（Computation）两个步骤。

层叠：层叠是指根据CSS规则的特定优先级和级联规则确定每个元素应用的最终样式。不同的CSS规则可能会有相同或冲突的选择器，层叠过程将根据选择器的特定性、顺序和重要性等规则来确定哪些样式声明应用到元素上。
计算：计算是指将层叠后确定的样式值应用到相应的元素上。计算过程会考虑样式属性的继承性，计算继承属性的值，并将最终的样式值应用到文档元素上。

布局和绘制：在样式计算完成后，浏览器会根据计算得到的样式值进行页面布局和绘制。布局过程确定每个元素的位置和大小，并创建一个渲染树（Render Tree）。渲染树是将文档中的元素转换为屏幕上实际绘制的对象。绘制过程将渲染树转换为位图或矢量图像，并通过显示设备呈现在屏幕上。
重绘和重排：当页面内容发生变化时，浏览器会触发重绘（Repaint）和重排（Reflow）操作。重绘是指更新元素的可视外观，而重排是指重新计算和调整元素的布局。重绘和重排操作可能会影响页面性能，因此应尽量优化CSS样式的设计和使用，以减少重绘和重排的频率和成本。

总结而言，CSS求值过程包括解析、层叠、计算、布局和绘制等步骤。理解这个过程可以帮助开发人员更好地优化和理解CSS样式的应用和影响。

布局（Layout）是什么

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

CSS 布局方式及相关技术

CSS布局方式 CSS布局涉及多种技术和方法，以下是几种常见的CSS布局技术：

1. 盒模型布局

传统盒模型布局：使用width、height、padding、border和margin等属性来控制元素的尺寸和间距。
弹性盒模型布局（Flexbox）：使用display: flex和相关属性来创建灵活的水平或垂直布局，可实现内容的自适应和对齐。
网格布局（Grid）：使用display: grid和相关属性来将网格划分为行和列，实现复杂的二维布局，能够自定义单元格大小和位置。

2. 定位布局

相对定位（Relative positioning）：使用position: relative将元素相对于其正常位置进行定位，使用top、right、bottom和left属性来调整元素的位置。
绝对定位（Absolute positioning）：使用position: absolute将元素相对于其最近的非静态定位祖先元素进行定位，或者相对于整个文档进行定位。
固定定位（Fixed positioning）：使用position: fixed将元素相对于视口进行定位，元素位置不随滚动而改变。

3. 响应式布局

媒体查询（Media Queries）：使用@media规则根据设备的屏幕宽度和其他媒体特性来应用不同的样式，实现响应式布局。
弹性布局（Flex Layout）：使用Flexbox布局和百分比宽度等技术，使布局在不同屏幕尺寸下具有弹性和可自适应性。
栅格系统（Grid Systems）：使用网格系统来划分页面为列，并将内容放置在网格中的列上，实现响应式和流动性布局。

4. 多列布局

多列布局（Multicolumn Layout）：使用column-count和column-width属性来创建多列布局，可实现报纸或杂志风格的文本和图片布局。
Flexbox和Grid布局：Flexbox和Grid布局也可以用于创建网格化多列布局，但具有更大的灵活性和控制性。

这些技术和方法可以结合使用，根据具体的布局需求选择适合的技术。同时，CSS框架（如Bootstrap）也提供了预定义的布局样式和组件，可以方便地实现常见的布局需求。

CSS的一些常见属性

此处不多加赘述，详情可以参考W3School的CSS属性 www.w3school.com.cn/cssref/inde…

块级 vs. 行级

块级（block-level）盒子

让盒子会在水平方向上扩展并占据父容器在该方向上的所有可用空间下一个盒子会转换到新行width、height、padding、margin、border都生效
块级标签h1 ~ h6、p、div、ul、ol、li、dl、dt、dd、header、main、footer、aside、nav、section、table、pre

行级（inline-level）盒子

多个行级盒子在一行顺序摆放，放不下会自动换行
对于仅展示文本的标签，如a、span、em、strong、label
width和height属性设置无效
padding、margin左右有效，上下margin无效（上下padding会撑开自己的边框和背景但不占空间）
行级标签a、span、em、strong、img、input、label、textarea、select、button、code

常规流Normal Flow

行级排版上下文（IFC）

行级排版上下文（Inline Formatting Context）是CSS中用于定义行内元素的布局和排版规则的一种机制。它影响着行内元素的布局、尺寸、浮动和相对定位等属性的表现。

创建行级排版上下文的常见方式包括：

父元素的display属性设置为inline-block、inline-flex、inline-grid等非常规行内布局值。
行内元素的display属性设置为block、float、position: absolute等使其脱离普通文本流的值。
设置元素的position属性为fixed或sticky。

下面是一个示例代码，展示如何创建行级排版上下文：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      background-color: lightblue;
      display: inline-block; /* 创建行级排版上下文 */
    }

    .inline-item {
      display: block; /* 脱离普通文本流 */
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="inline-item"></div>
    <div class="inline-item"></div>
    <div class="inline-item"></div>
  </div>
</body>
</html>

在上述示例中，.container类设置了display: inline-block，它作为一个容器元素创建了行级排版上下文。.inline-item类设置了display: block，使其成为行内元素的盒子，从而达到脱离普通文本流的效果。
在行级排版上下文中，.inline-item元素将按照块级元素的特性进行布局，每个元素都会独占一行，并且在行内上下文中可应用盒模型的属性。

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

CSS中的概念，用于定义块级元素的布局和排版规则的一种机制。块级排版上下文影响块级元素的尺寸、定位、浮动等属性的表现方式。

当包含块级元素的父元素满足一定条件时，会创建块级排版上下文。常见的触发条件包括：

父元素的overflow属性值为auto、hidden、scroll。
父元素的display属性值为inline-block、table-cell、table-caption、table、flex、grid。
父元素的position属性值为absolute、fixed、sticky。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      overflow: hidden; /* 创建块级排版上下文 */
      background-color: lightblue;
    }

    .block-item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</body>
</html>

Table排版上下文（Table Formatting Context）

在HTML中使用表格元素<table>及其相关元素时创建的一种排版上下文。它定义了表格布局规则，使表格元素能够正确地呈现为具有表格特性的布局。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: table; /* 创建表格排版上下文 */
      background-color: lightblue;
    }

    .table-cell {
      display: table-cell;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
  </div>
</body>
</html>

Flex排版上下文（Flexbox Formatting Context）

CSS中的一个特殊的排版上下文，用于进行弹性盒子（Flexbox）布局。它定义了弹性盒子的布局规则，使弹性盒子的子元素能够根据一系列灵活的规则进行自适应和对齐。

<html>
<head>
  <style>
    .container {
      display: flex; /* 创建弹性盒子排版上下文 */
      background-color: lightblue;
    }

    .flex-item {
      flex: 1;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</body>
</html>

Grid排版上下文（Grid Formatting Context）

CSS中的一个特殊的排版上下文，用于进行网格布局（Grid Layout）。它定义了网格元素的布局规则，使网格元素能够以行和列的形式进行布局，并提供强大的布局和定位能力。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex; /* 创建弹性盒子排版上下文 */
      background-color: lightblue;
    }

    .flex-item {
      flex: 1;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</body>
</html>

这些排版上下文根据特定的规则和属性，影响着元素的布局和表现效果。通过选择适当的排版上下文，我们可以实现各种灵活和复杂的布局方式，以满足不同的设计需求。

学习CSS的建议

充分利用 MDN 和 W3C 规范
保持好奇心
持续学习

深入CSS学习笔记 | 青训营