Web前端笔记-4、CSS基础-结构伪类选择器、伪元素选择器、盒子模型
结构伪类选择器
作用：根据元素的结构关系查找元素。
结构关系：比如一堆li，选择第一个、最后一个或者奇数的li。
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E 元素 |
| E:nth-child(N) | 查找第 N个E元素（第一个元素 N 值为1） |
结构伪类公式
:nth-child(公式)
作用：根据元素的结构关系查找多个元素。
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1; 2n-1 |
| 找到5的倍数的标签 | 5n |
| 找到第5个以后的标签(包含第5个) | n+5 |
| 找到第5个以前的标签(包含第5个) | -n+5 |
提示：公式中的n取值从0开始。
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after | 在E元素里面最后面添加一个伪元素 |
这两个伪元素是两个盒子，它不是HTML通过盒子标签创建出来的，是通过CSS模拟出来的。
注意点：
- 必须设置
content: ""属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可。 - 伪元素默认是行内显示模式
- 权重和标签选择器相同 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box::before {
/* 必需的属性 */
content: "我";
/* 行内元素，无法直接设置宽高，不过可以display */
display: inline-block;
width: 20px;
height: 20px;
background-color: pink;
}
.box::after {
content: "subeipo";
}
</style>
</head>
<body>
<div class="box">是</div>
</body>
</html>
盒子模型
作用：布局网页，摆放盒子和内容。
组成
盒子模型重要组成部分：
- 内容区域 - width & height
- 内边距- padding（出现在内容与盒子边缘之间）
- 边框线 - border
- 外边距 - margin（出现在盒子外面）
边框线
属性名：border bd
属性值：边框线粗细 线条样式 颜色 （不区分顺序）
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
如何单独设置某个方向的边框线。
属性名：border-方位名词 bd+方位名词首字母 例如，bdl
属性值：边框线粗细 线条样式 颜色（不区分顺序）
top left right bottom
内边距
作用：设置 内容 与 盒子边缘 之间的距离。
属性名：padding / padding-方位名词
padding很多情况下四个内边距各不相同，如何快速书写：
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding: 10px; |
四个方向内边距均为10px |
| 四个值 | padding: 10px 20px 40px 80px; |
上：10px；右：20px；下：40px；左：80px |
| 三个值 | padding: 10px 40px 80px; |
上：10px；左右：40px；下：80px |
| 两个值 | padding: 10px 80px; |
上下：10px；左右：80px |
注意：是上右下左，顺时针方向。
尺寸计算
默认情况：盒子尺寸=内容尺寸+border 尺寸＋内边距尺寸
结论：给盒子加 border / padding 会撑大盒子
解决方法：
- 手动做减法： 减掉 border / padding 的尺寸
- 内减模式：
box-sizing: border-box
外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与 padding 属性值写法、含义相同
技巧：版心居中 -左右 margin 值为 auto（盒子要有宽度）
清除默认样式
清除标签默认的样式，比如：默认的内外边距。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 或者 */
blockquote,body,button,dd,dl,dt, fieldset, form,h1,h2,h3,h4,h5,h6,hr,input, legend,li,ol, P,pre, td,
textarea,th,uL {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
list-style: none;
}
元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| sroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
外边距问题 - 合并现象
场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中的较大值生效
外边距问题 - 塌陷问题
场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象：导致父级一起向下移动
解决方法：
- 给父盒子加padding-top，而不是给子盒子加margin-top。
- 给子盒子加margin-top，那么父级要设置 overflow: hidden。
- 给子盒子加margin-top，也可以父级设置 border-top(颜色设置为
transparent透明色)。
圆角
作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px / 百分比 50%是一个标准的圆；胶囊形是高度的一半
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个值 | border-radius: 10px; | 四个角均为10px |
| 四个值 | border-radius: 10px 20px 40px 80px; | 左上：10px；右上：20px；右下：40px；左下：80px |
| 三个值 | border-radius: 10px 40px 80px; | 左上：10px；右上+左下：40px；右下：80px |
| 两个值 | border-radius: 10px 80px; | 左上+右下：10px；右上＋左下：80px |
盒子阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X 轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
• X 轴偏移量 和 Y 轴偏移量 必须书写
• 默认是外阴影，内阴影需要添加 inset
0 15px 30px rgba(0,0,0,.3) 这个就挺好看
浙公网安备 33010602011771号