1.实例演示相邻选择器与兄弟选择器,并分析异同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻选择器和兄弟选择器比较</title>
<link rel="stylesheet" href="style6.css">
<style>
ul {
margin: 0;
padding-left: 0;
border: 1px dashed red;
}
ul li {
list-style-type: none;
width: 40px;
height: 40px;
background: wheat;
text-align: center;
line-height: 40px;
border-radius: 50%;
display: inline-block;
box-shadow: 2px 2px 1px #888;
}
/* ID选择器 */
/* 相邻选择器 */
#bg-blue+* {
background-color: yellow;
}
/* 相邻兄弟选择器 */
#bg-white~* {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li id="bg-blue">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li id="bg-white">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child和nth-of-type选择器</title>
<style>
/* 关注点是位置但类型不确定时，用nth_child; */
div :nth-child(2) {
background-color: green;
}
/* 既关注或确定了位置，又关注或确定了类型 用nth-of-type */
/* 简写 */
/* p:nth-of-type(2) {
background-color: yellow;
} */
/* 完整写法 */
div p:nth-of-type(2) {
background-color: yellow;
}
</style>
</head>
<body>
<H1>第一个DIV</H1>
<div>
<p>第一个P</p>
<li>第一个LI</li>
<p>第二个P</p>
</div>
<H1>第二个DIV</H1>
<div>
<p>第一个P</p>
<li>第一个LI</li>
</div>
</body>
</html>运行实例 »
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding宽度分离或box-sizing</title>
<style>
/* 宽高分离 */
.wrap {
width: 300px;
}
.box2 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
}
/* box-sizing */
.box3 {
box-sizing: border-box;
padding: 50px;
background: pink;
width: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>宽度分离</h2>
<!-- 宽度分离 -->
<div class="wrap">
<div class="box2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567498199338&di=4aba9523b3344cc4df46ca2b968e5a79&imgtype=0&src=http%3A%2F%2Fimg4.cache.netease.com%2Fphoto%2F0001%2F2010-04-17%2F64EFS71V05RQ0001.jpg" alt="赵老师" width="200px">
</div>
</div>
<h2>box-sizing</h2>
<!-- box-sizing -->
<div class="box3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567498199338&di=4aba9523b3344cc4df46ca2b968e5a79&imgtype=0&src=http%3A%2F%2Fimg4.cache.netease.com%2Fphoto%2F0001%2F2010-04-17%2F64EFS71V05RQ0001.jpg" alt="赵老师" width="200px">
</div>
</body>
</html>4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
同级塌陷演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maring同级塌陷</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 30px;
}
</style>
</head>
<body>
<!-- 1.同级塌陷 垂直方向谁大以谁为准，小的塌陷于大的 -->
<!-- BOX1设置了50PX的外边距-下,BOX2设置了30PX的外边距上，BOX2的外边距上包括在了BOX1的外边距下，这就是同级塌陷 -->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
嵌套传递演示及解决办法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maring嵌套传递</title>
<style>
.box3 {
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box4 {
margin-top: 50px;
}
/* 父元素增加padding属性可解决 */
/* .box3 {
padding-top: 50px;
height: 150px;
} */
</style>
</head>
<body>
<!-- 2.嵌套传递 子元素的外边距传递到父元素-->
<!-- BOx4设置的外边距上传递到了BOX3 -->
<div class="box3">
<div class="box4"></div>
</div>
<h2>解决办法，通过给父元素增加padding属性，参考注释代码.BOX3</h2>
</body>
</html>运行实例 »
自动挤压
实例
<!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>margin自动挤压</title>
<style>
.box5 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box5 {
margin: auto;
}
</style>
</head>
<body>
<!-- 3.自动挤压 -->
<!-- 设置margin：auto；或者margin-left/right：auto后，块级元素在水平方向的自我撑满，导致的居中，或者靠最左或者最右-->
<!-- 块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系，所以设置了margin-top/bottom:auto，则被重置为0 -->
<div class="box5">
</div>
</body>
</html>运行实例 »
补充点同学提出的解决办法
1.同级坍塌及解决办法
只发生在block元素上(不包括float、absolute、inline-block元素)
只发生在垂直方向上(不考虑writing-mode)
所谓的同级坍塌就是指两个div都设置外边距的时候，数值小的会被大的吞噬，而margin外边距也只会显示数值大的那一方。例如div1的margin-bottom下边距是30px，而div2的上边距margin-top是20px的时候，最终浏览器只会以最大的30px为准。解决办法，要么只设置一边，要么设置的第二个的时候，将上一个的边距+想要设置的值。、
2.嵌套传递
解决办法：1.给父元素增加padding属性
2.给父元素添加border属性，
3.给父元素或子元素添加浮动属性
3