作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
选择器：
n的注意点：
- n为：0、1、2、3、4、5、6、……
- 通过n可以组成常见公式
功能 公式 偶数 2n、even 奇数 2n+1、2n-1、odd 找到前五个 -n+5 找到从第五个往后 n+5
（了解）nth-of-type结构伪类选择器
选择器：
区别：
- :nth-child → 直接在所有孩子中数个数
- :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
属性值
说明
:nth-child(n)
是父元素中的第1个子元素
:nth-last-child( )
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
:nth-of-type()
用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
:nth-last-of-type()
用法跟:nth-of-type()类似，不同是 :nth-last-of-type() 从最后一个这种类型的子元素开始往前计数
:first-child
等同于:nth-child(1)
:last-child
等同于:nth-last-child(1)
:first-of-type
等同于:nth-of-type(1)
:last-of-type
等同于:nth-last-of-type(1)
:only-child
是父元素中唯一的子元素
:only-of-type
是父元素中唯一的这种类型的子元素
:root
根元素，就是HTML元素
:empty
代表里面完全空白的元素
:not()的格式是:not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
- 伪元素：一般页面中的非主体内容可以使用伪元素
- 区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
- 种类
伪元素 作用 ::before 在父元素内容的最前添加一个伪元素 ::after 在父元素内容的最后添加一个伪元素
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
- 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
- 常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
- 从左到右、从上到下按顺序摆放好
- 默认情况下，互相之间不存在层叠现象
float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
- 属性名：float
- 属性值：
属性名 效果 left 左浮动 right 右浮动
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
注意点：浮动的元素不能设置text-align:center或者margin:0 auto
浮动规则一：
- 元素一旦浮动后, 脱离标准流，朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
浮动规则二：
- 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
浮动规则三：浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
浮动规则四：
- 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容
浮动规则五：
- 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
浮动常用的场景：解决行内级元素、inline-block元素的水平间隙问题
- 清除默认的margin和padding
- 找到ul，去除小圆点 list-style: none;
- 找到li标签，设置浮动让li一行中显示
- 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
- 方法一：给a标签设置 display : inline-block
- 方法二：给a标签设置 display : block
- 方法三：给a设置 float : left
由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
清浮动的目的是让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清除浮动呢? 使用clear属性
clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
clear的常用取值：
属性值
说明
left
要求元素的顶部低于之前生成的所有左浮动元素的底部
right
要求元素的顶部低于之前生成的所有右浮动元素的底部
both
要求元素的顶部低于之前生成的所有浮动元素的底部
none
默认值，无特殊要求
- 含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
- 原因：
子元素浮动后脱标 → 不占位置
- 目的：
需要父元素有高度，从而不影响其他网页元素的布局
（1）方法 — ：直接设置父元素高度
- 特点：
- 优点：简单粗暴，方便
- 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
（2）方法二：额外标签法
- 操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
- 特点：
- 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
（3）方法三：单伪元素清除法
操作：用伪元素替代了额外标签
特点：优点：项目中使用，直接给标签加类即可清除浮动
（4）方法四：双伪元素清除法
操作：
特点：
优点：项目中使用，直接给标签加类即可清除浮动
（5）给父元素设置overflow : hidden
- 操作：
直接给父元素设置 overflow : hidden
- 特点：
优点：方便
FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；
块级元素的布局属于Block Formatting Context（BFC）
- 也就是block level box都是在BFC中布局的；
行内级元素的布局属于Inline Formatting Context（IFC）
- 而inline level box都是在IFC中布局的；
简单概况如下：
- 在BFC中，box会在垂直方向上一个挨着一个的排布；
- 垂直方向的间距由margin属性决定；
- 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
- 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；
那么这个东西有什么用呢？
- 解决margin的折叠问题；
- 解决浮动高度塌陷问题；
BFC的作用一：解决折叠问题
- 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
- 那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。
BFC的作用二：解决浮动高度塌陷
网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果。
- 但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
- 没有解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？
事实上，BFC解决高度塌陷需要满足两个条件：
- 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
- 浮动元素的父元素的高度是auto的；
BFC的高度是auto的情况下，是如下方法计算高度的
- 如果只有inline-level，是行高的顶部和底部的距离；
- 如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
- 如果有绝对定位元素，将被忽略；
- 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
创建BFC方法：
- html标签是BFC盒子
- 浮动元素是BFC盒子
- 行内块元素是BFC盒子
- overflow属性取值不为visible。如：auto、hidden…
- ……