收藏
批改状态：合格
老师批语：nth-child()注重不是数字, 而是位置索引, 只不过以整数表示罢了
1、实例演示相邻选择器与兄弟选择器,并分析异同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相邻选择器与兄弟选择器分离</title>
<style>
ul {
margin: 0;
padding-left: 0;
}
ul li {
width: 50px;
height: 50px;
background: green;
list-style-type: none;
display: inline-block;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
.one+* {
background: pink;
}
.three~* {
background: lightsalmon;
}
</style>
</head>
<body>
<ul>
<li class="one">1</li>
<li>2</li>
<li class="three">3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪类选择器作业</title>
<style>
ul {
margin: 0;
padding-left: 0;
}
ul li {
list-style-type: none;
width: 50px;
height: 50px;
background: lightblue;
display: inline-block;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
ul :nth-child(3) {
background: pink;
}
ul li:nth-of-type(6) {
background: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
nth-child()注重数字，注重第几个而nth-of-type()注重的是类型。
3、padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对盒子大小的影响与解决方案</title>
<style>
.box {
width: 300px;
height: 300px;
background: lightcoral;
border: 1px solid #000;
box-sizing: border-box;
padding: 50px;
}
</style>
</head>
<body>
<div class="box">
<img src="static/images/2.jpg" alt="可爱小狗">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
padding会增加盒子的大小，可以使用嵌套一个div用宽度分离解决，也可以使用box-sizing解决，或者直接计算增加的内边距后用盒子整体宽高减去即可。
4、margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>同级塌陷, 嵌套传递与自动挤压</title>
<style>
.box {
width: 200px;
height: 200px;
background: lightblue;
margin-bottom: 50px;
}
.box2 {
width: 200px;
height: 200px;
background: lightcoral;
margin-top: 30px;
}
.box3 {
width: 200px;
height: 200px;
background: lightblue;
}
.box4 {
width: 100px;
height: 100px;
background: lightcoral;
margin-top: 30px;
}
.box5 {
width: 200px;
height: 200px;
background: lightblue;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>同级塌陷</h2>
<div class="box"></div>
<div class="box2"></div>
<hr>
<h2>嵌套传递</h2>
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<h2>自动挤压</h2>
<div class="box5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
同级塌陷出现的情况可能用在布局上，比如上盒子的下边距希望设置50px，下盒子的上边距希望设置20px，这样只要设置其中的一个盒子的上或者下边距为70px，即可解决。
嵌套传递，可能出现在图片布局等情况，可以使用padding解决这个问题。
自动挤压可以用在布局的div居中中。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
