文章目录

  • 一 结构伪类选择器
    • 1.1 作用与优势：
    • 1.2 选择器
    • 1.3 n的注意点
  • 二 伪元素
    • 2.1 区别：
    • 2.2 种类：
    • 2.3 注意点：
  • 三 标准流
  • 四 浮动
    • 4.1 浮动的产生
    • 4.2 浮动的作用
    • 4.3 浮动的代码
    • 4.4 浮动的特点
    • 4.5 （案例）网页布局案例
    • 4.6 （案例）小米模块案例
    • 4.7 （案例）网页导航案例
  • 五 清除浮动
    • 5.1 清除浮动的介绍
    • 5.2 清除浮动的方法 — ① 直接设置父元素高度
    • 5.2 清除浮动的方法 — ② 额外标签法
    • 5.3 清除浮动的方法 — ③ 单伪元素清除法
    • 5.4 清除浮动的方法 — ④ 双伪元素清除法
    • 5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

一 结构伪类选择器

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 {list-style: none;text-align: center;}li:nth-child(2){background-color: blue;}</style>
</head>
<body><li>这是第1个选择器</li><li>这是第2个选择器</li><li>这是第3个选择器</li><li>这是第4个选择器</li><li>这是第5个选择器</li><li>这是第6个选择器</li><li>这是第7个选择器</li><li>这是第8个选择器</li><li>这是第9个选择器</li><li>这是第10个选择器</li>
</body>
</html>

1.3 n的注意点

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

功能 公式
偶数 2n、even
奇数 2n+1、2n-1、odd
找到前5个 -n+5
找到从第5个往后 n+5 
    <style>li {list-style: none;text-align: center;}li:nth-child(2n+1){background-color: blue;}</style>
</head>
<body><li>这是第1个选择器</li><li>这是第2个选择器</li><li>这是第3个选择器</li><li>这是第4个选择器</li><li>这是第5个选择器</li><li>这是第6个选择器</li><li>这是第7个选择器</li><li>这是第8个选择器</li><li>这是第9个选择器</li><li>这是第10个选择器</li>
</body>

二 伪元素

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

2.1 区别：

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

2.2 种类：

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

2.3 注意点：

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

    <style>.father{width: 300px;height: 300px;background-color: blue;}.father::before{/* content属性必须添加，否则伪元素不生效 */content: '老鼠';color: chartreuse;width: 100px;height: 100px;background-color: pink;display: block;}.father::after{content: '大米'}</style>
</head>
<body><!-- 伪元素 通过css创建标签，装饰性的不重要的小图 --><!-- 找父级，在这个父级创建子级标签 --><div class="father">爱</div>
</body>


三 标准流

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

四 浮动

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>div{/* 浏览器在解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离 */display: inline-block;width: 100px;height: 100px;}.one{background-color: yellow;}.two{background-color: blue;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div>
</body>
</html>

4.2 浮动的作用

4.3 浮动的代码

属性名：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;}p{text-indent: 2em;}.one{width: 100px;height: 100px;background-color:pink;float:left ;}.two{width: 100px;height: 100px;background-color: blue;float: left;}</style>
</head>
<body><img src="../imges/01.jpeg alt=""><p>被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库被女友擦粉你比较恐怖看几率NBC看见了现在那你就自行车v部门，撒谎钢板厚度就发噶闪电结婚那会备份的数据库</p><div class="one">one</div><div class="two">two</div>
</body>
</html>

4.4 浮动的特点

  1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
    • 相当于从地面飘到了空中
  2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素有特殊的显示效果
    • 一行可以显示多个
    • 可以设置宽高
    ➢ 注意点：
    • 浮动的元素不能通过text-align:center或者margin:0 auto
