【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

CSS的浮动

目录

  • CSS的浮动
    • 一、学习目标
    • 二、文章内容
      • 2.1 结构伪类选择器
      • 2.2 伪元素
      • 2.3 标准流
      • 2.4 浮动
      • 2.5 清除浮动
      • 2.6 拓展(BFC)
    • 三、综合案例
      • 3.1 小米模块案例
      • 3.2 网页导航案例

一、学习目标

  1. 能够使用结构伪类选择器在HTML中选元素
  2. 能够说出标准流元素的布局特点
  3. 能够说出浮动元素的特点
  4. 能够使用浮动完成小米模块布布局案例
  5. 能够说出清除浮动的目的,并能够使用清除浮动的方法

二、文章内容

2.1 结构伪类选择器

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

  1. 作用与优势:
    • 作用:根据元素在HTML中的结构关系查找元素
    • 优势:减少对于HTML中类的依赖,有利于保持代码整洁
    • 场景:常用于查找某父级选择器中的子元素
  2. 选择器:
    在这里插入图片描述
    n的注意点:
    • n为0、1、2、3、4、5、6、……
    • 通过n可以组成常见公式(如果是n公式,则n从0开始计算)
      在这里插入图片描述
  3. 结构伪类选择器易错点
    问题:在下列案例中,如果需要找到第一个a标签,如何去查找?
    在这里插入图片描述
    ul>li*8>a{我是第$个a标签} 中,如果需要找到第一个a标签,结构伪类选择器注意不要写错
    错误: ul li a:first-child { css } 这样的写法会把所有的a标签都选择中
    正确:ul li:first-child a { css } 这样只会选中第一个a标签

在这里插入图片描述
E:nth-child(n) { css } 的注意事项

<!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>/* 需求:使用 nth-child() 给第一个 span 标签添加样式 *//* div span:nth-child(1) {这个是选不到第一个 span 标签的color: pink;} */div span:nth-child(2) {color: red;}/* 总结:nth-child(n) 选择的是父元素里面的第 n 个孩子,它不管里面的孩子是否是同一种类型 */</style>
</head>
<body><div><p>段落标签</p><span>span标签1</span><span>span标签2</span><span>span标签3</span></div>
</body>
</html>

上面的问题可以使用 E:first-of-type { css } E:last-of-type { css }
E:nth-of-type(n) { css } E:nth-last-of-type(n) { css }来解决

  • 结构伪类选择器就是选择第n个元素
  • nth-child 是从所有子级开始算的,可能是不同类型
  • nth-of-type 是指同一种类型的子级,比如 ul li:nth-of-type(2) 就是选择第二个li
  • 关于 nth-child(n) 我们要知道 n 是从0开始算的,要记住常用的公式
  • 如果是无序列表,我们肯定使用nth-child更多

2.2 伪元素

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

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

  • 区别

    1. 元素:HTML设置的标签
    2. 伪元素:由CSS模拟出来的标签效果
  • 种类
    在这里插入图片描述
    在这里插入图片描述

  • 注意点

    1. 有一个必加的属性 content: ‘伪元素的内容’;
    2. before在内容的前面,after在内容的后面
    3. before和after创建一个元素,但是属于行内元素
    4. 因为在DOM里面看不见刚才创建的元素,所以我们称为伪元素
    5. 伪元素标签选择器一样,权重为1

2.3 标准流

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

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

2.4 浮动

目标:能够认识使用浮动的作用,了解浮动的特点

  1. 浮动的作用
    • 早期的作用:图文环绕
      在这里插入图片描述
    • 现在的作用:网页布局
      场景:让垂直布局的盒子变成水平布局,如:一个在左,一个在右
      在这里插入图片描述
  2. 浮动的代码
    • 属性名:float
    • 属性值:
      在这里插入图片描述
  3. 浮动的特点
    • 浮动的元素会脱离标准流(简称:脱标),相当于漂浮到了空中,在标准流中不占位置
    • 浮动的元素层级比标准流高出了半个级别,可以覆盖标准流中的元素
    • 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
    • 浮动会受到上面元素边界的影响
    • 浮动元素有特殊的显示效果:①一行可以显示多个 ②可以以设置宽高
    • 浮动的元素不能通过text-align:center或者margin:0 auto,让浮动元素本身水平居中
  4. 浮动的案例
    • (案列)网页布局案例
      需求:使用浮动,完成设计图中布局效果
      在这里插入图片描述
    • (案例)小米模块案例
      需求:使用浮动,完成设计图中布局效果
      在这里插入图片描述
    • (案例)网页导航案例
      需求:使用浮动,完成设计图中布局效果
      在这里插入图片描述
  5. 书写网页导航步骤:
    (1) 清除默认的margin和padding
    (2) 找到ul,去除小圆点
    (3) 找到li标签,设置浮动让li一行中显示
    (4) 找到a标签,设置宽高 → a标签默认是行内元素,默认不能设置宽高??
    • 方法一:给a标签设置 display : inline-block
    • 方法二:给a标签设置 display : block
    • 方法三:给a设置 float : left

