一. 实例演示相邻选择器与兄弟选择器,并分析异同
1、相邻选择器
语法：E+F。功能：选择紧位于匹配的E元素的后面的同级且匹配的一个F元素 。
应用场景：适用于选择某元素相邻的后符合条件的一个元素。
2、兄弟选择器
语法：E~F。功能：选择位于匹配的E元素的后面的同级且匹配的所有F元素 。
应用场景：适用于选择某元素相邻的后所有符合条件的元素。
实例
<!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">
<style>
ul {
margin: 0;
padding-left: 0;
border: 2px dashed black;
width: 600px;
}
ul li {
list-style-type: none;
width: 50px;
height: 50px;
background-color: white;
border: 1px solid;
text-align: center;
line-height: 50px;
border-radius: 50%;
/* 将块元素转为内联块元素 */
display: inline-block;
}
.brown-li {
background-color: brown;
}
/* 相邻选择器 E+F：选择匹配的F元素，且紧位于匹配的E元素的后面的同级且匹配的F元素 */
.white-li+* {
/* 选取class属性为white-li的下一个元素，为其设置阴影。*为匹配所有元素，如果有需要可以指定元素类型 */
box-shadow: 3px 3px 2px black;
}
/* 兄弟选择器 E~F：选择匹配的F元素，且位于匹配的E元素后的所有同级且匹配的F元素 */
.brown-li~* {
/* 选取class属性为brown-li后的所有匹配的元素，将他们的背景色设置为green。 */
background-color: green;
}
</style>
<title>Document</title>
</head>
<body>
<ul>
<li class="white-li">1</li>
<li>2</li>
<li>3</li>
<li class="brown-li">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
1、nth-child(n)选择器
语法：E F:nth-child(n)
功能：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0
2、nth-of-type(n)选择器
语法 E:nth-of-type(n)
功能:选择父元素内具有指定类型的第n个E元素*
总结：nth-child(n)选择器只关注父元素内子元素的索引号，适用于选取父元素的第n个元素。
nth-of-type(n)选择器 不仅关注父元素内子元素的索引号，还关注子元素的类型，适用于选取父元素的第n个某类型的元素。
实例
<!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">
<style>
/* nth-child(n)选择器 语法 E F:nth-child(n)
功能:选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、
可以是公式（2n+1）,而且n值起始值为1，而不是0.*/
#box1 :nth-child(3) {
/* 设置box1中第3个元素的背景色为aqua */
background-color: aqua;
}
#box1 :nth-child(5) {
/* 设置box1中第5个元素的背景色为aqua */
background-color: lightcoral;
}
/* nth-child(n)选择器 语法 E:nth-of-type(n)
功能:选择父元素内具有指定类型的第n个E元素*/
#box2 p:nth-of-type(2) {
/* 设置box2中第2个p类型标签的背景色为gray */
background-color: gray;
}
/* 设置box2中第3个a类型标签的背景色为green */
#box2 a:nth-of-type(3) {
background-color: green;
}
</style>
<title>Document</title>
</head>
<body>
<div id="box1">
<p>我是第1个box的第1个元素</p>
<a href="">我是第1个box的第2个元素</a>
<p>我是第1个box的第3个元素</p>
<p>我是第1个box的第4个元素</p>
<a href="">我是第1个box的第5个元素</a>
<a href="">我是第1个box的第6个元素</a>
</div>
<div id="box2">
<p>我是第2个box的第1个p元素</p>
<p>我是第2个box的第2个p元素</p>
<p>我是第2个box的第3个p元素</p>
<a href="">我是第2个box的第1个a元素</a>
<a href="">我是第2个box的第2个a元素</a>
<a href="">我是第2个box的第3个a元素</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
不设置padding属性时，padding值为0，元素的宽度与高度为content的尺寸，设置padding时，元素的总宽和高为content的尺寸加padding的值，导致盒模型撑大。想解决此问题，可以通过3种常见的方法：
1、改变尺寸：把content的宽和高分别减去padding×2；
2、宽度分离：在此盒模型外在加一个盒模型，高度和宽度设置为需要的尺寸，此时在内部盒模型添加padding值时，由于父元素尺寸没有改变，内部元素尺寸不变；
3、设置box-sizing值为border-box：将box-sizing值设置为border-box时，设置的元素尺寸包含padding部分，故添加padding属性时，只会压缩content的尺寸，元素尺寸不变
实例
<!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">
<style>
/* 将box3放入box1使box3居中，此时在box1中直接添加padding，导致box1被撑大，四周都增加了50px */
.box1 {
width: 200px;
height: 200px;
padding: 50px;
border: 3px solid black;
background-color: brown;
}
/* 如果不想让盒子撑大，可以选用改变盒子大小，宽度分离和box-sizing三种种方式 */
/* 1、改变盒子大小 */
/* 将box3放入box2使box3居中，为了不使box2像box1一样被撑大，设置box2的宽高为100px */
.box2 {
width: 100px;
height: 100px;
padding: 50px;
border: 3px solid black;
background-color: chartreuse;
}
.box3 {
width: 100px;
height: 100px;
padding: 0;
margin: 0;
border: 1px solid blue;
background-color: yellow;
}
/* 2、宽度分离 */
/* 将box3放入box4使box3居中，在box4外面套一个box5，宽高设为200px，
当box4设置padding时，box5不会被改变，里面box4的整体大小也不会改变 */
.box5 {
width: 200px;
height: 200px;
}
.box4 {
padding: 50px;
border: 3px solid black;
background-color: lightcoral;
}
/* 3、box-sizing */
/* 将box3放入box6使box3居中，将box6的box-sizing值设置为 border-box,
此时box6的宽高会包含padding部分，添加padding属性时，box6大小不会改变*/
.box6 {
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 50px;
border: 3px solid black;
background-color: darkgray;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box1">
<div class="box3">
</div>
</div>
<br>
<div class="box2">
<div class="box3">
</div>
</div>
<br>
<div class="box5">
<div class="box4">
<div class="box3">
</div>
</div>
</div>
<br>
<div class="box6">
<div class="box3">
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
同级塌陷：同级块元素为垂直排列，同级块元素设置margin值时，生效的为两个元素垂直margin最大值。用于设置连个同级元素的边距
嵌套传递：单独为子元素设置margin值时，父元素也会受到margin值得影响，如果想为子元素在父元素内设置边距，应设置父元素的padding值，当同时设置父元素padding和子元素margin时，边距为子元素margin+父元素padding。用于设置嵌套元素的边距
自动挤压：元素的margin=auto时，元素居中；margin-left=auto时元素右对齐，margin-right=auto时元素左对齐。需要元素左对齐、右对齐或居中时可以使用。
实例
<!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">
<style>
/* 同级塌陷 当两个块级元素设置margin值时，元素垂直方向的margin间距为两个元素margin值得最大值 */
.box1 {
width: 100px;
height: 100px;
margin-bottom: 30px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
}
.box3 {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: blue;
}
/* 嵌套传递:单独为内嵌元素设置margin值时，margin值会影响父元素，想为内嵌元素设置边距，应为父元素设置padding
此时，边距为内元素margin值+父元素padding值*/
.box4 {
width: 100px;
height: 100px;
background-color: pink;
}
.box5 {
width: 60px;
height: 60px;
margin-top: 20px;
background-color: gray;
}
.box4 {
padding-top: 30px;
}
/* 自动挤压：当设置margin为auto时，元素将自动居中，
设置margin-left=auto时元素右对齐，设置margin-right=auto时元素左对齐 */
.box6 {
width: 100px;
height: 100px;
margin: auto;
background-color: rgb(179, 36, 36);
}
.box7 {
width: 100px;
height: 100px;
margin-left: auto;
background-color: rgb(49, 141, 79);
}
.box8 {
width: 100px;
height: 100px;
margin-right: auto;
background-color: rgb(22, 183, 223);
}
</style>
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例