9月3日作业:
1. 实例演示相邻选择器与兄弟选择器,并分析异同
相邻选择器：就是邻居的意思，从当前选择器后面的邻居，也就是挨得最近的一个。
兄弟选择器：就是同一父元素下面又是同级的元素，兄弟可以有多个，当前选择器之后的所有兄弟元素。
实例
<!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:0;
padding-left:0;
border:1px dashed red;
}
ul li{
list-style-type: none;
width:40px;
height: 40px;
background-color: #ffaa0c;
/* border:1px solid black; */
/* 水平和垂直的居中 */
text-align: center;
line-height: 40px;
border-radius: 50%;
/* 将一个块级元素转化成内联元素 块支持宽高，内联不支持宽高*/
display: inline-block;
box-shadow: 2px 2px 1px #444;
}
/* 相邻选择器,相邻就是邻居的意思，太远就不算邻居了 */
#bg-blue + *{
/* background-color:yellow; */
}
/* 兄弟选择器 */
#bg-blue ~ *{
background-color:yellow;
}
</style>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。
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>nth-child和nth-of-type选择器</title>
<style>
ul{
margin:0;
padding-left:0;
border:1px dashed red;
}
ul li{
list-style-type: none;
width:40px;
height: 40px;
background-color: wheat;
text-align: center;
line-height: 40px;
border-radius: 50%;
display: inline-block;
box-shadow: 2px 2px 1px #444;
}
ul :nth-child(2){
background-color: coral;
}
ul li:nth-of-type(4){
background-color: darkgreen;
color:white;
}
</style>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
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>
.box1{
width:300px;
height:300px;
background-color:blueviolet;
margin: 0 auto;
box-sizing:border-box;
padding-top: 20px;
}
.box2{
width: 100px;
height: 100px;
background-color: aquamarine;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 实例演示: 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>
/********** 1、同级塌陷 **********/
.boxa {
/*box-sizing: border-box;*/
width: 150px;
height: 150px;
background-color: #cbe0cc;
}
.boxb {
width: 100px;
height: 100px;
background-color:blueviolet;
}
.boxa{
margin-bottom: 50px;
}
.boxb{
margin-top: 30px;
}
/*2、 嵌套传递 */
.box1 {
/*box-sizing: border-box;*/
width: 350px;
height: 350px;
background-color: #cbe0cc;
}
.box2 {
width: 150px;
height: 150px;
margin: 30px auto;
background-color:blueviolet;
}
/*3、自动挤压 */
.box3 {
/*box-sizing: border-box;*/
width: 350px;
height: 350px;
background-color: lightblue;
}
.box3 {
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 同级塌陷 -->
<div class="boxa">
</div>
<div class="boxb"></div>
<!-- /*2、 嵌套传递 */ -->
<div class="box1">
<div class="box2"></div>
</div>
<!-- /*3、自动挤压 */ -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
解决方案或应用场景
明明给里面的div设置了margin属性，但是实际上却是外面的div有了margin属性，这个就叫做嵌套传递。
解决方法：有给父元素加一个padding属性，把子元素顶下去。
自动挤压：
应用场景：用于居中
如果给一个元素设置左边边距为自动值的话，那么浏览器就会把尽可能大的空间给到这个元素。同理，如果是右边距是自动值的话，就右边距给到最大。所以如果左右都是auto的话，那么这个元素就会居中了。可以用在想把元素在浏览器居中的时候使用，非常方便。
