07 CSS04

news2024/11/28 20:48:48

目标：

1、结构伪类选择器
2、伪元素
3、标准流
4、浮动
5、清除浮动
6、（拓展）BFC介绍

一、结构伪类选择器

1、作用与优势

· 作用：根据元素在HTML中的结构关系查找元素
· 优势：减少对于HTML中类的依赖，有利于保持代码整洁
· 场景：常用于查找某级选择器中的子元素
请添加图片描述
· n的注意点
（1）n为：0、1、2、3、…
（2）通过n可以组成常见公式
请添加图片描述
如：

li:first-child{background-color:blue}
li:nth-child(3){background-color:blue}

2、易错点

请添加图片描述
如上图，要求找到第一个a标签
正确写法：

li：first-child a{background-color:blue}

错误写法：

li a:first-child{background-color:blue}

此时会选中li中所有a标签

3、（拓展补充）nth-of-type

（1）选择器

请添加图片描述

（2）区别

· :nth-child —>直接在随意孩子中数个数
· :nth-of-type —>先通过该 类型 找到复合的一堆子元素，然后在这一堆子元素中数个数
请添加图片描述
注意小括号内的数字区别。

二、伪元素

1、伪元素

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

2、区别

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

3、种类

请添加图片描述

.father::before{
	/*必加的属性*/
	content:'我是一个伪元素';
}

4、注意点

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

三、标准流

1、标准流

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

2、常见标准流排版规则

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

四、浮动

1、浮动的作用
2、浮动的代码
3、浮动的特点
4、浮动的案例

1、浮动的作用

（1）早期的作用

图文环绕

（2）现在的作用

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

2、浮动的代码

（1）属性名

float

（2）属性值

请添加图片描述

float:left;

3、浮动的特点

（1）浮动元素会脱离标准流（脱标），在标准流中不占位置
（2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素
（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
（4） 浮动元素会受到上面元素边界的影响
（5）浮动元素有特殊的显示效果：①一行可以显示多个②可以设置宽高

注意点：浮动的元素不能通过text-align：center或者margin：0 auto，让浮动元素本身水平居中

4、浮动的案例

