【前端学习笔记】(六)（结构伪类选择器、伪元素、标准流、浮动、清除浮动）

香蕉卟NaNa

已于 2022-05-02 21:02:15 修改

阅读量240

点赞数 1

分类专栏：前端文章标签：前端

于 2022-04-07 22:19:41 首次发布

本文链接：https://blog.csdn.net/weixin_48650082/article/details/123974328

版权

前端专栏收录该内容

10 篇文章 4 订阅

订阅专栏

1、结构伪类选择器

1.1 作用与优势：

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

1.2 选择器

选择器	说明
E:first-child{ }	匹配父元素中第一个子元素，并且时E元素
E:last-child{ }	匹配父元素中最后一个子元素，并且时E元素
E:nth-child(n){ }	匹配父元素中第n个子元素，并且时E元素
E:nth-last-child(n){ }	匹配父元素中倒数第n个子元素，并且时E元素

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        li:first-child {
            background-color: aqua;
        }
        /* 选中最后一个 */
        li:last-child {
            background-color: blueviolet;
        }
        /* 选中任意一个，想选哪一个就在小括号中写上第几个，序号从1开始 */
        li:nth-child(3) {
            background-color: coral;
        }
        /* 选中倒数第xx个，想选倒数哪一个就在小括号中写上倒数第几个，序号从1开始 */
        li:nth-last-child(3) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

效果展示：
结构伪类选择器

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

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前五个	-n+5
找到从第五个往后	n+5

