1、相邻选择器与兄弟选择器实例演示如下：
实例
<ul> <li>1</li> <li>2</li> <li class="item">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li id="liu">8</li> <li>9</li> <li>10</li> </ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
ul{
margin:0;
padding-left: 0;
border:1px solid green;
}
/* 层级选择器 */
ul li{
list-style: none;
width:50px;
height: 50px;
background-color: gold;
/* border: 1px solid black; */
border-radius: 50%;
/* 水平和垂直居中显示 */
text-align: center;
line-height: 50px;
/* 将块级元素变为内联元素 */
display: inline-block;
/* 为li元素加一个阴影 */
box-shadow: 2px 2px 2px #666;
}
/* 相邻选择器 */
#liu+*{
background-color: red;
border: 2px solid blue;
}
/* 兄弟选择器 */
.item~*{
background-color: green;
border: 2px solid blue;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
相邻选择器的运行效果如下图所示
我们可以从图中看到相邻选择器只会选择紧挨着8号元素的后面一个元素9号的背景被改变了，而十号没有改变背景。
兄弟选择器的效果如下图所示
从兄弟选择器可以看出，兄弟选择器会把3号后面所有的元素选中并改变背景，由于9号刚刚被前面的相邻选择器选中并没有改变颜色，是因为相邻选择器的等级要高于兄弟选择器。
这两个选择器都是选择后面的元素，而相邻选择器是选择紧挨着该元素后面的第一个元素，而兄弟选择器是选择跟该元素平级的后面的所有元素。
2、nth-child()和nth-of-type() 实例演示如下：
实例
<div> <p>汽车</p> <li>火车</li> <li>轮船</li> </div> <div> <p>***</p> <p>轮船</p> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
div :nth-child(2){
background-color: green;
}
div p:nth-of-type(2){
background-color: red;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
div :nth-child(2)运行效果如下图：
div p:nth-child(2)运行效果如下图：
这两个选择器虽然都是选择第二个元素但两个选择的意义却不同，第一个选择器是选择每个div下面的第二个元素它关注的是元素的位置，而第二个选择器是选择每个div下的第二个元素且第二个元素还必须是p类型的标签，它既关注元素的位置也关注元素的类型。
3、padding对盒子大小的影响 实例演示如下：
实例
<!-- 将图片在容器里居中显示 --> <div class="box1"><img src="static/image/girl.jpg" alt="美女" width="200"></div> <!-- 使用宽度分离将图片居中显示 --> <div class="wrap"> <div class="box2"><img src="static/image/girl.jpg" alt="美女" width="200"></div> </div> <!-- 使用box-sizing --> <div class="box3"><img src="static/image/girl.jpg" alt="美女" width="200"></div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1{
width:300px;
background-color: wheat;
border:2px solid red;
}
.box1{
padding: 50px;
width: 196px;/*如果这里写出200px的话,总宽度就会变成304*/
/* 左浮动 */
float: left;
}
/* 宽度分离 */
.wrap{
width:300px;
/* 设置左浮动以及左外边距 */
float: left;
margin-left: 10px;
}
.box2{
background-color:aqua;
border:2px solid red;
padding: 50px;
}
/* 使用box-sizing */
.box3{
float: left;
margin-left: 10px;
width: 300px;
padding:50px;
/* 将宽度作用于边框上这时候盒子就不会被撑开 */
box-sizing:border-box;
background-color:aqua;
border:2px solid red;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果图如下：
上面使用了三种方法将图片居中显示，而我们最常用的还是最后一种。
4、margin中的同级塌陷，嵌套传递与自动挤压 实例演示如下
实例
<!-- 同级塌陷 --> <div class="box1"></div> <div class="box2"></div> <!-- 嵌套传递 --> <div class="box1"> <div class="box2"></div> </div> <!-- 自动挤压 --> <div class="box3"></div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/* 同级塌陷哪一个值小就会往值大的塌陷 */
.box1{
width: 150px;
height: 150px;
background-color: red;
margin-bottom: 50px;
}
.box2{
width:150px;
height: 150px;
background-color: blue;
margin-top:30px;
}
/* 嵌套传递 */
.box1{
width: 200px;
height: 200px;
background-color: red;
/* 设置内上边距，然后将高度设置回来，因为一旦设置了padding就会撑开盒子 */
padding-top:20px;
height: 180px;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
/* margin-top: 20px; 当在这里为box2盒子设置上外边距时，会发现没有用 */
}
/* 自动挤压 */
.box3{
width:200px;
height: 200px;
background-color: blue;
/* margin-left: auto;
margin-right: auto; */
margin: 0 auto;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
因为截图看不出效果，所以我这里就没截图了，所以只需要看代码就可以了，需要的可以将代码复制下去运行看效果。
总结：
这里讲解了相邻选择器与兄弟选择器，相邻选择器只会选择紧挨着选择元素后面的第一个元素，而兄弟选择器会选择该元素后面平级的所有元素，两个的作用是不一样的，nth-child()是用于选择某一个特定的元素而nth-fo-type是用于选择特定的元素和特定的元素类型，两者所关注的点不一样，一个元素一旦设置了padding就会撑开盒子，常常解决的方法就是，设置了padding值后再将宽度重新设置，或宽度分离就是为该元素在套一个容器，还有就是将宽度作用到边框上面而不是内容上，这样就不会撑开盒子了，margin有三个特性一个是同级塌陷、嵌套传递、自动挤压使用时记住这三个需要注意的点就可以了。