1. 实例演示相邻选择器与兄弟选择器,并分析异同
实例
<style>
/* 相邻选择器 */
#bg-blue + * {
background-color: yellow;
}
/* 兄弟选择器 */
#bg-blue ~ * {
background-color: pink;
}
</style>
<div>
<ul>
<li class="bg-green">l1</li>
<li>l2</li>
<li>l3</li>
<li class="bg-green">l4</li>
<p>l5</p>
<li>l6</li>
</ul>
<p id="bg-blue">p7</p>
<span>span8</span>
<h3>h9</h3>
<p class="bg-green">p10</p>
<span>span11</span>
<h3>h12</h3>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
实例
<style>
/* 伪类：子元素选择器 */
ul :nth-child(6) {
background-color: coral;
}
/* 伪类：类型选择器 */
ul li:nth-of-type(5) {
background-color: darkorange;
color: white;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
实例
<style>
.box1 {
width: 300px;
border: 1px solid black;
background-color: lightgreen;
padding: 50px;
}
/* box-sizing */
.box2 {
width: 300px;
box-sizing: border-box;
padding: 50px;
background-color: pink;
border: 1px solid black;
}
</style>
<div>
<div class="box1">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjVoLbGir_kAhXNZt4KHW0XCdAQjRx6BAgBEAQ&url=http%3A%2F%2Fwww.runoob.com%2Fcss%2Fcss-image-gallery.html&psig=AOvVaw2oyRD8fYcZWGDhZY6wdg7-&ust=1567958358810342" alt="开车" width="200">
</div>
<hr>
<div class="box2">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwiQuYmair_kAhXU62EKHTiYCtcQjRx6BAgBEAQ&url=http%3A%2F%2F699pic.com%2Ftupian%2Ffendoutupian.html&psig=AOvVaw2oyRD8fYcZWGDhZY6wdg7-&ust=1567958358810342" alt="开心" width="200">
</div>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
实例
<style>
/* 1.同级塌陷 */
.box4 {
width: 100px;
height: 100px;
background-color: burlywood;
margin-bottom: 50px;
}
.box5 {
width: 100px;
height: 100px;
background-color: rgb(18, 154, 233);
margin-top: 30px;
}
/* 2.嵌套传递 */
.box6 {
width: 100px;
height: 100px;
background-color: burlywood;
}
.box7 {
width: 100px;
height: 100px;
background-color: rgb(18, 154, 233);
margin-top: 30px;
}
/* 3.自动挤压 */
.box8 {
width: 100px;
height: 100px;
background-color: burlywood;
margin-left: auto; /* 自动挤压 */
}
</style>
<div>
<!-- 1.同级塌陷 -->
<div class="box4"></div>
<div class="box5"></div>
<!-- 2.嵌套传递 -->
<div class="box6">
<div class="box7"></div>
</div>
<!-- 3.自动挤压 -->
<div class="box8"></div>
<hr>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.总结
1）相邻选择器：同一个父元素的不同元素兄弟或相同元素兄弟，+只会影响后面对应标签的第一个（相邻的）兄弟节点的标签样式。（并不影响前面的兄弟节点）；
兄弟选择器：同一个父元素的不同元素兄弟或相同元素兄弟，~会影响后面对应标签的所有兄弟节点的标签样式。（并不影响前面的兄弟节点）
2）:nth-child和:nth-of-type都是CSS3中的伪类选择器，其功能也都是选取父元素下的直接子元素。区别就在type和child上，如：选择p标签和span元素后面的第三个元素：
p:nth-child(3)伪类选择器的要求1：这个元素是选定的元素（例如：p），2：这个后面的数字表示所有子元素中的第3个
span:nth-of-type(3)伪类选择器要求1:这个元素是选定的元素（例如span）2：在父级元素中所有子元素span的第3个。
nth-child影响到了所有child子元素，而nth-of-type则影响到了相应type的子元素，
关注点不同，如果关注点是位置，用nth-child；
既关注位置，又关注类型，用nth-of-type；
一般如果没有特殊需求，nth-of-type()是最好的选择。
3）padding容易撑大盒子，一般宽度分离解决方案有：
1.通过计算把width和height减去padding的值
2.设置box-sizing的值为border-box
4）margin塌陷解决方法：
1.给父级设置边框或内边距(不建议使用)；
2.触发bfc(块级格式上下文),改变父级的渲染规则
方法: 改变父级的渲染规则有以下四种方法,给父级盒子添加：
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden
这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷；
嵌套传递解决方案：1.给父元素添加padding值；2.给父元素添加边框；3.给父元素添加 overflow:hidden
自动挤压：在做页面内容的时候，可以对margin设负值。