例子①（选中奇偶行）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中偶数 */
        li:nth-child(2n) {
            background-color: coral;
        }
        /* 选中奇数 */
        li:nth-child(2n+1) {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

效果展示：
结构伪类用公式选中奇偶列
例子②（用公式选中前几个或第几个往后的）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中前3个 */
         li:nth-child(-n+3) {
            background-color: pink;
        }
        /* 选中第6个往后的 */
         li:nth-child(n+6) {
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

效果展示：
结构伪类选择器用公式选中前3个和第6个之后的
例子③（用公式选中某数的倍数）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中3的倍数 */
        li:nth-child(3n) {
            background-color: aquamarine;
        }
        /* 选中4的倍数 */
         li:nth-child(4n) {
            background-color: blueviolet;
        }
        /* 选中5的倍数 */
        li:nth-child(5n) {
            background-color: gold;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

效果展示：
结构伪类选择器用用公式选中某数的倍数的列

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

➢ 选择器：

选择器	说明
E:nth-of-type(n){ }	只在父元素的同类型(E)子元素范围中，匹配第n个

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

2、伪元素

➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：
（1）元素：HTML 设置的标签
（2）伪元素：由 CSS 模拟出的标签效果
➢ 种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

➢ 注意点：
（1）必须设置 content 属性才能生效
（2）伪元素默认是行内元素，若要给伪元素添加宽高，要设置其 display 属性，将其变为块级元素，或行内块元素

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 150px;
            height: 150px;
            background-color: aquamarine;
        }
        
        .one::before {
            /* 添加内容 */
            /* content必须添加，否则伪元素不生效
            有文字内容，就在引号里面写，没有文字内容的，引号里就为空，啥也不写 */
            content: '前端';
            /* 默认是行内元素，宽高不生效，如果要设置宽高，要加上display属性 */
        }
        .one::after {
            content: '工程师';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签，用于一些装饰性的不重要的小图 -->
    <!-- 找父级，在这个父级里面创建子标签 -->
    <div class="one">开发</div>
</body>
</html>

效果展示：
伪元素

3、标准流

➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
（1）块级元素：从上往下，垂直布局，独占一行
（2）行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

4、浮动

4.1 浮动的作用

➢ 早期的作用：图文环绕

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

4.2 浮动的代码

➢ 属性名：float
➢ 属性值：

属性值	效果
left	左浮动
right	右浮动

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            float: left;
        }
        div {
            width: 100px;
            height: 100px;
        }
        .one {
            background-color: aqua;
            float: left;
        }
        .two {
            background-color: coral;
            float: right;
        }
    </style>
</head>
<body>
    <h3>图文环绕</h3>
    <img src="images/MH/pic1_1.jpg">
    计算机发展史:第一代电子管计算机——ENIAC(The Electronic Numerical Integrator And Computer)1946年在费城公诸于世，它通过不同部分之间的重新接线编程，还拥有并行计算能力，但功能受限制，速度也慢。ENIAC的问世标志现代计算机的诞生，是计算机发展史上的里程碑。第二代晶体管计算机 晶体管的发明大大促进计算机的发展，晶体管代替电子管，电子设备体积减小。1956年，晶体管在计算机中使用，晶体管和磁芯存储器导致了第二代计算机的产生。第二代计算机体积小、速度快、功耗低、性能更稳定。首先使用晶体管技术的是早期的超级计算机，主要用于原子科学的大量数据处理，这些机器价格昂贵，生产数量极少。第三代集成电路计算机，晶体管比起电子管进步，但产生的大量热量损害计算机内部的敏感部分。1958年发明了集成电路(IC)，将电子元件结合到一片小小的硅片上，使更多的元件集成到单一的半导体芯片上。于是，计算机变得更小，功耗更低，速度更快。这一时期的发展还包括使用了操作系统，使计算机在中心程序的控制协调下可以同时运行许多不同的程序。1964年，美国IBM公司研制成功第一个采用集成电路的通用电子计算机系列IBM360系统。第四代大规模集成电路计算机 大规模集成电路(LSI)可以在一个芯片上容纳几百个元件。到了80年代，超大规模集成电路(VLSI)在芯片上容纳了几十万个元件，后来的ULSI将数字扩充到百万级。可以在硬币大小的芯片上容纳如此数量的元件使得计算机的体积和价格不断下降，而功能和可靠性不断增强。基于“半导体”的发展，到了一九七二年，第一部真正的个人计算机诞生了。第五代智能计算机 1981年，在日本东京召开了第五代计算机研讨会，随后制订出研制第五代计算机的长期计划。智能计算机主要特征是具备人工智能，能像人一样思考，并且运算速度极快，其硬件系统支持高度并行和推理，其软件系统能够处理知识信息。神经网络计算机（也称神经元计算机）是智能计算机的重要代表。但第五代计算机目前仍处在探索、研制阶段。真正实现后,将有无量的发展前途。第六代生物计算机 半导体硅晶片的电路密集，散热问题难以彻底解决，影响了计算机性能的进一步突破。研究发现，DNA的双螺旋结构能容纳巨量信息，其存储量相当于半导体芯片的数百万倍。一个蛋白质分子就是存储体，而且阻抗低、能耗小、发热量极低。基于此，利用蛋白质分子制造出基因芯片研制生物计算机，已成为当今计算机技术的最前沿。生物计算机比硅晶片计算机在速度、性能上有质的飞跃，被视为极具发展潜力的“第六代计算机”。
    <h3>网页布局</h3>
    <div class="one">div1</div>
    <div class="two">div2</div>
</body>
</html>

效果展示：
关于浮动

4.3 浮动的特点

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

5、清除浮动

5.1 清除浮动的介绍

➢ 含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因：
• 子元素浮动后脱标 → 不占位置
➢ 目的：
• 需要父元素有高度，从而不影响其他网页元素的布局

受浮动影响的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 514px;
            background-color: aquamarine;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .bottom {
            height: 50px;
            background-color: coral;
            
        }
    </style>
</head>
<body>
    <!-- 父级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</body>
</html>

效果展示（受浮动影响的样子）：
受浮动影响的情况
没有受浮动影响的样子：

5.2 清除浮动的方法

5.2.1 清除浮动的方法 — ① 直接设置父元素高度

➢ 特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 514px;
            /* 父级标签加上height可以规避左右两侧浮动的影响,但是有时候网页的高不能加 */
            height: 300px;
            background-color: aquamarine;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .bottom {
            height: 50px;
            background-color: coral;
            
        }
    </style>
</head>
<body>
    <!-- 父级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</body>
</html>

5.2.2 清除浮动的方法 — ② 额外标签法

➢ 操作：
（1）在父元素内容的最后添加一个块级元素
（2）给添加的块级元素设置 clear:both
➢ 特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 514px;
            /* 父级标签加上height可以规避左右两侧浮动的影响,但是有时候网页的高不能加 */
            /* 在不能加高的情况下可用格外标签法清除浮动，即在浮动的内容后面添加一个标签。
            例如 <div class="clearfix"></div>，然后在CSS样式中写上clear: both;就可清除两侧浮动带来的影响 */
            /* height: 300px; */
            background-color: aquamarine;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .bottom {
            height: 50px;
            background-color: coral;
            
        }
        .clearfix {
            /* 清除左右两侧浮动的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <div>
    <!-- 父级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
            <!-- 添加一个用来清除浮动的标签 -->
            <div class="clearfix"></div>
        </div>
        <div class="bottom"></div>
    </div>
    <br>
    <div>
        
    </div>
</body>
</html>

5.2.3 清除浮动的方法 — ③ 单伪元素清除法

① ：基本写法
单伪元素清除浮动基本写法

② ：补充写法
单伪元素清除浮动补充写法
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 514px;
            /* 父级标签加上height可以规避左右两侧浮动的影响,但是有时候网页的高不能加 */
            /* height: 300px; */
            background-color: aquamarine;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .bottom {
            height: 50px;
            background-color: coral;
        }
        /* 单伪元素清除浮动 和额外标签法一样 */
        .clearfix::after {
            /* 伪元素要加上content才能起作用 */
            content: '';

            /* 伪元素添加的标签是行内标签，要转为块标签 */
            display: block;
            clear: both;

            /* 解决兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
        <div class="top clearfix">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</body>
</html>

5.2.4 清除浮动的方法 — ④ 双伪元素清除法

➢ 操作：
双伪元素清除浮动
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 514px;
            /* 父级标签加上height可以规避左右两侧浮动的影响,但是有时候网页的高不能加 */
            /* height: 300px; */
            background-color: aquamarine;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .bottom {
            height: 50px;
            background-color: coral;
            
        }
        /* .clearfix::before 作用：解决外边距塌陷问题 
        外边距塌陷：父子级标签都是块级，子级加margin会影响父级的位置 */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        /* 真正清除浮动的标签 */
        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
        <div class="top clearfix">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</body>
</html>

5.2.5 清除浮动的方法 — ⑤ 给父元素设置 overflow : hidden

➢ 操作：
• 直接给父元素设置 overflow : hidden
➢ 特点：
• 优点：方便

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 514px;
            /* 父级标签加上height可以规避左右两侧浮动的影响,但是有时候网页的高不能加 */
            /* height: 300px; */
            background-color: aquamarine;
            margin: 0 auto;
            /* 清除浮动 */
            overflow: hidden;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .bottom {
            height: 50px;
            background-color: coral;
            
        }
    </style>
</head>
<body>
    <!-- 父级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</body>
</html>

以上五种方法清除了浮动后效果均如下图所示：
清除浮动的影响

5.3 BFC的介绍

➢ 块格式化上下文（Block Formatting Context）：BFC
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
➢ 创建BFC方法：
（1）html标签是BFC盒子
（2）浮动元素是BFC盒子
（3）行内块元素是BFC盒子
（4）overflow 属性取值不为 visible。如：auto、hidden…
（5）……
➢ BFC盒子常见特点：
（1）BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
（2）BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
（3）……

香蕉卟NaNa

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】(六)（结构伪类选择器、伪元素、标准流、浮动、清除浮动）

1、结构伪类选择器1.1 作用与优势：（1）作用：根据元素在HTML中的结构关系查找元素（2）优势：减少对于HTML中类的依赖，有利于保持代码整洁（3）场景：常用于查找某父级选择器中的子元素1.2 选择器选择器说明E:first-child{ }匹配父元素中第一个子元素，并且时E元素E:last-child{ }匹配父元素中最后一个子元素，并且时E元素E:nth-child(n){ }匹配父元素中第n个子元素，并且时E元素E:nth-last-chil
复制链接

扫一扫