Table of contents
1. Structural pseudo-class selector
1.3 Characteristics of floating
1. Structural pseudo-class selector
1. Role and advantages
(1) Function:
Find elements based on their structural relationship in HTML
(2) Advantages:
Reduce the dependence on classes in HTML, which is helpful to keep the code clean
(3) Scenario: Often used to find child elements in a parent selector
2. Selector
| Selector | illustrate |
| E:first-child{ } | Matches the first child element in a parent element |
| E:last-child{ } | Matches the last child element in a parent element |
| E:nth-child(n){} | Matches the nth child of a parent element |
| E:nth-last-child(n){} | Matches the n-th child element from the bottom of the parent element |
<!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: red;
}
/* 从上往下选择第几个孩子 */
li:nth-child(3){
background-color: blue;
}
/* 选择倒数第几个 */
li:nth-last-child(3){
background-color: pink;
}
</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>expand
In the E:nth-child(n){} method, n can be used to form common formulas
| official | Function |
| E:nth-child(2n){ } | Select the even-numbered child elements 2,4,6,8... of the parent element |
| E:nth-child(2n+1){ } | Select the odd-numbered child elements 2,4,6,8... of the parent element |
| E:nth-child(n+5){ } | Find the first 5 child elements in a parent element |
| E:nth-child(-n+5){ } | Find the last 5 child elements in the parent element |
<!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 */
li:nth-child(2n){
background-color: green;
}
/* 选择第奇数个li */
li:nth-child(2n+1){
background-color: red;
}
/* 找到前5个 */
li:nth-child(-n+5){
background-color: blue;
}
/* 后五个 */
li:nth-child(n+5){
background-color: pink;
}
</style>
</head>
<body>
<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>2. Pseudo elements
Pseudo-elements: Non-main content in general pages can use pseudo-elements (via css style, add tags)
the difference:
1. Element: the label set by HTML 2. Pseudo-element: the label effect simulated by CSS
type:
| pseudo element | effect |
| ::before | Add a pseudo-element at the top of the content of the parent element |
| ::after | Add a pseudo-element at the end of the content of the parent element |
Points to note: 1. The content attribute must be set to take effect 2. Pseudo-elements are inline elements by default
<!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: 300px;
height: 300px;
background-color: pink;
}
div::before{
content: '世间文字九万个，唯有';
}
div::after{
content: '字最杀人。';
}
</style>
</head>
<body>
<!-- 伪元素:通过css创建标签，用于装饰性的不重要的小图 -->
<div>情</div>
</body>
</html>3. Standard flow
Standard flow: Also known as document flow, it is a set of layout rules that browsers adopt by default when rendering and displaying web page content , which specifies how elements should be arranged
➢ Common standard flow typesetting rules:
1. Block-level elements: from top to bottom, vertical layout, exclusive line
2. Inline elements or inline block elements: from left to right, horizontal layout, automatic line folding if there is not enough space
Four, floating
The role of floating is to take the label out of the standard flow . Similar to fly.
1.1 The role of floating
1.2 Floating experience
Attribute name: float
Attribute value:
| left | float left |
| right | float 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;
}
div{
width: 100px;
height: 100px;
}
.one{
background-color: pink;
float: left;
}
.two{
background-color:gray;
float: left;
}
</style>
</head>
<body>
<!-- 1.图文并列 -->
<!-- <img src="../day04/images/1.jpg" alt="">
这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝铝这是一过大镁铝这是一过大镁铝这是一过大镁铝这是一过大镁铝 -->
<!-- 2.网页布局，快在一行排列，弥补行内块代码换行有间隙的缺陷 -->
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>1.3 Characteristics of floating
1. Floating elements will break away from the standard flow (abbreviation: off-label), and will not occupy a position in the standard flow
• The equivalent of floating from the ground into the air
2. Floating elements are half a level higher than the standard flow, and can cover elements in the standard flow (but cannot cover content)
3. Floating to find floating, the next floating element will float left and right behind the previous floating element
4. Floating elements have special display effects
• A row can display multiple
• Width and height can be set
Simply put, it is similar to an inline block, but it is more advanced than an inline block (when setting an inline block, if the code has a line break, a small gap of space will be left between the two labels, but the float will not)
important point:
Floating elements cannot pass text-align:center or margin:0 aut0
<!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>
/* 浮动：就是脱离了标准流，相当于一个人飞起来了 */
/* 浮动：浮动比标准流高半个级别，可以覆盖标准流中的元素，但无法覆盖啊标准流标签中的内容 */
/* 浮动：默认是顶对齐的 */
/* 浮动：在一行排列，宽高生效，具备了行内块的特点，但又比行内块高级 */
/* 浮动的元素不能通过 text-align,margin:0 auto来进行居中 */
.one{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color:skyblue;
float: left;
}
.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>1.4 Floating case
Case 1: Use float to complete the layout effect in the design drawing
<!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{
height: 30px;
background-color: #333333;
}
.two{
width: 1236px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.three{
width: 1236px;
height: 100px;
margin: 0 auto;
}
.four{
width: 234px;
height: 460px;
background-color: #ffa500;
float: left;
}
.five{
width: 992px;
height: 460px;
background-color: #87ceeb;
float: left;
}
/*CSS书写顺序：浏览器执行效率更高
1.浮动/display
2.盒子模型：margin border padding 宽高背景色
3.文字样式
*/
</style>
</head>
<body>
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
<div class="four"></div>
<div class="five"></div>
</div>
</body>
</html>Note: Write CSS in the above order, and the browser will execute more efficiently
Case 2: Xiaomi module case
<!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;
}
.container{
margin: 0 auto;
width: 1226px;
height: 614px;
}
.left{
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right{
width: 978px;
height: 614px;
float: right;
}
.box{
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
.right .box:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>Case 3: Web page navigation case
<!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;
}
li{
float: left;
text-align: center;
}
.nav li a{
color: #fff;
width: 80px;
height: 50px;
font-size: 16px;
text-decoration: none;
line-height: 50px;
display: inline-block;
}
a:hover{
background-color: #008000;
}
</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>Note here that in normal development, it is best to wrap a layer of li outside the a tag to improve performance
5. Clear floating
1.1 Clear meaning of floating
meaning:
Clearing floating is not the literal meaning (deleting the floating attribute), but clearing the impact of label floating on other labels
reason:
• The sub-element is unmarked after floating → does not occupy the position
Purpose:
• Need the height of the parent element so as not to affect the layout of other web page elements
1.2 How to clear floating
Example affected by floats: parent collapse issue
<!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>
/* 父级元素没有height属性时，子级标签设置浮动，会影响其他标签 */
.one{
width: 1000px;
/* height: 300px; */
margin: 0 auto;
}
.two{
height: 200px;
background-color: green;
}
.one .left{
width: 200px;
height: 300px;
background-color: blue;
float: left;
}
.one .right{
width: 800px;
height: 300px;
background-color:gray;
float: left;
}
</style>
</head>
<body>
<div class="one">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="two"></div>
</body>
</html>The original implementation style of the above code is as follows:
However, because the sub-elements in the upper div element are arranged in left and right, floating is set, which causes the lower div to be affected
Solution
① Directly set the height of the parent element
Features:
• Advantages: simple and rude, convenient
• Disadvantage: In some layouts, the height of the parent element cannot be fixed. Such as: news list, Jingdong recommendation module
<!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>
/* 父级元素没有height属性是，子级标签设置浮动，会影响其他标签 */
/* 解决方法1：设置高度 */
.one{
width: 1000px;
/* height: 300px; */
margin: 0 auto;
}
.two{
height: 200px;
background-color: green;
}
.one .left{
width: 200px;
height: 300px;
background-color: blue;
float: left;
}
.one .right{
width: 800px;
height: 300px;
background-color:gray;
float: left;
}
</style>
</head>
<body>
<div class="one">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="two"></div>
</body>
</html>② Additional labeling method
➢ Operation:
Add a block-level element at the end of the content of the parent element 2. Set clear:both for the added block-level element
➢ Features:
• Disadvantage: Additional tags will be added to the page, which will complicate the HTML structure of the page
<!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>
/* 父级元素没有height属性是，子级标签设置浮动，会影响其他标签 */
/* 解决方法2：设置额外标签 */
.one{
width: 1000px;
/* height: 300px; */
margin: 0 auto;
}
.two{
height: 200px;
background-color: green;
}
.one .left{
width: 200px;
height: 300px;
background-color: blue;
float: left;
}
.one .right{
width: 800px;
height: 300px;
background-color:gray;
float: left;
}
.clearfix{
clear: both;
/* clear:both，清除左右两边浮动的影响 */
}
</style>
</head>
<body>
<div class="one">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="two"></div>
</body>
</html>③ Single pseudo-element removal method
➢ Operation: Replaced additional tags with pseudo-elements
Features: • Advantages: used in the project, you can directly add a class to the label to clear the floating
<!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>
/* 父级元素没有height属性是，子级标签设置浮动，会影响其他标签 */
/* 解决方法3：单伪元素清除 */
.one{
width: 1000px;
/* height: 300px; */
margin: 0 auto;
}
.two{
height: 200px;
background-color: green;
}
.one .left{
width: 200px;
height: 300px;
background-color: blue;
float: left;
}
.one .right{
width: 800px;
height: 300px;
background-color:gray;
float: left;
}
/* 原理：使用伪元素的写法，利用css给父级添加标签 */
.clearfix ::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="one">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="two"></div>
</body>
</html>④ Double pseudo-element removal method
operate:
Features:
• Advantages: used in the project, you can directly add a class to the label to clear the floating
<!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>⑤ Set overflow to the parent element: hidden
➢ Operation:
1. Set overflow: hidden directly to the parent element
➢ Features:
• Advantages: no disadvantages, convenient, recommended
<!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;
overflow: hidden;
}
.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>