实例
<!-- 9月3日作业:
1. 实例演示相邻选择器与兄弟选择器,并分析异同
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
.title{
font-size: 15px;
font-weight: normal;
}
/* 第一题 */
/* 相邻选择器 */
#first + *{
color:red;
}
/* 兄弟选择器 */
#sen ~ *{
color:blue;
}
/* 从实例中可以看到 相邻选择器只选中标签的下一个同级别的元素；
兄弟选择器为选中元素一下的所有同级元素。 */
/* 第一题结束 */
/* 第二题 */
/* 表示id为sen_ul的第二个子元素 的 字体颜色为 红色。 */
#sen_ul :nth-child(2){
color: red;
}
/* 表示id为sen_ul的后代中 第四个标签为li 的元素 的 字体颜色 为 蓝色。 */
#sen_ul li:nth-of-type(4){
color:blue;
}
/* 从实例中可以发现 子元素选择器 为 选中某个元素的 子元素；
类型选择器用来选择某个标签名的 第几个 元素。 */
/* 第二题结束 */
/* 第三题 */
#thr{
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding-left: 75px;
box-sizing: border-box;
}
#thr img{
width: 50%;
height: 50%;
}
/* 第四题 */
/* 同级塌陷 */
#fou_fir{
width: 200px;
height: 200px;
background-color: #ccc;
margin-bottom: 10px;
}
#fou_bro{
width: 200px;
height: 200px;
background-color: #ccc;
margin-top: 20px;
}
/* 嵌套传递 */
#fou_par{
width: 200px;
height: 200px;
background-color: #ccc;
/* border: 1px solid red; */
}
#fou_child{
width: 100px;
height: 100px;
background-color: #000;
margin-top: 20px;
}
/* 自动挤压 */
#fou_auto{
width: 100px;
height: 100px;
background-color: #000;
margin: 10px auto;
}
</style>
</head>
<body>
<h2>第一题 <span class="title">实例演示相邻选择器与兄弟选择器,并分析异同</span></h2>
<ul>
<li id="first">第一题</li>
<li>第一题</li>
<li id="sen">第一题</li>
<li>第一题</li>
<li>第一题</li>
</ul>
<p style="font-weight:bold;"> 结论:从实例中可以看到 相邻选择器只选中标签的下一个同级别的元素； <br> 兄弟选择器为选中元素以下的所有同级元素。 </p>
<h2>第二题 <span class="title">实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同</span></h2>
<ul id="sen_ul">
<li>第二题</li>
<li>第二题</li>
<li>第二题</li>
<li>第二题</li>
</ul>
<p style="font-weight: bold;"> 结论:从实例中可以发现 子元素选择器 为 选中某个元素的 子元素；<br>类型选择器用来选择某个标签名的 第几个 元素。</p>
<h2>第三题 <span class="title">实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing</span></h2>
<div id="thr">
<img src="./static/1.jpg" alt="">
</div>
<p style="font-weight:bold;">
结论:从实例中可以看到 默认情况下css设置的盒子宽高为内容区的宽高，之后设置padding会让实际的盒子大小发生变化；最合理的解决方法是使用box-sizing属性将padding设置为盒子宽高的一部分。 </p>
<h2>第四题 <span class="title">实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景</span></h2>
<h5>同级塌陷，两个同级的块级元素在垂直方向上的margin并不会累加，他选取其中较大的margin。</h5>
<div id="fou_fir"></div>
<div id="fou_bro"></div>
<h5>嵌套传递,子元素垂直方向上的margin会被父元素继承，解决方法可以给父元素设置border。</h5>
<div id="fou_par">
<div id="fou_child"></div>
</div>
<h5 style="text-align: center;">自动挤压,使用场景 譬如：水平居中</h5>
<div id="fou_auto"></div>
<p style="font-weight:bold;">
从实例中能看到现象。
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例