问题一：实例演示相邻选择器与兄弟选择器,并分析异同
相邻选择器实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul { margin: 0; padding-left: 0; border: 1px dashed red; } ul li { list-style-type: none; width: 40px; height: 40px; background-color: wheat; /*border: 1px solid black;*/ text-align: center; line-height: 40px; border-radius: 50%; display: inline-block; box-shadow: 2px 2px 1px #888; } /*id选择器*/ #bg-blue { background-color: lightblue; } /*class选择器*/ .bg-green { background-color: lightgreen; } /*相邻选择器*/ #bg-blue + * { background-color: yellow; } </style> <title>相邻选择器</title> </head> <body> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="bg-green">3</li> <li class="bg-green">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
运行实例 »兄弟选择器实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul { margin: 0; padding-left: 0; border: 1px dashed red; } ul li { list-style-type: none; width: 40px; height: 40px; background-color: wheat; /*border: 1px solid black;*/ text-align: center; line-height: 40px; border-radius: 50%; display: inline-block; box-shadow: 2px 2px 1px #888; } /*id选择器*/ #bg-blue { background-color: lightblue; } /*class选择器*/ .bg-green { background-color: lightgreen; } /*兄弟选择器*/ #bg-blue ~ * { background-color: yellow; } </style> <title>兄弟选择器</title> </head> <body> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="bg-green">3</li> <li class="bg-green">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
运行实例 »异同点：相邻选择器和兄弟选择器选中的都是往后的选择器，区别是相邻选择器选中的是之后一个选择器，而兄弟选择器选中的是往后的全部选择器。
问题二：实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*将每个div中的第三个子元素背景设置绿色*/ div :nth-child(3) { background-color: lightgreen; } /*将第三个p的背景设置黄色*/ p:nth-of-type(3) { background-color: yellow; } </style> </head> <body> <div> <p>海上生明月，</p> <li>天涯共此时。</li> <p>情人怨遥夜，</p> <p>竟夕起相思。</p> </div> <div> <li>灭烛怜光满，</li> <p>披衣觉露滋。</p> <li>不堪盈手赠，</li> <p>还寝梦佳期。</p> </div> </body> </html>
运行实例 »异同点：
如果关注点是位置: 用nth-child
既关注位置, 又关注类型, 用 nth-of-type
问题三：实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距padding的用法</title>
<style>
.box1 {
width: 400px;
border: 1px solid black;
background-color: lightgreen;
margin-bottom:5px;
}
.box1 {
padding: 50px;
width: 298px;
}
/*宽度分离*/
.wrap {
width: 400px;
}
.box2 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
margin-bottom:5px;
}
/*box-sizing*/
.box3 {
width: 400px;
box-sizing: border-box;
padding: 50px;
background-color: lightpink;
border: 1px solid black;
}
</style>
</head>
<body>
<!--将图片显示在容器中间-->
<div class="box1">
<img src="https://img.php.cn/upload/article/000/000/041/5d563f75d61e4358.jpg" alt="AI未来" width="300">
</div>
<!--宽度分离-->
<div class="wrap">
<div class="box2">
<img src="https://img.php.cn/upload/article/000/000/041/5d563f75d61e4358.jpg" alt="AI未来" width="300">
</div>
</div>
<!--box-sizing-->
<div class="box3">
<img src="https://img.php.cn/upload/article/000/000/041/5d563f75d61e4358.jpg" alt="AI未来" width="300">
</div>
</body>
</html>运行实例 »
问题四：实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
1.1同级塌陷实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maring同级塌陷</title>
<style>
.box1 {
width:300px;
height:300px;
background:pink;
margin-bottom:50px;
}
.box2 {
width:300px;
height:300px;
background:green;
margin-top:30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
1.2解决方案:margin同级塌陷问题产生于垂直方向，谁的值大以谁的为准，可以将上方的盒子的margin-bottom设置为最终需要的值，而下方margin-top的值不设置即可。
2.1嵌套传递实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maring嵌套传递</title>
<style>
.box1 {
width:200px;
height:200px;
background:pink;
}
.box2 {
width:100px;
height:100px;
background:green;
margin-top:30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
2.2解决方案：margin嵌套传递是指当父盒子中的子盒子设置margin-top时，会在父盒子上传递，解决方案就是不用子盒子的margin-top，直接在父盒子里使用padding-top即可。
3.1自动挤压实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maring自动挤压</title>
<style>
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
/*上下各30px,左右自动挤压，居中显示*/
.box1 {
margin: 30px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>运行实例 »
3.2场景应用：可以让盒子在你需要的位置自动居中显示，非常常用。