🎨
CSS
7 道题目
难度筛选：
BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，内部元素的布局不影响外部。
触发条件：
•
•
•
•
应用场景：
• 清除浮动（父元素
• 防止 margin 合并
• 自适应两栏布局（左侧 float + 右侧 BFC）
触发条件：
•
overflow: hidden/auto/scroll•
display: flow-root / flex / grid / inline-block•
position: absolute / fixed•
float 不为 none应用场景：
• 清除浮动（父元素
overflow: hidden）• 防止 margin 合并
• 自适应两栏布局（左侧 float + 右侧 BFC）
查看答案即标记为已答
优先级从高到低：
1.
2. 内联样式（style 属性）— 权重 1000
3. ID 选择器 — 权重 100
4. 类 / 伪类 / 属性选择器 — 权重 10
5. 元素 / 伪元素选择器 — 权重 1
6. 通配符
计算规则：从左到右比较，同权重看顺序（后者覆盖前者）。
注意：
1.
!important — 最高优先级2. 内联样式（style 属性）— 权重 1000
3. ID 选择器 — 权重 100
4. 类 / 伪类 / 属性选择器 — 权重 10
5. 元素 / 伪元素选择器 — 权重 1
6. 通配符
* — 权重 0计算规则：从左到右比较，同权重看顺序（后者覆盖前者）。
注意：
!important 会覆盖内联样式，应尽量避免使用。 查看答案即标记为已答
容器属性：
•
•
•
•
•
子元素属性：
•
•
水平垂直居中：
•
display: flex•
flex-direction: row | column•
justify-content — 主轴对齐（center、space-between、space-around）•
align-items — 交叉轴对齐（center、stretch、flex-start）•
flex-wrap: wrap子元素属性：
•
flex: 1（= flex-grow: 1; flex-shrink: 1; flex-basis: 0%）•
align-self水平垂直居中：
.parent {
display: flex;
justify-content: center;
align-items: center;
} 查看答案即标记为已答
方案一：Flexbox
方案二：Grid
方案三：绝对定位 + transform
方案四：绝对定位 + margin auto
方案五：table-cell
推荐：优先使用 Flex 或 Grid，语义清晰且兼容性好。
display: flex; justify-content: center; align-items: center;方案二：Grid
display: grid; place-items: center;方案三：绝对定位 + transform
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);方案四：绝对定位 + margin auto
position: absolute; inset: 0; margin: auto;（需设定宽高）方案五：table-cell
display: table-cell; vertical-align: middle; text-align: center;推荐：优先使用 Flex 或 Grid，语义清晰且兼容性好。
查看答案即标记为已答
position 有 5 个值：1. static（默认）：正常文档流，top/right/bottom/left/z-index 无效
2. relative：相对自身原始位置偏移，不脱离文档流
3. absolute：相对最近的定位祖先（非 static）偏移，脱离文档流
4. fixed：相对浏览器视口定位，脱离文档流
5. sticky：基于滚动位置在 relative 和 fixed 之间切换
注意：
absolute 和 fixed 会创建新的 BFC。 查看答案即标记为已答
px：绝对单位，固定大小
em：相对父元素的 font-size（嵌套时会累乘）
rem：相对根元素（html）的 font-size，不会累乘
vw/vh：视口宽度的 1% / 视口高度的 1%
建议：
• 字体大小用
• 间距用
• 响应式布局用
• 移动端常用方案：html 设置
em：相对父元素的 font-size（嵌套时会累乘）
rem：相对根元素（html）的 font-size，不会累乘
vw/vh：视口宽度的 1% / 视口高度的 1%
建议：
• 字体大小用
rem，方便全局调整• 间距用
em，随字体缩放• 响应式布局用
vw/vh 或百分比• 移动端常用方案：html 设置
font-size = vw，然后用 rem 布局 查看答案即标记为已答
容器属性：
•
•
•
•
•
子元素属性：
•
•
•
vs Flexbox：Grid 适合二维布局，Flexbox 适合一维布局。可组合使用。
•
display: grid•
grid-template-columns: repeat(3, 1fr) — 三等分列•
grid-template-rows: auto 1fr auto•
gap: 16px — 行列间距•
grid-template-areas — 命名区域布局子元素属性：
•
grid-column: 1 / 3 — 跨列•
grid-row: 1 / 3 — 跨行•
grid-area: header — 指定区域vs Flexbox：Grid 适合二维布局，Flexbox 适合一维布局。可组合使用。
查看答案即标记为已答