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 black;
}
ul li {
/* 宽 */
width: 40px;
/* 高 */
height: 40px;
/* 背景色 */
background-color: red;
/* 边框线 */
border: 1px solid red;
/* 文本水平和垂直居中 */
text-align: center;
line-height: 40px;
/* 边框线圆角 */
border-radius: 50%;
/* 块级元素转内联元素 */
display: inline-block;
/* 阴影 */
box-shadow: 2px 2px 1px #888;
}
/* 相邻选择器 */
#bg-blue+* {
background-color: blue
}
/* 兄弟选择器 */
#bg-black~* {
background-color: black;
}
</style>
</head>
<body>
<ul>
<li id="bg-blue">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li id="bg-black">8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
子元素选择器 ul：nth-child（） 括号代表索引 第几个元素就输入数字几
类型选择子 ul li：first-of-type 如果选择元素就必须使用带type的 first代表从左第一个
实例
<!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 black;
}
ul li {
/* 宽 */
width: 40px;
/* 高 */
height: 40px;
/* 背景色 */
background-color: red;
/* 边框线 */
border: 1px solid red;
/* 文本水平和垂直居中 */
text-align: center;
line-height: 40px;
/* 边框线圆角 */
border-radius: 50%;
/* 块级元素转内联元素 */
display: inline-block;
/* 阴影 */
box-shadow: 2px 2px 1px #888;
}
/* 伪类：子元素选择器 */
ul :nth-child(3) {
background-color: blue;
}
/* 伪类：类型选择器 */
ul li:first-of-type {
background-color: black;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>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
加载一张图片 宽度设置200 box1盒子宽度设置300像素 padding内边距设置50像素 上下左都是50px 右边被撑开了 第一种手动解决办法 在设置box1的宽度
宽度分离
给图片添加一个中间层 两个盒子嵌套，这样只要设置第二个盒子的内边距就可以了
box-sizing 如果把盒子的宽度定位到 border，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">
<title>内边距</title>
<style>
/* 手工居中 */
.box1 {
width: 300px;
border: 1px solid black;
background-color: lightcyan;
}
.box1 {
padding: 50px;
width: 200px;
}
/* 宽度分离 */
.m {
width: 300px;
}
.box2 {
padding: 50px;
border: 1px solid black;
background-color: lightcyan;
}
.box3 {
width: 300px;
box-sizing: border-box;
padding: 50px;
background-color: aquamarine;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1">
<img src="1.jpg" alt="" width="200">
</div>
<div class="m">
<div class="box2">
<img src="1.jpg" alt="" width="200">
</div>
</div>
<div class="box3">
<img src="1.jpg" alt="" width="200">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
外边距三个特征 同级塌陷 嵌套传递 自动挤压
同级塌陷 相邻的两个盒子 设置相同数值的相邻的边距 边距重叠 谁数值大以谁为准
嵌套传递 子元素的外边距会向父元素传递 两个元素一起移动 如果子元素需要居中父元素会被撑开 解决办法 父元素减去移动的数值 或者使用box-sizing
自动挤压
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">
<title>外边距</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: black;
margin-top: 50px;
}
.box3 {
width: 200px;
height: 200px;
box-sizing: border-box;
background-color: black;
padding-top: 50px;
}
.box4 {
width: 100px;
height: 100px;
background-color: red;
}
.box5 {
width: 100px;
height: 100px;
background-color: red;
margin: auto;
}
</style>
</head>
<body>
<!-- 同级塌陷 -->
<p>同级塌陷</p>
<div class="box1"></div>
<div class="box2"></div>
<!-- 嵌套传递 -->
<p>嵌套传递</p>
<div class="box3">
<div class="box4"></div>
</div>
<p>自动挤压</p>
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例