Web前端系列技术之CSS基础（从入门开始）④
今天主要介绍的是关于网页的布局，下面就是CSS非常重要的五个进阶知识点：
十三、结构伪类选择器
十四、伪元素
十五、标准流
十六、浮动
十七、 清除浮动
文章目录
十三、结构伪类选择器
1. 作用与优势
① 作用：根据元素在HTML中的结构关系查找元素；
② 优势：减少对于HTML中类的依赖，有利于保持代码整洁；
③ 场景：常用于查找某父级选择器中的子元素；
2. 选择器
n的注意点：
- n为：0、1、2、3、4、5、6、……
- 通过n可以组成常见公式：
3. nth-of-type结构伪类选择器（了解）
①选择器：
| 选择器 | 说明 |
|---|---|
| E:nth-of-type(n) { } | 只在父元素的同类型（E）子元素范围中，匹配第n个 |
②区别：
• :nth-child → 直接在所有孩子中数个数；
• :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数；
十四、伪元素
①伪元素：一般页面中的非主体内容可以使用伪元素；
②区别：
- 元素：HTML 设置的标签；
- 伪元素：由 CSS 模拟出的标签效果；
③种类：
| 伪元素 | 作用 |
|---|---|
| :: before | 在父元素内容的最前添加一个伪元素 |
| :: after | 在父元素内容的最后添加一个伪元素 |
注意点：
- 必须设置
content属性才能生效； - 伪元素默认是行内元素；
十五、标准流
①标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素；
②常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行；
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行；
十六、浮动
1. 浮动的作用
① 早期的作用：图文环绕
② 现在的作用：网页布局
常用场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右；
2. 浮动的代码
属性名：float
属性值：
| 属性名 | 效果 |
|---|---|
| left | 左浮动 |
| right | 右浮动 |
3. 浮动的特点
① 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置；
② 浮动元素比标准流高半个级别，可以覆盖标准流中的元素；
③ 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；
④ 浮动元素有特殊的显示效果：
• 一行可以显示多个；
• 可以设置宽高；
⑤ 注意点：
• 浮动的元素不能通过text-align:center或者margin:0 auto；
4. 浮动的案例
【项目常用——书写网页导航步骤】：
- 清除默认的margin和padding；
- 找到ul，去除小圆点；
- 找到li标签，设置浮动让li一行中显示；
- 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？
• 方法一：给a标签设置display : inline-block
• 方法二：给a标签设置display : block
• 方法三：给a设置float : left
十七、 清除浮动
① 含义：清除浮动带来的影响；
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素；
② 原因：
• 子元素浮动后脱标 → 不占位置；
③ 目的：
• 需要父元素有高度，从而不影响其他网页元素的布局；
1. 清除浮动的方法
1.1 直接设置父元素高度
特点：
• 优点：简单粗暴，方便；
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块；
1.2 额外标签法
操作：
- 在父元素内容的最后添加一个块级元素；
- 给添加的块级元素设置
clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂；
1.3 单伪元素清除法
操作：用伪元素替代了额外标签；
① ：基本写法
② ：补充写法
优点：项目中使用，直接给标签加类即可清除浮动；
1.4 双伪元素清除法
操作：
.clearfix::before 作用: 解决外边距塌陷问题；
外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置；
优点：项目中使用，直接给标签加类即可清除浮动；
1.5 给父元素设置overflow : hidden
操作：
直接给父元素设置 overflow : hidden；
优点：方便；
2. 清除浮动的拓展（BFC）
块格式化上下文（Block Formatting Context）：BFC
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建BFC方法：
① float 不为 none
② position 不为 static或relative
③ display 为 table-cell、table-caption、inline-block、flex或inline-flex
overflow 不为 visible
满足其一即可形成新的BFC；
BFC盒子常见特点：
① 一个BFC区域只包含其子元素，不包括其子元素的子元素。
并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域；
②BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动；
③BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷；
总结
◆ 能够使用 结构伪类选择器 在HTML中选择元素
◆ 能够说出 标准流 元素的布局特点
◆ 能够说出 浮动元素 的特点
◆ 能够使用浮动完成 小米模块布局案例
◆ 能够说出 清除浮动 的目的，并能够使用 清除浮动的方法
以上就是所要介绍的CSS的第四节内容，后续即将更新CSS的学习目标。感谢关注和支持，让我们一起成长！
有兴趣可回顾一下CSS基础学习的文章内容，再结合之前所介绍的HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！