06HTML+CSS

结构伪类选择器 作用：根据元素的结构关系查找元素。:nth-child(公式) 作用：根据元素的结构关系查找多个元素。

li:first-child {
 background-color: green;
}

伪元素选择器 作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。注意点： • 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可 • 伪元素默认是行内显示模式 • 权重和标签选择器相同

div::before {
 content: "before 伪元素";
}
div::after {
 content: "after 伪元素";
}

盒子模型 – 组成 盒子模型重要组成部分： • 内容区域 – width & height • 内边距 – padding（出现在内容与盒子边缘之间） • 边框线 – border • 外边距 – margin（出现在盒子外面）

?

1 2 3 4 5 6 7 8

div {  margin: 50px;  border: 5px solid brown;  padding: 20px;  width: 200px;  height: 200px;  background-color: pink; }

盒子模型 – 边框线 属性名：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-方位名词。盒子模型 – 内边距 – 多值写法 padding 多值写法 技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。 padding-top: 10px; padding-right: 20px; padding-bottom: 40px; padding-left: 80px;

默认情况 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸 l 结论：给盒子加 border / padding 会撑大盒子 l 解决 l 手动做减法，减掉 border / padding 的尺寸 l 內减模式：box-sizing: border-box 

盒子模型 – 外边距 作用：拉开两个盒子之间的距离 属性名：margin 提示：与 padding 属性值写法、含义相同 技巧：版心居中 – 左右 margin 值 为 auto（盒子要有宽度）

盒子模型 – 元素溢出 作用：控制溢出元素的内容的显示方式。 属性名：overflow。

外边距问题 – 合并现象 场景：垂直排列的兄弟元素，上下 margin 会合并 现象：取两个 margin 中的较大值生效。

外边距问题 – 塌陷问题 场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题 现象：导致父级一起向下移动，解决方法： • 取消子级margin，父级设置padding • 父级设置 overflow: hidden • 父级设置 border-top

行内元素 – 内外边距问题 场景：行内元素添加 margin 和 padding，无法改变元素垂直位置 解决方法：给行内元素添加 line-height 可以改变垂直位置。

盒子模型 – 圆角 作用：设置元素的外边框为圆角。 属性名：border-radius 属性值：数字+px / 百分比 提示：属性值是圆角半径。

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

常见应用 – 正圆形状 l 给正方形盒子设置圆角属性值为 宽高的一半 / 50% l 常见应用 – 胶囊形状 l 给长方形盒子设置圆角属性值为 盒子高度的一半 

盒子模型 – 阴影（拓展） 作用：给元素设置阴影效果 属性名：box-shadow 属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影 注意： • X 轴偏移量 和 Y 轴偏移量 必须书写 • 默认是外阴影，内阴影需要添加 inset。