CSS（四）

最新推荐文章于 2023-09-16 16:19:45 发布

彼山^O^

最新推荐文章于 2023-09-16 16:19:45 发布

阅读量111

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/bishan2898498/article/details/121149883

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的结构伪类选择器，包括其作用、优势及应用场景。接着讲解了伪元素，如如何使用它们在网页中创建非主体内容。标准流的概念及特点被阐述，包括块级元素和行内元素的排布规则。此外，文章深入探讨了浮动的作用，如图文环绕和网页布局，并提供了浮动的实现代码及特点。最后，讨论了清除浮动的重要性及多种清除浮动的方法，旨在确保布局的稳定性。

摘要由CSDN通过智能技术生成

一、结构伪类选择器

目标：能够使用 结构伪类选择器 在HTML中定位元素

1. 作用与优势：

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

2. 选择器

注意点
1. n为：0、1、2、3、4、5、6、......
2. 通过n可以组成常见公式

nth-of-type结构伪类选择器

选择器：

区别：
• :nth-child → 直接在所有孩子中数个数
• :nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

二、伪元素

目标：能够使用 伪元素 在网页中创建内容

伪元素：一般页面中的非主体内容可以使用伪元素
区别：

元素：HTML 设置的标签
伪元素：由 CSS 模拟出的标签效果

种类：

注意点：

必须设置content属性才能生效
伪元素默认是行内元素

三、标准流

目标：能够认识 标准流 的默认排布方式及其特点

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

1、浮动的作用

早期的作用：图文环绕

现在的作用：网页布局
• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

2、浮动的代码

属性名：float
属性值：

3、浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
        • 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素会受到上面元素边界的影响
5. 浮动元素有特殊的显示效果
        • 一行可以显示多个
        • 可以设置宽高
注意点：
        • 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中