1.实例演示相邻选择器与兄弟选择器,并分析异同
1.1相邻选择器
用来选中定位标签同级的下一个标签，只能选中一个
1.2兄弟选择器
用来选中定位标签同级的后面所有标签
demo
<!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>Document</title>
<!-- <link rel="stylesheet" href="/public/static/index/css/demo.css"> -->
</head>
<style>
p {
background-color: aqua;
border-radius: 50%;
float: left;
margin-left: 5px;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
}
/* 相邻选择器 */
#ppp+p {
background: pink;
}
/* 兄弟选择器 */
#ppp+p~p {
background: cadetblue;
}
</style>
<body>
<div>
<p id="ppp">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
</body>
</html>2.实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
2.1 nth-child()
选择父标签下指定的索引的标签 不论类型 冲第一个开始计数 该标签重在索引
:冒号签名选择器仅仅用于定位 获取其父标签
2.2 nth-of-type()
指定类型的第N个标签 冲第一个计数 该标签重在计数
:冒号签名选择器即用于定位，又用于类型过滤
demo
<!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>Document</title>
<link rel="stylesheet" href="/public/static/index/css/demo.css?a={:time()}">
</head>
<style>
span,
p {
margin: 10px 10px;
background-color: aqua;
border-radius: 50%;
float: left;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
}
span {
background: pink;
}
/* nth-child */
p:nth-child(8) {
background: red;
}
/* nth-of-type */
p:nth-of-type(3) {
background: black;
}
</style>
<body>
<div>
<p id="ppp">1</p>
<p>2</p>
<span>1</span>
<p>3</p>
<span>2</span>
<p>4</p>
<span>3</span>
<p>5</p>
<span>4</span>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
</body>
</html>3.实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
padding 会增加盒子的大小导致盒子被撑开，可以使用宽度分离和box-sizing 来解决
demo
<!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>Document</title>
<link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
/* 宽高200 */
.child {
background-color: aqua;
height: 150px;
width: 150px;
padding: 25px;
box-sizing: border-box;
}
.div {
border: solid 2px red;
height: 500px;
width: 500px;
}
</style>
<body>
<div class="div">
<div class="child">
</div>
</div>
</body>
</html>4.实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
1.同级塌陷
2个垂直盒子上下外边距会自动合并，合并后值最大的为新的外边距
demo
<!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>Document</title>
<link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
.child {
background-color: aqua;
height: 200px;
width: 200px;
margin-bottom: 30px;
}
.child-son {
height: 30px;
width: 30px;
background: pink;
/* 嵌套传递 */
margin-top: 50px;
}
.div {
border: solid 2px red;
height: 500px;
width: 500px;
}
</style>
<body>
<div class="div">
<div class="child">
</div>
<div class="child-son"></div>
</div>
</body>
</html>2.嵌套传递
嵌套传递当子盒子有margin-top时激活嵌套传递
解决办法 给父盒子设置padding 以达到子盒子固定位置效果
demo
<!DOCTYPE html>
<html>
<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>Document</title>
<link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
.child {
background-color: aqua;
height: 200px;
width: 200px;
padding-top: 50px;
}
.child-son {
height: 30px;
width: 30px;
background: pink;
/* 嵌套传递 */
/* margin-top: 50px; */
}
.div {
border: solid 2px red;
height: 500px;
width: 500px;
}
</style>
<body>
<div>
<div>
<div></div>
</div>
</div>
</body>
</html>3.自动挤压
自动挤压应用于 盒子自动居中场景
demo
<!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>Document</title>
<link rel="stylesheet" href="/public/static/index/css/demo1.css?a={:time()}">
</head>
<style>
.child {
background-color: aqua;
height: 200px;
width: 200px;
/* 自动挤压达到横向居中效果 */
margin: auto auto;
}
.div {
border: solid 2px red;
height: 500px;
width: 500px;
}
</style>
<body>
<div class="div">
<div class="child"></div>
</div>
</body>
</html>