收藏
批改状态：合格
老师批语：写得还可以
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>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
width: 314px;
height: 54px;
border: 1px solid red;
box-sizing: border-box;
margin: 10px auto;
font-size: 0px;
/* 内联元素的父级元素上设置font-size: 0px;可以让内联样式的间隔取消；请在子级设置字体大小 */
}
li {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
text-align: center;
list-style: none;
font-size: 14px;
}
#blue {
background: cornflowerblue
}
#blues {
background: cornflowerblue
}
#blue+* {
background: darkcyan
}
/* 相邻选择器，选择与之相邻的一个元素的样式变化 */
#blues~* {
background: rgb(103, 10, 189)
}
/* 兄弟选择器，选择与之相邻的后面所有的元素的样式变化 */
</style>
</head>
<body>
<ul>
<li>1</li>
<li id="blue">2</li>
<li>3</li>
<li id="blues">4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
: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>Document</title>
<style>
div :first-child {
background: blue;
/* nth-child()元素选择器，这里的意思是每个div里的第一个元素位置，背景颜色都为蓝色 */
}
div:nth-of-type(3) :nth-child(2) {
background: chocolate
}
/* nth-of-type()是类选择器，这里的意思是在第3个div类里的第2个元素位置，背景颜色都为橙色 */
</style>
</head>
<body>
<div>
<li>1.1</li>
<p>1.2</p>
<li>1.3</li>
<li>1.4</li>
</div>
<div>
<p>2.1</p>
<p>2.2</p>
<li>2.3</li>
<li>2.4</li>
</div>
<div>
<p>3.1</p>
<p>3.2</p>
<li>3.3</li>
<li>3.4</li>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
2种写法来解决padding对盒子大小的影响，
第1种为宽度分类的写法，核心在于，实际宽度的值与padding之间的值的相减；
第2种写法，使用box-sizing属性；这样就不用担心宽度高度的值需要减去padding的值。
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
<!--这里只做对比说明 -->
<style>
/* 第一种宽度分离的写法 */
.box_1 {
width: 150px;
/*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的300px */
height: 150px;
/*因为使用了padding，所以高度需要减去10*2的长度，才是真正的200px */
background: darkslateblue;
margin: 10px;
padding: 75px;
}
.box_2 {
width: 150px;
/*因为使用了padding，所以宽度需要减去20*2的长度，才是真正的260px */
height: 150px;
/*因为使用了padding，所以高度需要减去10*2的长度，才是真正的180px */
background: rgb(5, 236, 63);
}
/* 第二种box-sizing: border-box的写法 */
.box_3 {
width: 300px;
height: 300px;
background: darkslateblue;
margin: 10px;
padding: 75px;
box-sizing: border-box;
/* 使用 box-sizing: border-box这个属性，可以忽略padding值造成的影响*/
}
.box_4 {
width: 150px;
height: 150px;
background: rgb(5, 236, 63);
}
</style>
</head>
<body>
<div class="box_1">
<div class="box_2"></div>
</div>
<div class="box_3">
<div class="box_4"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
4.1margin中的同级塌陷
margin塌陷只发生在真正意义的块级元素上（浮动跟那些inline-block不算），浏览器应该是希望我们块级元素只设置上下其中的一个margin就好了，避免margin塌陷。
解决办法：可以将块级元素改为内联元素，或者在块级元素外面嵌套一层父级，采用浮动的做法，父级记得使用
overflow: hidden来清浮动。
4.2嵌套传递的解决方法
子级的marin-top会影响父级的变化；解决方法是父级采用padding；或者用浮动
4.3自动挤压
主要用在导航，或者居中显示等特殊位置。
<!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>Document</title>
<style>
/*同级传递的问题 */
.box {
overflow: hidden;
width: 150px;
}
/* 这里设置了一个父级，主要用于下面margin中的同级塌陷的解决，更简单的方法是设置其中一个块元素的margin就可以了。 */
.box1 {
width: 150px;
height: 150px;
background: blue;
margin-bottom: 10px;
float: left;
}
.box2 {
width: 150px;
height: 150px;
background: rgb(5, 219, 41);
margin-top: 20px;
float: left;
}
/*嵌套传递的问题 */
.box3 {
width: 150px;
height: 150px;
background: rgb(216, 98, 30);
text-align: center;
/* overflow: hidden; 解决方法是父级采用padding；或者用浮动,记住要清浮动*/
}
.box4 {
width: 50px;
height: 50px;
background: rgb(62, 1, 131);
margin-top: 50px;
/* 这里主要是嵌套传递的一个问题；子级的marin-top会影响父级的变化；解决方法是父级采用padding；或者用浮动 */
float: left;
}
/*自动挤压的问题 */
.box5 {
width: 150px;
height: 150px;
background: rgb(10, 115, 235);
text-align: center;
margin: 10px auto;
/* 上下挤压10px；然后居中显示 */
line-height: 150px;
}
</style>
</head>
<body>
<!-- 同级塌陷演示 -->
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<!-- 嵌套传递演示 -->
<div class="box3">
<div class="box4">4</div>
</div>
<!-- 自动挤压演示 -->
<div class="box5">居中显示</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
