收藏
批改状态：合格
老师批语：作业慢慢写, 只要完成就好, 不着急
一：实例演示相邻选择器与兄弟选择器,并分析异同
<!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">
<!-- <link rel="stylesheet" href="style.css"> -->
<title>实例演示相邻选择器与兄弟选择器,并分析异同</title>
<style>
body {
background-color: crimson;
}
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;
/*50%相对值*/
border-radius: 50%;
/*将一个块元素转为内联元素*/
display: inline-block;
/*2px和2px左边和右边偏移2个像素边距，1为扩散1个像素 888为阴影*/
box-shadow: 2px 2px 1px #888;
}
/*#id选择器*/
#bg-yellow {
background: yellow;
}
/*class选择器*/
.bg-green {
background-color: lightgreen;
}
/*属性选择器*/
li[id="bg-yellow"] {
border: 2px solid yellow;
}
/*群组选择器*/
#bg-yellow,
.bg-green {
border: 2px solid blue;
}
/* 相邻选择器 */
#bg-yellow+* {
background-color: red;
}
/* 兄弟选择器 */
.bg-blue~* {
background-color: lightskyblue;
}
</style>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-yellow">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li class="bg-blue">7</li>
<li>8</li>
<li>9</li>
</ul>
<hr>
<h5>兄弟选择器用~，意思是当前元素往后的元素都会选择(上面2后面的3)
<p>相邻选择器+，意思是当前元素选择往后一个元素（上面7后面的8，9）</p>
</h5>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二：实例演示: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>实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同</title>
<meta charset="utf-8">
<style type="text/css">
p:nth-child(3) {
background-color: yellow;
}
p:nth-of-type(3) {
background-color: red;
}
</style>
</head>
<body>
<div>
<div>实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同</div>
<div>实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<hr>
<h3>
<p>p :nth-child(3) 选择某父元素的子元素p 且p元素是父元素的第3个子元素。即一般在body下第3个元素是p时会被选中</p>
<p> p :nth-of-type(3)选择器：选中同一类p中的第三位，即标签下第三个p标签会被选中
</p>
</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三：实例演示: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>实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing</title>
<style type="text/css">
.a {
box-sizing: border-box;
width: 500px;
padding: 100px;
border: 1px solid red;
}
#b {
width: 300px;
height: 300px;
background: red;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="a">
<div id="b">演示</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四：实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
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 type="text/css">
.a{
background-color: lightgreen;
width: 100px;
height: 100px;
margin-bottom: 50px;
}
.b {
background-color: lightblue;
width: 100px;
height: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<hr>
<h3>垂直之间塌陷的原则是以两盒子最大的外边距为准</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.嵌套传递：
<!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 type="text/css">
.a{
width: 200px;
height: 200px;
background-color: lightblue;
}
.b{
width: 100px;
height: 100px;
background-color: lightcoral;
margin-top: 50px;
position: absolute;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
<hr>
<h3>子元素的外边距会自动传递到父元素上,可以通过固定子元素margin避免</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
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>自动挤压演示</title>
<style type="text/css">
.a {
height: 100px;
width: 100px;
background-color: lightblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="a"></div>
<p>元素在水平方向自动挤压居中 可以设置magin-上右下左的值</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
五：总结
总结基本都在代码演示里了，4号的作业又得留明天了 争取省多点时间去多理解多敲。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
