文章目录
一 结构伪类选择器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 选择器
<!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可以组成常见公式
<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 种类:
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
➢ 属性值:
<!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 浮动的特点
浮动元素会脱离标准流(简称:脱标),在标准流中不占位置• 相当于从地面飘到了空中浮动元素比标准流高半个级别,可以覆盖标准流中的元素浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
➢ 注意点:
• 浮动的元素不能通过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 清除浮动的方法 — ② 额外标签法
➢ 操作:
在父元素内容的最后添加一个块级元素给添加的块级元素设置 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;}