这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

选择器的特异度

CSS 中的选择器有不同的优先级，称为“特异度”。特异度越高的选择器，其对应的样式就会优先应用。

特异度的值由四部分组成：

元素选择器（例如 p、h1、div 等），其特异度为 1,0,0,0
类选择器（例如 .class-name），其特异度为 0,1,0,0
ID 选择器（例如 #id-name），其特异度为 0,0,1,0
属性选择器和伪类选择器（例如 [attr]、:hover 等），其特异度为 0,0,0,1

当存在多个选择器样式同时适用于同一元素时，会应用特异度最高的样式，如果特异度相同，则应用最后出现的样式。

css选择器优先级最高到最低顺序为：

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
子选择器（ul < li）
后代选择器（li a）
伪类选择（a:hover,li:nth-child）

注意：!important的优先级是最高的，但出现冲突时则需比较”四位数“;
优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。

通常建议使用类选择器和 ID 选择器来组织 CSS 代码，并避免使用元素选择器和属性选择器来过于精确地定位元素。这样可以使代码更易于维护和重用。

继承

CSS 继承是指当一个元素的样式被继承到其子元素上的过程。只有一些 CSS 属性是可继承的，例如 font-size, color, font-family 等。

显式继承

初始值

CSS求值过程

CSS 求值过程是指浏览器如何将所有的 CSS 规则应用到 HTML 元素上的过程

布局相关技术

常规布局、浮动、绝对定位、盒子模型

行级 vs 块级

行级排版上下文

（1）行内元素从容器的顶端开始，一个接一个地水平排布。

（2）水平padding、border和margin对行内元素有效。但垂直的padding、border和margin不影响其高度。

（3）一个水平行中的所有 inline box 组成了名为 line box 的矩形区域。

（4）line box 的高度始终容下所有的 inline box ，并只与行高有关。

（5）line box 的宽度受到父容器和浮动元素存在的影响(这就是文本环绕浮动元素)。如果 line box 的宽度小于容器， line box 的水平排布就取决于 text-align 。如果 line box 的宽度大于容器，则截断 line box 并换行。在新的 line box 中重新排布元素(截断处不应用 padding 和 margin 值)。如果 line box 无法截断，如单词过长或者指定不换行，则会溢出容器。

块级排版上下文

1.BFC 定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2.BFC布局规则：

（1）内部的Box会在垂直方向，一个接一个地放置。

（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

（3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

（4）BFC的区域不会与float box重叠。

（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

（6）计算BFC的高度时，浮动元素也参与计算

Flex Box 是什么？

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

Grid布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局。

绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

[ 深入CSS | 青训营 ]