层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
选择器的特异度
选择器的特异度是用来确定样式优先级的一个指标。如图，122>22，所以第一个选择器的优先级更高。
继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值。
初始值：
- CSS中，每个属性都有一个初始值；如background-color的初始值为transparent，margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值。 如background-color: initial
CSS求值过程
布局（Layout）
布局是指确定内容的大小和位置的算法。布局算法根据元素、容器、兄弟节点和内容等信息来计算。
布局的相关技术
布局属性
- width：指定元素的宽度，可以是长度、百分数或auto。
- height：指定元素的高度，可以是长度、百分数或auto。
- padding：指定元素的内边距，可以是长度或百分数。
- border：指定元素的边框样式、粗细和颜色。
- margin：指定元素的外边距，可以是长度、百分数或auto。
布局算法会根据这些属性的值来计算元素的大小和位置，从而确定元素在页面中的布局。
块级 vs 行级
在CSS中，元素可以分为块级元素和行级元素。块级元素生成块级盒子，行级元素生成行级盒子。
块级元素有以下特点：
- 生成块级盒子，独占一行。
- 可以设置宽度、高度、内边距和外边距。
- 可以包含其他块级元素和行级元素。
行级元素有以下特点：
- 生成行级盒子，和其他行级盒子一起放在一行或拆开成多行。
- 不能设置宽度、高度、内边距和外边距。
- 可以包含其他行级元素。
常见的块级元素包括div、p、h1-6等，常见的行级元素包括span、em、strong等。
常规流（Normal Flow）
常规流是指元素在页面中按照其在HTML文档中的顺序布局的方式。在常规流中，根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内。
常规流中的盒子会根据其在HTML文档中的顺序参与布局，从上到下依次摆放。盒子的大小和位置由布局算法根据元素的属性值计算得出。
行级排版上下文（Inline Formatting Context）
行级排版上下文是指只包含行级盒子的容器创建的一个上下文。在行级排版上下文中，盒子会在一行内水平摆放，一行放不下时会换行显示。
行级排版上下文的排版规则包括：
- 盒子在一行内水平摆放。
- 一行放不下时，换行显示。
- text-align属性决定一行内盒子的水平对齐。
- vertical-align属性决定一个盒子在行内的垂直对齐。
- 避开浮动元素。
块级排版上下文（Block Formatting Context）
块级排版上下文是指某些容器创建的一个上下文，其中包含的盒子会按照块级排版规则进行布局。常见的创建块级排版上下文的方式包括：
- 根元素。
- 浮动、绝对定位和inline-block的元素。
- Flex子项和Grid子项。
- overflow值不是visible的块盒。
- display: flow-root。
在块级排版上下文中，盒子会从上到下摆放，垂直margin不会合并，且不会和浮动元素重叠。
Flex Box
Flex Box是一种新的排版上下文，可以控制子级盒子的：
- 摆放的流向（→←↑↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行。
Flexibility可以设置子项的弹性，当容器有剩余空间时，子项会伸展；容器空间不够时，子项会收缩。
- flex-grow：有剩余空间时子项的伸展能力。
- flex-shrink：容器空间不足时子项的收缩能力。
- flex-basis：没有伸展或收缩时子项的基础长度。
Grid布局
Grid布局是一种新的排版方式，通过display: grid可以将元素生成一个块级的Grid容器。Grid布局可以将容器划分为网格，并设置每一个子项占哪些行列。
Grid布局的主要属性包括：
- grid-template-columns：设置网格的列数和宽度。
- grid-template-rows：设置网格的行数和高度。
- grid-column-start、grid-column-end：设置子项占据的列范围。
- grid-row-start、grid-row-end：设置子项占据的行范围。
通过设置这些属性，可以实现复杂的网格布局。
position属性
position属性用于控制元素的定位方式。常见的取值包括：
- static：默认值，非定位元素。
- relative：相对于自身原本位置偏移，不脱离文档流。
- absolute：绝对定位，相对于最近的非static祖先元素定位。
- fixed：相对于视口绝对定位。
position: relative：
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其它元素当它没有偏移一样布局
position: absolute：
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
通过设置position属性，可以实现元素在页面中的精确定位。
学习CSS的几点建议
- 充分利用MDN和W3C CSS规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还在不断出现