2.5 清除浮动

目标:能够认识清除浮动的目的,并且能够使用清除浮动的方法

  1. 清除浮动的介绍

    • 含义:清除浮动带来的影响
      • 影响:如果子元素浮动,此时子元素不能撑开标准流的块级父元素
    • 原因:子元素浮动后脱标 → 不占位置
    • 目的:需要父元素有高度,从而不影响其他网页元素的布局
  2. 清除浮动的方法
    清除浮动的方法 — ① 直接设置父元素高度

    • 优点:简单粗暴,方便
    • 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块
      在这里插入图片描述

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

    • 操作:
      • 在父元素的最后添加一个块级元素
      • 需要给添加的块级元素设置清除浮动的核心代码:clear: both;
      • 缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂

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

    • 操作:用伪元素替代了额外标签
      /* ① :基本写法 */
      .clearfix::after {content: "";display: block;clear: both;
      }
      /* ② :补充写法 */
      .clearfix::after {content: "";display: block;clear: both;/* 补充代码:在网页中看不到伪元素 */height: 0;visibility: hidden;
      }
      
    • 优点:项目中使用,直接给标签加类即可清除浮动

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

    • 作用:①清除浮动 ②解决外边距折叠的塌陷现象

    • 操作:

      .clearfix::before,
      .clearfix::after {content: "";display: table;
      }
      .clearfix::after {clear: both;
      }
      
    • 优点:项目中使用,直接给标签加类即可清除浮动

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

    • 操作:直接给父元素设置一个overflow: hidden;
    • 优点:方便

