前端经典面试题合集, CSS 有哪些常用单位?这些单位各有什么区别?
前端经典面试题合集, CSS 有哪些常用单位?这些单位各有什么区别?
QA
Step 1
Q:: CSS 有哪些常用单位？这些单位各有什么区别？
A:: CSS 中常用的单位包括像素 (px)、百分比 (%)、em、rem、视口单位 (vw, vh)、ch、ex 等。每个单位的用途和特点如下：
1. **px (像素)**：绝对单位，用于定义元素的精确尺寸，不随屏幕大小变化。
2. **% (百分比)**：相对单位，基于父元素的尺寸进行计算，常用于布局。
3. **em**：相对单位，基于元素的字体大小。1em 等于当前元素的字体大小。
4. **rem**：相对单位，基于根元素的字体大小 (html 元素)。1rem 等于根元素的字体大小。
5. **vw (视口宽度)**：相对单位，1vw 等于视口宽度的 1%。
6. **vh (视口高度)**：相对单位，1vh 等于视口高度的 1%。
7. **ch**：相对单位，1ch 等于元素字体的 '0' 字符的宽度。
8. **ex**：相对单位，1ex 等于元素字体的 'x' 字符的高度。
Step 2
Q:: 什么是 CSS Flexbox？它的应用场景是什么？
A:: CSS Flexbox 是一种用于创建响应式布局的布局模型。它使得元素在容器中能够根据规则进行排列和对齐，适合用于一维布局（单行或单列）。常用场景包括导航栏、弹性盒布局、水平和垂直居中、复杂的网格布局等。通过 flexbox，可以更轻松地实现各种复杂布局，而无需使用浮动或定位。
Step 3
Q:: 解释 CSS Grid 布局的基本概念和用法。
A:: CSS Grid 布局是一个强大的二维布局系统，使得我们可以创建复杂的网页布局。基本概念包括：
1. **Grid 容器**：通过 display: grid 定义。
2. Grid 项目：容器内的子元素。
3. **网格轨道**：由行轨道 (rows) 和列轨道 (columns) 组成。
4. 网格线：行和列的分隔线。
基本用法包括定义网格模板、设置行和列的尺寸、放置网格项目等。CSS Grid 能够简化许多复杂的布局，如多列布局、卡片布局、图片画廊等。
Step 4
Q:: 如何实现 CSS 响应式设计？
A:: CSS 响应式设计的实现方法包括：
1. **媒体查询 (Media Queries)**：根据不同的屏幕尺寸应用不同的样式规则。
2. **流式布局 (Fluid Layout)**：使用百分比、vw、vh 等相对单位，使布局元素根据视口大小动态调整。
3. **弹性盒 (Flexbox)** 和 **网格布局 (Grid Layout)**：通过弹性和网格布局模型，使页面元素在不同屏幕上灵活调整。
4. **视口 meta 标签**：<meta name='viewport' content='width=device-width, initial-scale=1.0'> 确保移动设备能够正确缩放和调整布局。响应式设计可以使网站在各种设备（如手机、平板、桌面电脑）上都具有良好的用户体验。
Step 5
Q:: 什么是 CSS 预处理器？列举一些常见的预处理器。
A:: CSS 预处理器是一种用于增强 CSS 功能的工具，通过引入变量、嵌套、模块化、函数等高级特性，使得 CSS 编写更加高效和可维护。常见的 CSS 预处理器包括：
1. **Sass (Syntactically Awesome Stylesheets)**
2. **LESS (Leaner Style Sheets)**
3. Stylus
使用预处理器可以大大提高 CSS 开发效率，尤其是对于大型项目，能够更好地组织和管理样式代码。