前端面试中常见的 CSS 相关问题

CSS3新增了圆角、阴影、渐变、动画、变形、多列布局、弹性盒模型、媒体查询等特性。

Flexbox 方案：

css 复制代码

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

绝对定位 + Transform：

css 复制代码

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Grid 方案：

css 复制代码

.parent {
  display: grid;
  place-items: center;
}

作用：隔离内部元素，避免外边距合并，阻止浮动元素覆盖。
触发条件：
- float 非 none；
- overflow 非 visible；
- display: inline-block/table-cell/flex；
- position: absolute/fixed。

设置父元素的高度：在已知子元素高度的情况下，可以在CSS中手动设置父元素的高度
空 div 清除法 （传统方案）：在浮动元素末尾插入一个空 div，通过 CSS 的 clear:both 属性清除浮动影响。
伪元素 ::after 清除（Clearfix Hack） ：利用伪元素 ::after 创建一个匿名元素，然后将其 clear 属性设置为 both，可以达到清除浮动的目的。这是一种更为优雅的方式，不需要额外的HTML标记。
css 复制代码
```
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
```
父元素触发 BFC ：父元素设置 overflow: auto。

优先级从高到低：

主轴（main axis）与交叉轴（cross axis） ：由 flex-direction 决定方向。
常用属性：
- 容器：flex-direction, justify-content, align-items, flex-wrap。
- 子项：flex-grow, flex-shrink, flex-basis。

基础用法：

css 复制代码

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

媒体查询（Media Queries） ：

scss 复制代码

@media (max-width: 768px) {
  /* 移动端样式 */
}

移动端适配：

ini 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

运行 HTML

过渡（Transition） ：平滑状态变化。
css 复制代码
```
.box {
  transition: all 0.3s ease-in;
}
```

关键帧动画（Keyframes） ：

css 复制代码

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

示例：

css 复制代码

$primary-color: #333;
.button {
  background: $primary-color;
  &:hover { background: darken($primary-color, 10%); }
}