本文介绍 高级选择器和盒子模型。
目录
1. 结构伪类选择器
根据元素的结构关系查找元素。
E为标签，代表一种选择器
E:first-child 查找第一个E元素
E:last-child 查找最后一个E元素
E:nth-child(N) 查找第N个E元素
如 li:first-child { CSS属性 }
:nth-child(公式)
偶数标签 2n
奇数标签 2n+1; 2n-1
5的倍数的标签 5n
第5个以后的标签 n+5
第5个以前的标签 -n+5
2. 伪元素选择器
创建虚拟元素，摆放装饰性内容
E::before 在E元素里最前面添加一个伪元素
E::after 在E元素里最后面添加一个伪元素
注意：
必须设置content:" "属性，用来设置伪元素的内容，没有内容引号留空即可
伪元素默认行内显示
权重和标签选择器相同
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
/* 在“爱”前面加上“老鼠” */
div::before {
content: "老鼠";
width: 100px;
height: 100px;
/* 上面的宽高无效 这是行内性质 */
background-color: brown;
/* 转为块级 */
display: block;
}
/* 在“爱”后面加上“大米” */
div::after {
content: "大米";
width: 200px;
height: 200px;
background-color: orange;
/* 转为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<!-- 标签内容：老鼠爱大米 -->
<div>爱</div>
</body>
3. 盒子模型
布局网页，摆放盒子和内容
3.1 组成
重要组成：
内容区域 - width & height
内边距 - padding (出现在内容和盒子边缘之间)
边框线 - border
外边距 - margin (出现在盒子外面)
打开控制台，点击div标签看到下面：
3.2 边框线
border (bd)
复合属性
属性值：边框线粗细 线条样式 颜色 （不区分顺序）
常用线条样式：
solid 实线
dashed 虚线
dotted 点线
同时也可以设置单方向的边框线：
属性名：border-方位名词 （bd+方位名词首字母）
属性值同上
3.3 内边距
盒子的内容和盒子边缘的距离
属性名：padding / padding-方位名词
属性值：数字+单位px
多值写法：
padding 多值写法 最多连接4个值
四个值
三个值
两个值
3.4 尺寸计算
默认情况：
盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸
前面内边距的操作中可以发现盒子会被撑大
其实 边框线border / 内边距padding 都会使得盒子变大
解决：
1. 手动做减法，减掉 border / padding 的尺寸
2. 加上内减模式：box-sizing:border-box
推荐使用第二种
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
/* 内减模式 */
box-sizing: border-box;
}
</style>3.5 外边距
拉开两个盒子之间的距离
margin
与 内边距padding 属性值写法、含义相同
外边距不会撑大盒子
div {
width: 1000px;
height: 200px;
background-color: pink;
/* 四个方向外边距都是50px */
/* margin: 50px; */
/* 单方向设置 */
/* margin-top: 50px;
margin-left: 100px; */
/* 多值:上右下左 */
/* margin: 10px 20px 30px 40px; */
}版心居中
左右外边距为 auto
前提：盒子必须要有宽度
现在设置上下为0 左右版心居中
3.6 清除默认样式
比如：默认的内外边距
我们使用京东的做法
如图：去掉列表的项目符号，用 list-style:none;
很多时候我们会在 * 里直接使用内减模式
后面就不用担心盒子会被撑大
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}3.7 元素溢出
控制溢出元素的内容的显示方式
overflow
属性值：
hidden 溢出隐藏
scroll 溢出滚动（无论是否溢出 都显示滚动条位置）
auto 溢出滚动（溢出才会显示滚动条位置）
水平和垂直都有滚动条
只有垂直有滚动条
3.8 外边距问题
3.8.1 合并现象
场景：垂直排列的兄弟元素，上下 margin 合并
现象：取两个 margin 中的较大值生效
3.8.2 塌陷问题
场景：父子级的标签，子级添加 上外边距，会产生塌陷问题
现象：导致父级一起向下移动
解决方法：
1. 子级取消外边距margin 父级设置内边距padding（推荐）
2. 父级设置 overflow:hidden
3. 父级设置 上边框线border-top
3.9 行内元素-内外边距问题
场景：行内元素添加 margin和padding，无法改变元素的垂直位置
解决：给行内元素添加 行高 line-height 可以改变垂直位置
3.10 圆角属性
设置元素的外边框为圆角
border-radius
属性值（圆角半径）：数字+px / 百分比
3.10.1 基本使用
四个值
三个值
两个值
3.10.2 常见应用
① 正圆形状
常见用于头像
给正方形盒子设置圆角属性值为宽高的一半 / 50%
② 胶囊形状
给长方形盒子设置圆角属性值为 盒子高度的一半
<style>
img {
width: 200px;
height: 200px;
/* 宽高的一半，也可以写50%（最大是50%，超过50%没有效果） */
border-radius: 100px;
}
div {
width: 200px;
height: 80px;
background-color: orange;
/* 高度的一半 */
border-radius: 40px;
}
</style>
<body>
<!-- 1.正圆形 -->
<img src="./5.webp" alt="">
<!-- 2.胶囊形 -->
<div></div>
</body>
3.11 盒子阴影
给元素设置阴影效果
复合属性
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模煳半径 扩散半径 颜色 内外阴影
注意：
1. X轴和Y轴的偏移量必须书写
2. 默认是外阴影，内阴影添加 inset
本文介绍 高级选择器和盒子模型。