CSS 核心知识点

CSS (Cascading Style Sheets) 用于网页的样式设计和布局。

1. 盒模型 (Box Model)

• 标准盒模型 (box-sizing: content-box): width = content
• IE/怪异盒模型 (box-sizing: border-box): width = content + padding + border (推荐)

* {
  box-sizing: border-box;
}

2. 布局 (Layout)

2.1 Flexbox (一维布局)

• 容器: justify-content (主轴), align-items (交叉轴), flex-direction, flex-wrap
• 项目: flex: 1 (简写: flex-grow, flex-shrink, flex-basis)

2.2 Grid (二维布局)

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  gap: 10px;
}

2.3 定位 (Position)

• static: 默认。
• relative: 相对自身原位置偏移，不脱离文档流。
• absolute: 相对最近的非 static 祖先定位，脱离文档流。
• fixed: 相对视口定位。
• sticky: 粘性定位，基于滚动位置在 relative 和 fixed 之间切换。

3. BFC (Block Formatting Context)

块级格式化上下文，形成独立的渲染区域。 触发条件: overflow 不为 visible, float 不为 none, position 为 absolute/fixed, display 为 inline-block/flex/grid 等。 应用: 清除浮动、防止 margin 重叠、自适应两栏布局。

4. CSS3 新特性

• 变换 (Transform): translate, rotate, scale
• 过渡 (Transition): 属性变化的动画效果
• 动画 (Animation / @keyframes)
• 选择器: :nth-child, :not, ::before, ::after
• 媒体查询 (@media): 响应式设计基础

5. CSS 预处理器与后处理器

• Sass/Less: 嵌套、变量、Mixin。
• PostCSS: AutoPrefixer (自动添加浏览器前缀)。

6. 经典问题

• 水平垂直居中的方案？ 答： 方案一: Flexbox

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

方案二: 绝对定位 + transform

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

• 1px 边框问题如何解决？ 答： 使用 transform: scaleY(0.5) 或 border-image。

• 清除浮动的方式有哪些？ 答： 使用 BFC、伪元素清除法、设置父元素高度等。

• CSS 优先级 (Specificity) 计算规则？ 答： 内联样式 > ID 选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。权重相同时，后定义的样式优先级更高。

• flex 和 grid 的区别？ 答： Flexbox 适用于一维布局 (行或列)，而 Grid 适用于二维布局 (行和列)。flex只能一行或者一列，而grid可以同时控制行和列。