2.6 拓展(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. ……

三、综合案例

3.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>/* 去除掉标签默认的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) {/* background-color: red; */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.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>/* 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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器管理平台(5)- 数据展示

数据展示 Grafana导入MySQL数据源进行定制化数据展示&#xff0c;包括品牌分类饼图&#xff0c;详细数据列表等LayUI为开源前端框架&#xff0c;对系统概览、登录日志等信息&#xff0c;划分不同页面使用表格展示详细数据 1、Grafana 对品牌、CPU型号、内存等数据使用饼图展示…

探索全球DNS体系 | 从根服务器到本地解析

DNS 发展 DNS&#xff08;Domain Name System&#xff09;的起源可以追溯到互联网早期。 早期的挑战&#xff1a; 早期互联网主要通过IP地址进行通信&#xff0c;用户需要记住复杂的数字串来访问网站。 需求的催生&#xff1a; 随着互联网的扩大&#xff0c;更简单、易记的…

【剑指offer】重建二叉树

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述1、题目2、示例 二、题目分析1、递归2、栈 一、题目描述 1、题目 剑指offer&#xff1a;重建二叉树 给定节…

在CentOS 7中配置 RAID服务

实验过程 Xnode1克隆虚拟机raid ps&#xff1a; 阿里云盘Xnode1获取 xnode1 https://www.alipan.com/s/HgLXfoeBWG2 提取码: eb70 编辑虚拟机 添加2硬盘 CRT连接&#xff08;root密码&#xff1a;000000&#xff09; 创建raid 0 [rootdemo ~]# lsblk 安装mdadm [rootdemo…

go语言(十四)----反射

变量的结构 2 举个例子 package mainimport "fmt"type Reader interface {ReadBook() }type Writer interface {WriteBook() }//具体类型 type Book struct {}func (this *Book) ReadBook() {fmt.Println("Read a Book")}func (this *Book) WriteBook() {…

项目工时统计成本核算管理

技术架构: Java 1.8 MySQL 8 Vue 项目基于前后端分离架构&#xff0c;服务端主要技术&#xff1a;SpringBoot 前端主要是Vue。 项目介绍&#xff1a; 轻量级项目工时统计系统&#xff0c;是目前企业进行项工时管理统计的推荐选择。 通过项目工时管理系统&#xff0c;可通过…

Github2024-01-23 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-01-23统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目3Go项目2TypeScript项目2Dart项目1Jupyter Notebook项目1 gpt4free 语言模型集合改进计划 创建周期…

vConsole 与 Vue中未定义变量而引发的Maximum call stack size exceeded异常问题

一、问题描述 前段时间有个前端小伙伴反馈在打包发布正式环境后调用VantUI的<van-popup>组件显示时&#xff0c;显示空白&#xff0c;并且在控制台看到一个Maximum call stacksize exceeded&#xff08;超出最大调用堆栈大小&#xff09;,而本地开发环境正常&#xff1a…

工业相机+镜头选型及靶面、焦距计算等相关详解

工业相机镜头选型及靶面、焦距计算等相关详解 着重讲述相机的各个参数及使用意义总结相机镜头选型主要参数的推理计算 0. 工业相机相关概念简介 相机与镜头一览 工业相机与镜头实物图如下图所示&#xff1a; 常见的相机有两种供电方式&#xff1a;一种是电源线供电&#xff0…

接口自动化测试框架开发(pytest+allure+aiohttp+ 用例自动生成)

近期准备优先做接口测试的覆盖&#xff0c;为此需要开发一个测试框架&#xff0c;经过思考&#xff0c;这次依然想做点儿不一样的东西。 接口测试是比较讲究效率的&#xff0c;测试人员会希望很快能得到结果反馈&#xff0c;然而接口的数量一般都很多&#xff0c;而且会越来越…

设置Linux用户的最大进程数和最大打开文件描述符数

【命令】 cat <<EOF>> /etc/security/limits.conf root - nproc 512000 * - nproc 512000 root - nofile 512000 * - nofile 512000 EOF 【解读】 这个命令是在执行一个Shell脚本&#xff0c;通过sh -c来传递一个字符串作为命令参数。这个字符串包含了对/e…

如何制作自己的实景中国视频地图?

让每一个人都有自己的地图&#xff01; 我们在《水经微图Web版1.5.0发布》一文中&#xff0c;提到了水经微图&#xff08;简称“微图”&#xff09;Web版新增了视频气泡的功能。 现在&#xff0c;我们为你分享一下如何基于此功能&#xff0c;制作一个属于自己的实景中国视频地…

PG14.2异构迁移_数据目录拷贝方式

本文源库和目标库都是采用二进制tar包进行的安装&#xff0c;非rpm和源码编译方式安装。 采用的办法是编译安装数据库软件 拷贝数据目录的方式 迁移要求 由于Centos即将停止维护&#xff0c;客户强烈要求操作系统更改成Ubuntu18.04&#xff0c;需将Centos的PG14迁移至Ubuntu…

leetcode2171 拿出最少数目的魔法豆

题目 给定一个 正整数 数组 beans &#xff0c;其中每个整数表示一个袋子里装的魔法豆的数目。 请你从每个袋子中 拿出 一些豆子&#xff08;也可以 不拿出&#xff09;&#xff0c;使得剩下的 非空 袋子中&#xff08;即 至少还有一颗 魔法豆的袋子&#xff09;魔法豆的数目…

yolov5 opencv dnn部署 github代码

yolov5 opencv dnn部署 github代码 源码地址实现推理源码中作者的yolov5s.onnx推理条件python部署(因为python比较简单就直接介绍了)c部署 参考链接 源码地址 yolov5官网还提供的dnn、tensorrt推理链接本人使用的opencv c github代码,代码作者非本人&#xff0c;也是上面作者推…

防御第一次作业-ensp的华为防火墙USG6000V1(1)

目录 1.用ensp搭建防火墙 2.添加管理员 3.组网 接口 安全区域 1.用ensp搭建防火墙 1.只能用6000那个防火墙 2.初始用户名密码&#xff1a;admin/ADMIN123 3.开启所有服务 4.与电脑联通&#xff1a;添加个云&#xff0c;然后增加1个udp并绑定创建的环回网卡 4.5.让云可…

数据结构与算法教程,数据结构C语言版教程!(第五部分、数组和广义表详解)五

第五部分、数组和广义表详解 数组和广义表&#xff0c;都用于存储逻辑关系为“一对一”的数据。 数组存储结构&#xff0c;99% 的编程语言都包含的存储结构&#xff0c;用于存储不可再分的单一数据&#xff1b;而广义表不同&#xff0c;它还可以存储子广义表。 本章重点从矩阵…

代码随想录算法训练DAY27|回溯3

算法训练DAY27|回溯3 39. 组合总和 力扣题目链接 给定一个无重复元素的数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字可以无限制重复被选取。 说明&#xff1a; 所有数字&#xff08;包括 …

二、arcgis 点shp数据处理

在工作中&#xff0c;很多时候客户会提供点坐标&#xff0c;那么要想把点坐标生成shp文件&#xff0c;有两种方法&#xff08;坐标系CGCS2000&#xff09;&#xff1a; 1.当只有个位数的点坐标时&#xff0c;可以直接在arcgisMap中添加&#xff0c;具体步骤如下&#xff1a; …

【人工智能大脑】仿生学与人工智能交汇:基于MP神经网络的精准农业实践

MP神经网络&#xff0c;即McCulloch-Pitts模型&#xff08;MCP Model&#xff09;&#xff0c;是神经网络的早期形式之一&#xff0c;由Warren McCulloch和Walter Pitts在1943年提出。这个模型为现代人工神经网络的发展奠定了理论基础&#xff0c;并首次尝试模拟了生物神经元的…