<!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: 100px;height: 100px;background-color: pink;float: left;margin-top: 50px;}.two {width: 200px;height: 200px;background-color: skyblue;float: left;/* 因为有浮动, 不能生效 - 盒子无法水平居中 */margin: 0 auto;}.three {width: 300px;height: 300px;background-color: orange;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="three">three</div>
</body>
</html>

4.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>* {margin: 0;padding: 0;}.top {/* 宽度高度背景色 */height: 40px;background-color: #333;}.header {width: 1226px;height: 100px;background-color: #ffc0cb;margin: 0 auto;}.content {width: 1226px;height: 460px;background-color: green;margin: 0 auto;}.left {float: left;width: 234px;height: 460px;background-color: #ffa500;}.right {float: left;width: 992px;height: 460px;background-color: #87ceeb;}/* CSS书写顺序: 浏览器执行效率更高1. 浮动 / display2. 盒子模型: margin border padding 宽度高度背景色3. 文字样式*/</style>
</head>
<body><!-- 通栏的盒子: 宽度和浏览器宽度一样大 --><div class="top"></div><div class="header">头部</div><div class="content"><div class="left">left</div><div class="right">right</div></div>
</body>
</html>

4.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>*{margin: 0;padding: 0;}.box{margin: 0 auto;width: 1292px;height: 614px;}.left{float: left;width: 300px;height: 614px;background-color: #800080;}.right{float: right;width: 978px;height: 614px;}/* 去掉列表的符号 */ul{list-style: none;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: #87ceeb;}/* 如果父级的宽度不够, 子级会自动换行 *//* 第四个li和第八个li右侧间距清除 */.right li:nth-child(4n) {margin-right: 0;}</style>
</head>
<body><div class="box"><div class="left"><img src="../imges/03.jpeg" alt=""></div><div class="right"><ul><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li><li><img src="../imges/02.jpeg" alt=""></li></ul></div></div>
</body>
</html>

4.7 （案例）网页导航案例

书写网页导航步骤：
➢ 1. 清除默认的margin和padding
➢ 2. 找到ul，去除小圆点
➢ 3. 找到li标签，设置浮动让li一行中显示
➢ 4. 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
• 方法一：给a标签设置 display : inline-block
• 方法二：给a标签设置 display : block
• 方法三：给a设置 float : lef

<!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: 0;padding: 0;}.nav {margin: 50px auto;width: 640px;height: 50px;background-color: #ffc0cb;}ul {list-style: none;}.nav li {float: left;}.nav li a {/* 1. 浮动 / display *//* display: inline-block; */display: block;/* 2. 盒子模型 */width: 80px;height: 50px;/* background-color: green; *//* 3. 文字样式 */text-align: center;line-height: 50px;color: #fff;text-decoration: none;}.nav li a:hover {background-color: green;}</style>
</head>
<body><!-- 导航 --><div class="nav"><ul><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li><li><a href="#">新闻</a></li></ul></div>
</body>
</html>

五 清除浮动

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 {margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom {height: 100px;background-color: green;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;}</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. 在父元素内容的最后添加一个块级元素
  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 {margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom {height: 100px;background-color: green;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;}.clearfix {/* 清除左右两侧浮动的影响 */clear: both;}</style>
</head>
<body><!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --><div class="top"><div class="left"></div><div class="right"></div><div class="clearfix"></div></div><div class="bottom"></div>
</body>
</html>

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

➢ 操作：用伪元素替代了额外标签
① ：基本写法

        .clearfix::after {content: '';/* 伪元素添加的标签是行内, 要求块 */display: block;clear: both;

② ：补充写法(为了兼容性)

        .clearfix::after {content: '';/* 伪元素添加的标签是行内, 要求块 */display: block;clear: both;/* 为了兼容性 */height: 0;visibility: hidden;height: 0;visibility: 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 {margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom {height: 100px;background-color: green;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;}/* 单伪元素清除浮动 和 额外标签法原理是一样的 */.clearfix::after {content: '';/* 伪元素添加的标签是行内, 要求块 */display: block;clear: both;/* 为了兼容性 */height: 0;visibility: hidden;}</style>
</head>
<body><!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --><div class="top clearfix"><div class="left"></div><div class="right"></div><!-- 通过css 添加标签 --></div><div class="bottom"></div>
</body>
</html>

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

➢ 操作：

        .clearfix::before,.clearfix::after {content: '';display: table;}/* 真正清除浮动的标签 */.clearfix::after {/* content: '';display: table; */clear: both;}

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

<!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 {margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;}.bottom {height: 100px;background-color: green;}.left {float: left;width: 200px;height: 300px;background-color: #ccc;}.right {float: right;width: 790px;height: 300px;background-color: skyblue;}/*  .clearfix::before 作用: 解决外边距塌陷问题外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置*//* 清除浮动 */.clearfix::before,.clearfix::after {content: '';display: table;}/* 真正清除浮动的标签 */.clearfix::after {/* content: '';display: table; */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 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

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

        .top {margin: 0 auto;width: 1000px;/* height: 300px; */background-color: pink;overflow: hidden;}

CSS学习（05结构伪类选择器 浮动及清除）相关推荐

  1. CSS学习05之结构伪类选择器

    回顾 基本选择器又分为三种方式: 后代选择器 子选择器 相邻选择器 通用选择器 结构伪类选择器 结构伪类选择器有很多种伪类,这里我们列举常用的几种方式: first-child 伪类 hover悬停伪 ...

  2. web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡

    https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

  3. CSS基础(part20)--CSS3结构伪类选择器

    学习笔记,仅供参考,有错必究 参考自:pink老师教案 结构伪类选择器 属性列表: nth-child(n) 参数详解: 注意:本质上就是选中第几个子元素 n可以是数字.关键字.公式 n如果是数字,就 ...

  4. CSS结构伪类选择器

    结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-chi ...

  5. css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）

    css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...

  6. Css 结构伪类选择器

    目录 Css 结构伪类选择器 结构伪类-公式 Css 结构伪类选择器 在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...

  7. CSS基本选择器、层次选择器、结构伪类选择器、属性选择器

    目录 基本选择器 1.标签选择器 2.类选择器 3.ID选择器 层次选择器 结构伪类选择器 属性选择器 基本选择器 1.标签选择器 2.类选择器 3.ID选择器 层次选择器 选择器 类   型 功能描 ...

  8. CSS新增的属性、结构伪类选择器，帮你快速找到那个对的人

    文章目录 前言 一.属性选择器 二.结构伪类选择器 总结 前言 今天学会了这几个新的选择器会为我们节省很多代码,简化HTML结构,对于起名困难户也会有很大的帮助. 提示:以下是本篇文章正文内容,下面案 ...

  9. CSS3新特性(属性选择器 、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）

    这里写目录标题 一.CSS3 属性选择器 二.CSS3 结构伪类选择器 三. CSS3 伪元素选择器 四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...

最新文章

  1. AI在农业领域的应用落地！
  2. RabbitMQ（三）发布确认
  3. 快速下载助手1.1--添加断点下载
  4. 使用Go语言创建静态文件服务器
  5. Concepts in Games Development（游戏开发概述） 公开课笔记
  6. java client和servers_“java -server”和“java -client”之间的真正区别？
  7. docker运行dubbo-admin
  8. 第三方服务-极光推送
  9. FFMpeg写MP4文件例子分析
  10. 一篇关于Content Type的文章
  11. 集成计划排程计划以及管控体系的几个特征
  12. Deepracer 学了就能云驾驭赛车？ Deepracer机器学习入门级干货分享！
  13. SQL 建表与查询
  14. Amine-PEG-Pyrene，芘丁酸聚乙二醇氨基，Pyrene-PEG-NH2
  15. Windows设置固定IP
  16. 2020清北学堂NOIP刷题营day3Bdierti洛谷P4310绝世好题
  17. c语言临时内存变量释放,C语言中的内存分配与释放
  18. Windows自带性能监控工具Perfmon使用介绍
  19. 【JavaWeb】实现网页验证码
  20. 实例：泰坦尼克号幸存者的预测

热门文章

  1. word办公软件小技能汇总（一）——绘制斜线表头和重复标题行的设置
  2. PTA 7-9 买复印纸
  3. Authing 2.0 发布：聊聊 IDaaS 的未来
  4. PHP批量删除报错,批量删除的PHP
  5. linux 提取cpio_Linux基础命令---cpio
  6. 面试必问之-SQL调优
  7. 如何做手机录屏直播？
  8. 王者英雄胜率用计算机怎么算,王者荣耀英雄胜率怎么算
  9. 给大家推荐一些精品内容
  10. python __all__用法