🎨
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 适合一维布局。可组合使用。
查看答案即标记为已答