一. 实例演示相邻选择器与兄弟选择器,并分析异同
CSS的选择器除了我们常用的标签,id,class类选择器,其实还有很多其它作用的选择器，如群组选择器(示例：#pid,.class {...})可以同时对多个选择器的元素指定相应的样式，也有针对元素的某个属性作为条件的属性选择器(示例：li[width="600"] {....})可以对多个宽度为600的li元素指定相应的样式,上面提到的元素选择器都是指向某一个或多个定位的元素,有时候我们找到了某个元素。我们需要对其相邻或后续的元素设置样式时。我们就要用到相邻选择器(#id + * {...})或兄弟选择器(#id ~ * {...})
下面是一个相邻选择器和兄弟选择器的应用案例。我们来看一下他们的区别；
实例
<!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>
ul {
margin: 5px;
padding: 0;
border: 0;
/*标签选择器*/
}
ul li {
list-style-type: none;
width: 50px;
height: 50px;
background-color: darkseagreen;
text-align: center;
line-height: 50px;
border-radius: 20%;
display: inline-block;
/*子标签选择器*/
}
#id3,
#id03 {
background-color: red;
/*群组选择器*/
}
#id3+* {
background-color: yellow;
/*相邻选择器*/
}
#id03~* {
background-color: yellow;
/*兄弟选择器*/
}
</style>
</head>
<body>
<ul>
<li id="id1">1</li>
<li id="id2">2</li>
<li id="id3">3</li>
<li id="id4">4</li>
<li id="id5">5</li>
<li id="id6">6</li>
<li id="id7">7</li>
<li id="id8">8</li>
</ul>
<br>
<h3>上面是相邻选择器的效果</h3>
<ul>
<li id="id01">1</li>
<li id="id02">2</li>
<li id="id03">3</li>
<li id="id04">4</li>
<li id="id05">5</li>
<li id="id06">6</li>
<li id="id07">7</li>
<li id="id08">8</li>
</ul>
<br>
<h3>上面是兄弟选择器的效果</h3>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
结论：从上面的案例我们可以看出。相邻选择器只会对定位元素位置后面的第一个同级元素应用样式，而兄弟选择器会对定位元素后面所有的同级元素应用样式；
二. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
在上面的案例中。我们知道有选择器可以对定位元素向后的同级元素指定样式，可是在使用相邻元素时。只能对后一个元素指定样式。使用兄弟元素时，就把后面所有的同级元素指定了样式。如果我们要对定位元素后面的第某个元素指定样式时。怎么办呢。我们就要用到下面案例展示的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>伪类选择器</title>
<style>
#div1 :nth-child(3) {
color: blue;
/*对id为div1的元里第三个子元素设置字体颜色为蓝色*/
}
#div1 a:nth-of-type(3) {
color: red;
/*对id为div1的元素的子元素里第三个a元素设置字体颜色为红色*/
}
</style>
</head>
<body>
<div id="div1">
<p>第一个P标签</p>
<p>第二个p标签</p>
<a href="">第一个a标签</a><br>
<a href="">第二个a标签</a><br>
<a href="">第三个a标签</a>
<p>第三个P标签</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
通过上面的案例我们可以得出：如果我们需要对定位元素的第X个子元素（不用区分元素类别）指定样式时就使用:nth-child(3){......},如果我们需要对定位元素下面的第X个指定类别的子元素（区分元素类别）指定样式时就使用:nth-of-type(3)，注意使用此选择器时，需要前面带上指定子元素的标记；
三. 实例演示: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的应用</title>
<style>
div {
border: 1px solid black
}
.class1 {
background-color: aquamarine;
}
#id1,
#id2,
#id4,
.class1 {
width: 100px;
height: 100px;
}
#id1 {
padding: 20px;
background-color: blue;
}
#id2 {
padding: 24px;
background-color: darkorange;
box-sizing: border-box;
}
#id3 {
width: 50px;
height: 50px;
background-color: darkgreen;
}
#id5 {
padding: 24px;
}
</style>
</head>
<body>
<div>
<h2>padding值如何影响盒子的大小</h2>
<div class="class1"></div>
<p>一个宽和高均为100px的盒子</p>
<br>
<div class="class1" id="id1"></div>
<p>一个宽和高均为100px的盒子加了内边距"padding=20px"的实际大小</p>
</div>
<br>
<div>
<h2>通过设置padding属性值来实现布局的案例</h2>
<div id="id2">
<div id="id3"></div>
</div>
<p>这是通过设置box-sizing属性值来实现padding属性不影响盒子元素大小的方式实现的居中布局</p>
<div id="id4">
<div id="id5">
<div id="id3"></div>
</div>
</div>
<p>这是通过增设中间层并设置其padding属性从而不影响原盒子元素大小的方式实现的居中布局</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:通过上面实例中我们了解到。盒子的padding(内边距)虽然是不可见的。但我们通过设置其属性，可以实现想要的布局效果，同时也知道了padding的大小会影响其盒子元素的实际大小的。我们为了在布局中需要使用到padding属性值来布局，同时又不想影响该盒子元素原来的实际大小，我们可以通过设置元素的box-sizing:属性来达到我们想要的效果，同样我们也可以使用增设中间层并设置其padding属性来达到我们想要的效果；
四. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
实例
<!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>
div {
border: 1px solid black
}
#id1,
#id2,
#id3,
#id4,
#id5 {
width: 100px;
height: 100px;
background-color: aquamarine;
}
#id1 {
margin-bottom: 30px;
}
#id2 {
margin-top: 20px;
}
#id3 {
margin-left: auto;
}
#id4 {
margin-right: auto;
}
#id5 {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
<h2>margin同级塌陷展示</h2>
<div id="id1"></div>
<div id="id2"></div>
<p>我们分别将上面盒子元素的margin-bottom（下外边距）设置30px,把下面盒子元素的margin-top（上外边距）设置20px,但我们看到的实际间隔为30px,这就体现了盒子元素margin(外边距)同级塌陷的特征；</p>
</div>
<div>
<h2>margin自动挤压展示</h2>
<div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
</div>
<p>我们将第一个盒子元素的margin-left属性设置为auto,我们看到盒子元素被挤到页面最右边，我们将第二个盒子的margin-right属性设置为auto,我们看到盒子元素被挤到页面最左边，我们将第三个盒子的margin-right，margin-left属性均设置为auto,这样盒子元素布局在了页面的正中间，通过这三个例子就体现了盒子元素margin(外边距)自动挤压的特征；
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin嵌套传递</title>
<style>
#div1 {
width: 300px;
height: 300px;
background-color: darkseagreen;
}
#div2 {
width: 150px;
height: 150px;
margin-top: 50px;
background-color: grey;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<p>我们并没有对最外层的盒子元素设定margin-top值，但最外层的盒子元素页面显示时也有了跟里面盒子元素一样的上外边距，这就是margin嵌套传递特征</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1.在案例中发现同级盒子元素相邻边都有margin属性时，那个元素的margin属性值大，就只应用这个个元素的margin属性值，而不是累加两个元素的margin属性值显示，那个margin属性值较小的元素的margin属性则被大的元素的显示效果挡住了。所以页面不显示，这就是盒子元素margin属性的同级塌陷特征；
2.同时还发现如果给一个元素设置margin-left(左外边距）为自动值的话，这个元素就会跑到最右边。同理，如果是设置margin-right(右外边距）为自动值的话，则这个元素会跑到最左边。所以如果左右外边距都是设置为auto的话，那么这个元素就会居中了。这就是盒子元素margin属性的自动挤压特征；
3.在第二个案例中我们发现明明给里面的盒子元素设置了margin属性，但是实际上却是外面的盒子元素有了margin属性，这就是盒子元素margin属性的嵌套传递特征。解决方法有给父盒子元素加一个padding属性，把子盒子元素顶下去。注：只影响最外层的盒子元素！
