一、html中常用选择器的用法
以下列演示代码为例
1、标签选择器，定义五个按钮基本样式
2、id选择器，id具有唯一性，定义page 1样式
3、class选择器，定义含有class=''的页面样式
4、属性选择器，定义同一类属性的元素样式
5、群组选择器，可同时定义多个选择器的属性
6、相邻选择器，可定义当前元素下一个元素的样式
7、兄弟选择器，可定义平行等级的所有元素
8、伪类，子元素选择器
注：
相邻选择器：相邻选择器使用了加号（+），可选择紧接在另一元素后的元素，且二者有相同父元素。
兄弟选择器：兄弟选择器使用了加号（~），可选择紧接在另一元素后的所有同级的指定元素，强调所有的。
nth-child()和nth-of-type()的使用：
关注点不同，如果关注位置用：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>html中常用选择器的用法</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
/* 标签选择器，定义五个按钮基本样式 */
ul li {
list-style: none;
height: 30px;
width: 80px;
text-align: center;
border: 1px solid #0f0f0f;
border-radius: 15px;
line-height: 30px;
display: inline-block;
}
/* id选择器，id具有唯一性，定义page 1样式 */
#page {
background: #a5a5a5;
}
/* class选择器，定义含有class=''的页面样式 */
.page-border {
border: 3px solid #7fcff9;
}
/* 属性选择器，定义同一类属性的元素样式*/
li[id='page-bg'] {
background: #eb9759;
}
/* 群组选择器，可同时定义多个选择器的属性 */
#page,
.page-border {
box-shadow: 10px 10px 5px #888888;
}
/* 相邻选择器，可定义当前元素下一个元素的样式 */
.page-next+* {
background: #1550e7;
}
/* 兄弟选择器，可定义平行等级的所有元素 */
.page-next~* {
border: 3px dotted #e715b3;
}
/* 相邻兄弟选择器：相邻兄弟选择器使用了加号（+），可选择紧接在另一元素后的元素，且二者有相同父元素。 */
/* 兄弟选择器：兄弟选择器使用了加号（~），可选择紧接在另一元素后的所有同级的指定元素，强调所有的。 */
/* 伪类，子元素选择器 */
ul :first-child {
color: #ff2400;
}
ul :last-child {
color: #ff2400;
}
ul :nth-child(6) {
color: #ff2400;
}
/* 伪类，类型选择器 */
ul li:first-of-type {
font-size: 20px;
font-weight: 600;
}
ul li:nth-of-type(5) {
font-size: 20px;
font-weight: 600;
}
/* 关注点不同，如果关注位置用：nth-child()； */
/* 既关注位置又关注类型用：nth-of-type()； */
</style>
<body>
<h2>邻选择器与兄弟选择器</h2>
<ul>
<li id="page" class="page-border">page 1</li>
<li class="page-border">page 2</li>
<li id="page-bg">page 3</li>
<li id="page-bg">page 4</li>
<li class="page-next">page 5</li>
<li>page 6</li>
<li>page 7</li>
<li>page 8</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、padding对盒子大小的影响
容器中为盒子设置内边距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>padding对盒子大小的影响</title>
</head>
<style>
.box {
width: 600px;
background: #b58585;
}
.box img {
padding: 50px;
width: 500px;
}
.box2 {
width: 600px;
box-sizing: border-box;
padding: 50px;
background: #f8ff81;
}
</style>
<body>
<!-- 将图片显示在内容区中间 -->
<div class="box">
<img src="https://img.php.cn/upload/course/000/000/015/5d4d0b34c7041685.png" alt="">
</div>
<!-- box-sizing -->
<div class="box2">
<img src="https://img.php.cn/upload/course/000/000/015/5d4d0b34c7041685.png" alt="">
</div>
<!-- 容器中为盒子设置内边距padding，内部元素有可能将盒子可能会改变原有盒子的大小，且需要计算宽度； -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、margin中的同级塌陷, 嵌套传递与自动挤压
1、垂直方向同级塌陷
当两个盒子在垂直方向上设置margin值时，会出现一个塌陷现象，垂直之间塌陷的原则是以两盒子最大的外边距为准。
2、嵌套传递
两个块级元素，如果成父子关系，那么子元素的margin值会向父元素传递
嵌套传递解决办法：在父元素上，将子元素的外边距 改为父元素的内边距
3、外边距的自动挤压
margin: auto;将该元素自动挤压局中
margin-left: auto; 元素设置左外边距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>margin中的同级塌陷, 嵌套传递与自动挤压</title>
</head>
<style>
/* 统计塌陷 */
.box1,
.box2 {
width: 200px;
height: 200px;
}
.box1 {
background: #43b6ff;
margin-bottom: 50px;
}
.box2 {
background: #6243ff;
margin-top: 60px;
}
/* 嵌套传递 */
.box3 {
width: 500px;
height: 500px;
background: #312e3f;
padding-top: 100px;
box-sizing: border-box;
}
.box4 {
width: 300px;
height: 300px;
background: #bfac40;
/* margin-top: 100px; */
}
/* 外边距的自动挤压 */
.box5 {
width: 200px;
height: 200px;
background: #43b6ff;
margin: auto;
/* 将该元素自动挤压局中 */
/* margin-left: auto; 元素设置左外边距auto，浏览器会自动把左边尽可能大的空间占用掉 */
}
</style>
<body>
<!-- 垂直方向同级塌陷 -->
<!-- 当两个盒子在垂直方向上设置margin值时，会出现一个塌陷现象，垂直之间塌陷的原则是以两盒子最大的外边距为准。 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 嵌套传递 -->
<!-- 两个块级元素，如果成父子关系，那么子元素的margin值会向父元素传递 -->
<!-- 嵌套传递解决办法：在父元素上，将子元素的外边距 改为父元素的内边距 -->
<div class="box3">
<div class="box4"></div>
</div>
<!-- 外边距的自动挤压 -->
<div class="box5">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
