选择器
结构伪类选择器
作用：根据元素的 结构关系 查找元素
:nth-child(公式)
作用：根据元素的结构关系查找多个元素
伪元素选择器
作用：创建 虚拟 元素（伪元素），用来摆放 装饰性 的内容
- 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
- 伪元素默认是行内显示模式 （可以通过display改变其显示模式）
- 权重和标签选择器相同
<style>
div::before {
/*必须设置 content 属性*/
content:"老鼠";
}
div::after{
content:"大米";
}
</style>
<div>爱</div>
<!--最后div里面的内容为 老鼠爱大米-->盒子模型
盒子模型重要组成部分：div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
}
盒子模型 – 边框线
属性名： border （bd） 属性值：边框线粗细 线条样式 颜色（ 不 区分顺序） 常用线条样式
设置单方向边框线 属性名： border-方位名词 （bd+方位名词首字母，例如，bdl） 属性值：边框线粗细 线条样式 颜色（ 不 区分顺序）
div {
/*分别给盒子的上下左右都设置了不同的边框线*/
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}盒子模型 – 内边距
作用：设置 内容 与 盒子边缘 之间的距离 属性名： padding / padding-方位名词div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同
盒子模型 – 尺寸计算
默认情况 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸 结论：给盒子加 border / padding 会 撑大 盒子 解决 手动做减法 ，减掉 border / padding 的尺寸 內减模式： box-sizing: border-box（经常用）盒子模型 – 外边距
作用：拉开两个盒子之间的距离 属性名： margin 提示：与 padding 属性值写法、含义相同 技巧： 版心居中 – 上下为0 左右 margin 值 为 auto（盒子要有宽度）div {
margin: 0 auto;
/*盒子要有宽度*/
width: 1000px;
height: 200px;
}比如：默认的内外边距
/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
list-style: none;
}盒子模型 – 元素溢出
作用：控制 溢出 元素的 内容 的 显示方式 。 属性名：overflow 属性值
外边距问题 – 合并现象
场景： 垂直 排列的 兄弟 元素， 上下 margin 会合并 现象：取两个 margin 中的 较大值 生效.one {
/*此时它的值生效*/
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}外边距问题 – 塌陷问题
场景： 父子级 的标签， 子级 的添加 上外边距 会产生 塌陷 问题 现象：导致父级一起向下移动<style>
.father {
width:300px;
height:300px;
background-color:pink;
}
.son {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div class="father">
<div class="son">子级div</div>
</div>
行内元素 – 内外边距问题
场景： 行内 元素添加 margin 和 padding ，无法改变元素 垂直 位置 解决方法：给行内元素添加 line-height 可以改变垂直位置盒子模型 – 圆角
作用：设置元素的外边框为圆角 属性名： border-radius 属性值：数字+px / 百分比 提示：属性值是圆角半径
技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同
盒子模型 – 圆角
目标：正圆形状
给 正方形 盒子设置圆角属性值为 宽高的一半 / 50%
img {
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%;
}目标：胶囊形状
给 长方形 盒子设置圆角属性值为 盒子高度的一半
div {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
盒子模型 – 阴影（拓展）
作用：给元素设置 阴影 效果 属性名： box-shadow 属性值： X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影 注意： • X 轴偏移量 和 Y 轴偏移量 必须 书写 • 默认是外阴影 ，内阴影需要添加 insetdiv {
width: 200px;
height: 80px;
background-color: orange;
/*属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影*/
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}