兄弟选择器和相邻选择器
实例
<!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>
.box {
width: 500px;
height: 800px;
background-color: gray;
}
/* 兄弟选择器 ,选择h3之后所有的p元素*/
h3~p {
color: brown;
}
/* 相邻选择器 ,选择h3之后第一个p元素*/
h2+li {
color: blueviolet;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
<h3>这是h3标题</h3>
<p>这是一段文本1</p>
<p>这是一段文本2</p>
<li>这是列表元素1</li>
<hr>
<h2>这是h2标题</h2>
<li>这是列表元素2</li>
<li>这是列表元素3</li>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
兄弟选择器:语法：a~b{style} 选择a元素之后所有的b元素，应用于同级元素，其父元素及子元素都不会被选择；
相邻选择器：语法：a+b{style}选择a元素之后的第一个b元素，跟兄弟元素一样，其父元素及子元素都不会被选择。
伪类选择符nth-child() nth-of-type()
A:nth-child(n) 定义为选择父元素中的第n个子元素A,若第n个元素不是A元素，则无法匹配到;
B：nth-of-type 定义为匹配父元素的第n个子元素B，若第n个元素不是B元素，则匹配到下一是B元素为止。
A:nth-child()实例
<!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>
/* 会选择到第二个p元素 */
p:nth-child(2) {
color: red;
}
/* p元素的父元素为body，body的第三个子元素为span元素，不为p元素，故nth-child(3)不会匹配 */
p:nth-child(3) {
color: blue;
}
/* 会匹配到P元素的父元素的第4个为p的子元素 */
p:nth-child(4) {
color: blueviolet;
}
</style>
<title>伪类选择符t</title>
</head>
<body>
<p>这是段落1</p>
<p>这是段落2</p>
<span>这是span1</span>
<p>这是段落3</p>
<p>这是段落4</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
B: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">
<style>
/* 选择段落2和段落6 */
p:nth-of-type(2) {
color: red;
}
/* 选择段落3和段落7，即选择第3个p元素 */
p:nth-of-type(3) {
color: blueviolet;
}
</style>
<title>类型选择器</title>
</head>
<body>
<div class="box">
<p>这是段落1</p>
<p>这是段落2</p>
<li>这是li元素1</li>
<p>这是段落3</p>
<p>这是段落4</p>
</div>
<div class="box1">
<p>这是段落5</p>
<p>这是段落6</p>
<li>这是li元素2</li>
<p>这是段落7</p>
<p>这是段落8</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
padding对盒子的影响
<!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>
.box {
width: 200px;
height: 200px;
background-color: gray;
border: 1px solid red;
/* 该设置增大了盒子的宽度，box的内宽度为210*210 ，设置padding值会使盒子增大 */
padding: 10px;
}
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid black;
/* 设置盒子边框的宽高度为整个盒子的宽高度涵border和padding值 ,box-sizing属性值有border-box（含border和padding值）和content-box（不含border和padding值）*/
box-sizing: border-box;
}
</style>
<title>padding对盒子的影响</title>
</head>
<body>
<div class="box">
<div class="box1">
<p>这是段落</p>
</div>
</div>
</body>
</html>
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">
<style>
/* 同级塌陷 */
.box1 {
width: 100px;
height: 100px;
background-color: lightpink;
/* 底部的margin和box2中的顶部margin重叠在一起，两个的相对宽度为其中一个的最大值 */
margin-bottom: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightblue;
margin-top: 100px;
}
</style>
<title>margin三大特性</title>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、嵌套传递
实例
<!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>
/* 同级塌陷 */
.box {
width: 200px;
height: 200px;
background-color: lightpink;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
/* 该margin-top会传递给其父元素box,box的显示外边距为100px; */
margin-top: 100px;
}
</style>
<title>margin三大特性</title>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、自动挤压
<!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>
/* 自动挤压 */
.box {
width: 200px;
height: 200px;
background-color: lightpink;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
/* 设置该上下外边距为0，左右为auto，效果为水平居中 */
margin: 0 auto;
}
</style>
<title>margin三大特性</title>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
