2019-9-3作业
1. 实例演示相邻选择器与兄弟选择器,并分析异同
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
3. 实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
1、相邻选择器与兄弟选择器
相邻选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
格式：element1 + element2 , element2可以使用通配符*;
以下代码中选择与div相邻的P元素：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div+p {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div>
<p>这是div中第一个P元素</p>
<a href="">这是div中的A元素</a>
<p>这是div中第二个P元素</p>
</div>
<p>这是div外相邻的P元素</p>
<p>这是div外第二个P元素</p>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例兄弟选择器选取指定元素之后的所有相邻的兄弟元素。
格式：element1 ~ element2 , element2可以使用通配符*
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div~p {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div>
<p>这是div中第一个P元素</p>
<a href="">这是div中的A元素</a>
<p>这是div中第二个P元素</p>
</div>
<p>这是div外相邻的P元素</p>
<p>这是div外第二个P元素</p>
<div>
<p>这是div中第一个P元素</p>
<a href="">这是div中的A元素</a>
<p>这是div中第二个P元素</p>
</div>
<p>这是div外相邻的P元素</p>
<li>test1</li>
<p>这是div外第二个P元素</p>
<li>test2</li>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例相邻选择器与兄弟选择器
-->指定元素和要选的元素都有相同的父元素；
-->相邻选择只选择与之紧相邻的元素，兄弟选择则可以选择其后续所有符合的元素。
2、:nth-child() 和 :nth-of-type()选择器
nth-child(n) 选择器：匹配父元素中的第 n 个子元素，元素类型没有限制。
常用格式：element :nth-child(n)
n 可以是一个数字，一个关键字，或者一个公式。比如：1、odd、even、2n+1、3n+0
特别注意代码中的空格！！
element :nth-child(n) 表示element元素的子元素中，选择的是第n个子元素，无关元素类型；
element:nth-child(n) 表示在body的子元素中，第n个是指定的element元素类型的子元素；
:nth-of-type(n)选择器：匹配同类型中的第n个同级兄弟元素。
常用格式：element父 element子:nth-of-type(n)
n 可以是一个数字，一个关键字，或者一个公式。比如：1、odd、even、2n+1、3n+0
在下面的代码中：
div:nth-child(1) ：选择body中第一个子元素是div的元素；
div :nth-child(1) ：选择div下的第一个子元素；
div p:nth-child(1)：选择div下的第一个元素是P的子元素；
div p:nth-of-type(1)：选择div下第一个类型是P的子元素
div :nth-of-type(1)：这个写法是有问题的
div:nth-of-type(1) 选择body中第一个子元素是div的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div:nth-child(1) { font-size: 24px; } div :nth-child(1) { font-style: italic; } div p:nth-child(1) { background-color: green; } div p:nth-of-type(1) { border: 1px dashed red; } div :nth-of-type(1) { color: blue; } div:nth-of-type(1) { border: 2px dashed lightcyan; } </style> </head> <body> <div> <h3>这是h3</h3> <p>这是外层div中的P1</p> <p>这是外层div中的P2</p> <div> <p>这是内层div中的P1</p> <p>这是内层div中的P2</p> <p>这是内层div中的P3</p> </div> <p>这是外层div中的P3</p> </div> <p>这是div外部的P1</p> <p>这是div外部的P2</p> <p>这是div外部的P3</p> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
3、padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
在容器盒子中嵌入元素时，如果为盒子设置内边距，内部元素有可能将盒子撑变形，常见解决方案有：
根据padding，重写盒子宽度；----->缺点：需要计算宽度，且重复设置一次；
在盒子外面再套一个容器，用作隔离；----->缺点：增加DOM节点，结构变复杂；
推荐使用：box-sizing: border-box;的方案。
代码如下：
实例
<!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">
<link rel="stylesheet" href="style3.css">
<title>Document</title>
<style>
.box1 {
width: 300px;
border: 1px solid black;
background-color: lightgreen;
}
.box1 {
padding: 50px;
width: 200px;
}
/* 宽度分离方法 */
.wrap {
width: 300px;
}
.box2 {
padding: 50px;
background-color: blue;
border: 1px solid black;
}
/* box-sizing */
.box3 {
width: 300px;
box-sizing: border-box;
padding: 50px;
background-color: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 将图片显示到<div></div> -->
<div class="box1">
<img src="4.jpg" alt="jj" width="200">
</div>
<div class="wrap">
<div class="box2">
<img src="4.jpg" alt="jj" width="200">
</div>
</div>
<div class="box3">
<img src="4.jpg" alt="jj" width="200">
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例4、margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
同级的两个元素，在设置顶部和底部的margin后，会出现垂直方向重叠的现象，称之为同级塌陷。
一个空盒子容器中嵌套元素，当为这个元素设置margin后，它的margin-top值将穿透到父元素的外部，也就是说它的顶部将与父元素上部内边平齐。称之为嵌套传递。
对一个元素设置其margin时，如果写为：
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">
<link rel="stylesheet" href="style4.css">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box1 {
margin-bottom: 30px;
}
.box2 {
margin-top: 30px;
}
.box3 {
/* box-sizing: border-box; */
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box4 {
margin-top: 50px;
}
.box3 {
padding-top: 50px;
height: 150px;
}
.box5 {
/* box-sizing: border-box; */
width: 150px;
height: 150px;
background-color: lightblue;
}
.box5 {
margin: auto;
/* margin-bottom: auto; */
}
</style>
</head>
<body>
<!-- 1、同级塌陷----垂直方向；
2、嵌套传递
3、自动挤压 -->
<div class="box1">
</div>
<div class="box2">
</div>
<!-- =============================================== -->
<div class="box3">
<div class="box4"></div>
</div>
<div class="box5"></div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例