学习内容参考:CSS浮动-01-结构伪类-基本用法_哔哩哔哩_bilibili
预计学习:p112---p128(css浮动),实际学习:p112---
p112-113:结构伪类
一、基本用法
<!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: green; } /* 找最后一个 */ li:last-child{ background-color: pink; } /* 选中间的任一个 */ li:nth-child(3){ background-color: red; } /* 倒数任一个 */ li:nth-last-child(3){ background-color: orange; } </style> </head> <body> <!-- ul>li{}*8 --> <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>
二、公式
p114:伪元素
<!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: 300px; height: 300px; background-color: pink; } .father::before{ /* content属性必须加,否则伪元素不生效 */ content: '老鼠'; color:aqua; background-color: blue; /* 要转化才能生效 */ width: 100px; height: 32px; display: inline-block; } .father::after{ content: '大米'; } </style> </head> <body> <!-- 伪元素 通过css创建标签,装饰性的不重要的小图 --> <!-- 找父级,在这个父级里创建子级标签 --> <div class="father">love</div> </body> </html>
p115:标准流
概念:即文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该用什么方式来摆列元素。
比如块元素从上往下,崔驰布局,独占一行;行内元素 或 行内块元素从左往右,水平布局,自动折行。
p116-128:浮动
早期:文字环绕;现在:网页布局
<!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{ /* 浏览器解析行内块 或 行内标签会产生一个空格的距离 */ width: 100px; height: 100px; display: inline-block; } .one{ background-color: pink; } .two{ background-color: skyblue; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </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> /* img{ width: 50px; float: left; } */ div{ width: 100px; height: 100px; } .one{ float: left; background-color: blue; } .two{ /* float: right; */ float: left; background-color: skyblue; } </style> </head> <body> <!-- 1. 图文环绕 --> <!-- <img src="./icon_1.jpg" alt=""> --> <!-- 嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷嗷 --> <!-- 2. 网页布局:块在一行排列 --> <div class="one">one</div> <div class="two">two</div> </body> </html>
二、特点
1.脱离标准流控制,在标准流中不占位置
2.比标准流高半个级别,可以覆盖标准流中的元素
3.浮动找浮动,下一个浮动会在上一个的左右浮动
4.特殊显示效果(具有行内块的特点):a.一行显示多个。b.可以设置宽高
三、案例
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{ height: 40px; background-color: rgb(0,0,0); } .header{ width: 1226px; height: 100px; background-color: #ffc0cb; margin: 0 auto; } .content{ width: 1226px; height: 460px; margin: 0 auto; } .left{ width: 234px; height: 460px; background-color: #ffa500; float: left; } .right{ width: 992px; height: 460px; background-color: #87ceeb; float: left; } </style> </head> <body> <div class="top"></div> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
!书写顺序:定位>浮动/display>盒子模型(border,margin,padding)>文字样式
2.li
<!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{ width: 1225px; height: 614px; margin: 0 auto; } .left{ width: 234px; height: 614px; float: left; background-color: #800080; } .right{ width: 978px; height: 614px; float: right; } ul{ list-style: none; } .right li{ width: 234px; height: 300px; float: left; margin-right: 14px; margin-bottom: 14px; background-color: #87ceeb; } .right li:nth-child(4n){ margin-right: 0; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </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> *{ padding: 0; margin: 0; } .nav{ width: 640px; height: 50px; background-color: olive; margin: 50px auto; } ul{ list-style: none; } .nav li{ float: left; } .nav li a{ display: block; width: 80px; height: 50px; background-color: pink; text-align: center; line-height: 50px; color: white; text-decoration: none; } .nav li a:hover{ background-color: green; } </style> </head> <body> <div class="nav"> <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> </div> </body> </html>
!易错点:一条li里放一个a,否则不浮动
四、清除浮动
1.场景搭建
出现问题:父级不加高且子集浮动时,会重叠
2.额外标签:
解决方法:父元素内容的最后添加块元素clear-both
3.单伪元素
4.双伪元素
5.overflow