收藏
批改状态：合格
老师批语：完成的不错
问题一：实例演示相邻选择器与兄弟选择器,并分析异同
相邻选择器实例：
<!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场景应用：可以让盒子在你需要的位置自动居中显示，非常常用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