（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>
        .header {
            height: 100px;
            background-color: #333;
        }

        .nav {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin:0 auto;
        }

        .banner {
            width: 1226px;
            height: 460px;
            background-color: yellow;
            margin:0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="banner">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果显示：
请添加图片描述

（2）小米模块案例

<!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>
        /* 去除掉标签默认的margin和padding */
        * {
            margin:0;
            padding: 0;
        }

        .box {
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
            margin: 100px auto;
        }

        .left {
            float: left;
            width:234px;
            height:614px;
            background-color:#800080
         }
    
         .right {
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: yellow; */
         }

         .item {
            float: left;
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
            margin-right: 14px;
            margin-bottom: 14px;
         }

        /* 找到的是 第4个和第8个 4倍数 4n */
        .item:nth-child(4n) {
            margin-right: 0;
        }

        /* 找到从第5个开始往后的所有子元素 */
        .item:nth-child(n+5) {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <!-- 布局流程：从上往下，从外往内 -->
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    
</body>
</html>

效果显示：
请添加图片描述

（3）网页导航案例

书写网页导航步骤：
①清除默认的margin和padding
②找到ul，去除小圆点
③找到li标签，设置浮动让li一行中显示
④找到a标签，设置行高，a标签默认是行内元素，默认不能设置宽高，解决方法：
· 方法一：给a标签设置display：inline-block
· 方法二：给a标签设置display：block
· 方法三：给a设置float：left

		/* 1、去除默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }

        /* 2、找到ul，去除小圆点 */
        ul {
            list-style: none;
        }

        /* 3、 找到li标签，设置浮动*/
        ul li {
            float: left;
        }

        /* 4、找到a标签，设置宽高 */
        ul li a {
            /* a标签默认是行内元素，不能直接设置宽高 */

            /* 1、转换成行内块元素 */
            /* display: inline-block; */

            /* 2、转换成块级元素 */
            /* display: block; */
   
            /* 3、设置浮动 */
            float: left;
        }


<!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>
        /* 1、去除默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }

        /* 2、找到ul，去除小圆点 */
        ul {
            list-style: none;
        }

        /* 3、 找到li标签，设置浮动*/
        ul li {
            float: left;
        }

        /* 4、找到a标签，设置宽高 */
        ul li a {
            /* a标签默认是行内元素，不能直接设置宽高 */

            /* 1、转换成行内块元素 */
            /* display: inline-block; */

            /* 2、转换成块级元素 */
            /* display: block; */
   
            /* 3、设置浮动 */
            float: left;
            width: 80px;
            height: 50px;
            background-color: #ffc0cb;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 16px;
        }

        ul li a:hover {
            background-color: #008000;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">新闻1</a></li>
        <li><a href="#">新闻2</a></li>
        <li><a href="#">新闻3</a></li>
        <li><a href="#">新闻4</a></li>
        <li><a href="#">新闻5</a></li>
        <li><a href="#">新闻6</a></li>
        <li><a href="#">新闻7</a></li>
        <li><a href="#">新闻8</a></li>
    </ul>
</body>
</html>

显示效果：
请添加图片描述

五、清除浮动

1、介绍

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

2、方法

（1）直接设置父元素高度

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

（2）额外标签法

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

（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>
        .father {
            width: 400px;
            background-color: pink;
        }

        .son {
            float: left;
            width: 100px;
            height: 400px;
            background-color: blue;
        }

        .clearfix::after{
            content: '';
            display: block;
            clear: both;
            /* 补充代码：在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
</html>

· 特点
优点：项目中使用，直接给标签加类即可清除浮动

（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>
        .father {
            width: 400px;
            background-color: pink;
        }

        .son {
            float: left;
            width: 100px;
            height: 400px;
            background-color: blue;
        }
		
		.clearfix::before,
		.clearfix::after {
			content:'';
			/* table显示方式一定程度同block */
			display:table;
		}
		
        .clearfix::after{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
</html>

· 特点
优点：项目中使用，直接给标签加类即可清除浮动，也可用于解决margin的塌陷现象。

（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>
        .father {
            width: 400px;
            background-color: pink;
            /* 给父元素设置overflow：hidden */
            overflow:hidden;
        }

        .son {
            float: left;
            width: 100px;
            height: 400px;
            background-color: blue;
        }
		
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</html>

· 特点
优点：方便

六、（拓展）BFC介绍

1、块格式化上下文（Block Formatting Context）：BFC

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

2、创建BFC方法

· html标签是BFC盒子
· 浮动元素是BFC盒子
· 行内块元素是BFC盒子
· overflow属性取值不为visible，如：auto、hidden…

3、BFC盒子常见特点

· BFC盒子会默认包裹住内部子元素（标准流、浮动）-> 应用：清除浮动
· BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用：解决margin的塌陷

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/49382.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[附源码]计算机毕业设计springboot家庭整理服务管理系统

[附源码]计算机毕业设计springboot家庭整理服务管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
【MySQL】 MySQL亿级数据、主从架构，Sharding分片

【MySQL】 MySQL亿级数据、主从架构，Sharding分片

数据库Mysql 内容管理MySQL填充亿级数据Insert into select存储过程loop insertLoadfile 导入CVS文件MySQL基准测试&#xff1a; sysbench、mysqlslapsysbenchmysqlslapSQL优化分页查询优化慢SQL日志工具mysqldumpslowMySQL主从复制MySQL主从复制 knowledgeMySQL二进制日志log_…
阅读更多...
APS生产计划排产降低企业的生产运营成本

APS生产计划排产降低企业的生产运营成本

企业运营成本是企业管理的关键&#xff0c;也是企业加强管理&#xff0c;提高企业效益的重要途径&#xff0c;在多数企业的发展中&#xff0c;如何更有效地控制企业运营成本将显得极为突出和十分重要。 APS生产计划排产可以从“设备、物料、人力”三方面降低企业的运营成本&…
阅读更多...
基于Go语言的网盘开发（GloudDisk）

基于Go语言的网盘开发（GloudDisk）

&#xff08;记录一下自己做项目的过程&#xff09; 基于go-zero实现的简易的网盘系统&#xff0c;如果有小伙伴对这个项目感兴趣&#xff0c;可以去网上搜索一些资料。这里推荐一下我学习的来源&#xff1a;【项目实战】基于Go-zero、Xorm的网盘系统_哔哩哔哩_bilibili 确定…
阅读更多...
AutoCAD Electrical 2022—项目中新建、添加、删除图纸

AutoCAD Electrical 2022—项目中新建、添加、删除图纸

右键点击项目—选择新建图纸&#xff1b; 点击快捷图标&#xff0c;新建图形&#xff1b; 弹出对话框&#xff0c;在名称中输入图纸名称&#xff1b; 模板为图框的样式&#xff0c;位置代号&#xff0c;图纸保存的位置&#xff1b; 其他根据需要填写&#xff1b; 填写完点击…
阅读更多...
JavaScript -- 02. 变量和数据类型

JavaScript -- 02. 变量和数据类型

文章目录变量和数据类型1 数值(Number)1.1 普通数值1.2 其他进制的数字2 大整数&#xff08;BigInt&#xff09;3 字符串(String)3.1 基础表示3.2 转义字符3.3 模板字符串4 布尔值(Boolean)5 空值(Null)6 未定义&#xff08;Undefined&#xff09;7 符号&#xff08;Symbol&…
阅读更多...
6-2 装载问题（分支限界）

6-2 装载问题（分支限界）

6-2 装载问题&#xff08;分支限界&#xff09; 一、问题描述 有一批共个集装箱要装上2艘载重量分别为C1和C2的轮船&#xff0c;其中集装箱i的重量为Wi&#xff0c;且 采用下面的策略可得到最优装载方案&#xff1a; (1)将第一艘轮船尽可能装满; (2)将剩余集装箱装上第二艘轮…
阅读更多...
基于rsync daemon 实现 sersync——sersync实现实时数据同步

基于rsync daemon 实现 sersync——sersync实现实时数据同步

1 sersync 介绍 sersync类似于inotify&#xff0c;同样用于监控&#xff0c;但它克服了inotify的缺点. inotify最大的不足是会产生重复事件&#xff0c;或者同一个目录下多个文件的操作会产生多个事件&#xff0c;例如&#xff0c;当监控目录中有5个文件时&#xff0c;删除目录…
阅读更多...
[附源码]计算机毕业设计springboot考试系统

[附源码]计算机毕业设计springboot考试系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
学习C语言的优质网站

学习C语言的优质网站

1. 初衷 C语言是最原始的操作操作数据结构和算法的一门编程语言&#xff0c;没有高级语言的封装&#xff0c;最能锻炼个人的算法思维和能力。 2. 编程网站推荐 2.1 javatpoint https://www.javatpoint.com/static-in-c 2.2 includehelp https://www.includehelp.com/c/ 2.…
阅读更多...
Hadoop学习笔记——HDFS

Hadoop学习笔记——HDFS

文章目录一、HDFS概述1.1、HDFS产出背景及定义1.1.1 HDFS产生背景1.1.2 HDFS定义1.2、HDFS优缺点1.2.1、HDFS优点1.2.2、HDFS缺点1.3、HDFS组成架构1.4、HDFS文件块大小1.5、限制二、HDFS的Shell操作2.1、基本语法2.2、命令大全2.3、常用命令实操2.3.1 准备工作2.3.2 上传一、H…
阅读更多...
快速复现 实现 facenet-retinaface-pytorch 人脸识别 windows上 使用cpu实现

快速复现 实现 facenet-retinaface-pytorch 人脸识别 windows上 使用cpu实现

目录0 前言1 搭建环境与项目2 人脸预测与结果展示0 前言 这一次要复现的是人脸识别中的 facenet-retinaface-pytorch 是在上一次博客的内容上更进一步 快速复现 实现 facenet-pytorch 人脸识别 windows上 使用cpu实现 人脸对比 参考了&#xff1a; Pytorch 利用Facenet和Reti…
阅读更多...
10 Deployment:让应用永不宕机

10 Deployment:让应用永不宕机

文章目录1. 前言2. 为什么要有deployment 对象&#xff1f;3. 如何使用 YAML 描述 Deployment?3.1 查看 Deployment 的基本信息3.2 命令式创建Deployment 的YAML模板3.2.1 Deployment 的关键字段3.2.1.1 replicas 副本字段3.2.1.2 selector 标签筛选字段3.2.1.3 为什么在 YAML…
阅读更多...
JAVA学习-java基础讲义02

JAVA学习-java基础讲义02

java基础讲义02一 进制1.1 进制介绍1.2 二进制1.3 任意进制到十进制转换1.4 十进制到任意进制之间的转换1.5 快速转换法1.6 有符号数据表示法二 Java变量和数据类型1.1 变量概述1.2 数据类型1.3 变量定义三 Java数据类型转换3.1 数据类型转换概述3.2 数据类型转换之自动类型转换…
阅读更多...
使用自己的数据集测试Unbiased Mean Teacher for Cross-domain Object Detection

使用自己的数据集测试Unbiased Mean Teacher for Cross-domain Object Detection

要复现Unbiased Mean Teacher for Cross-domain Object Detection&#xff08;UMT&#xff09;&#xff0c;首先要正确运行CycleGAN。 1. CycleGAN CycleGAN的github链接&#xff1a;https://github.com/junyanz/pytorch-CycleGAN-and-pix2pix 1.1 CycleGAN环境配置 git cl…
阅读更多...
低代码助力生产管理：车间管理系统

低代码助力生产管理：车间管理系统

在当前制造业全球化、网络化、敏捷化的背景下&#xff0c;制造业信息化是目前生产的主要趋势。其中车间是制造企业的核心单元&#xff0c;是企业生产计划的具体实施环节&#xff0c;同时负责反馈实时生产信息。因此车间层的信息资源集成和生产管理控制是整个企业生产供应链控制…
阅读更多...
[Power Query] 快速计算列

[Power Query] 快速计算列

对两列或者多列的计算&#xff0c;在Power Query中除了通过自定义列来实现以外&#xff0c;我们也可以通过利用功能区的【添加列】|【标准】运算功能进行列的计算 数据源 将数据源导入到Power BI Desktop&#xff0c;单击【转换数据】选项&#xff0c;进入Power Query查询编辑…
阅读更多...
python对异常的处理

python对异常的处理

了解异常当检测到一个错误时&#xff0c;解释器就无法继续执行了&#xff0c;反而出现一些错误的提示&#xff0c;这就是异常。测试&#xff1a;f open(test.txt,r) #以读模式打开文件&#xff0c;文件不存在则报错 运行了解释器报错避免出现异常提示的写法 #需求&#xff1a;…
阅读更多...
串口通信及串口转蓝牙相关知识

串口通信及串口转蓝牙相关知识

之前没有接触过硬件相关的工作&#xff0c; 因此对硬件的知识一知半解。 最近由于项目需要&#xff0c; 用到了串口通信以及串口跟蓝牙之间通信相关的东西。记录下来&#xff0c; 希望对新手有所帮助。 如有疏漏之处&#xff0c; 欢迎指正。 1 串口通信 https://www.jishulin…
阅读更多...
docker-compose安装部署gitlab中文版

docker-compose安装部署gitlab中文版

文章目录前言一、环境信息二、准备部署1.准备路径2.安装docker-compse&#xff0c;下载镜像3.引入库2.执行部署三、登陆页面前言 记录一下使用docker-compose部署gitlab平台的过程 一、环境信息 操作系统版本&#xff1a;CentOS Linux release 7.9.2009 (Core) gitlab镜像版本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023