1. Flexbox和Grid布局都是为了解决布局问题，但它们有什么不同？
- Flexbox（弹性盒模型）是一维布局模型，用于处理单行或单列的布局。它适用于构建灵活的、动态的布局，并通过
flex-direction属性控制主轴的方向（水平或垂直）。 - Grid布局是二维网格布局模型，用于处理多行多列的布局。它允许您以网格形式排列元素，并通过
grid-template-columns和grid-template-rows属性定义列和行的布局。
2. CSS中的“overflow”属性与布局有什么关系？有哪些常见的使用场景？
overflow属性用于控制元素内容溢出容器时的处理方式。- 常见使用场景包括：
- overflow: hidden;：隐藏溢出部分，通常用于创建裁剪效果。
- overflow: scroll;：添加滚动条以处理溢出内容。
- overflow: auto;：自动决定是否显示滚动条，仅在内容溢出时显示滚动条。
- overflow: visible;：溢出内容可见，可能会超出容器边界。
3. 在CSS中，如何使用“position”属性和“z-index”属性实现元素的层级关系？
- 使用
position属性设置元素的定位方式（如relative、absolute、fixed），然后通过z-index属性设置层级关系。z-index值大的元素位于上层。 - 注意，
z-index属性只在元素的position值不为static时生效，且只对定位元素有效。
4. CSS中的“@keyframes”有什么作用？如何使用它来创建动画？
@keyframes用于定义CSS动画的关键帧，指定在动画过程中元素的状态和属性值。- 创建动画的步骤：
- 使用
@keyframes定义动画关键帧，指定不同时间点的样式。 - 将动画关键帧应用到元素，通常使用
animation属性。 - 设置动画的持续时间、动画方式等。
5. Flexbox和Grid布局都可以实现复杂布局，它们之间的主要区别是什么？
- 主要区别：
- 维度：Flexbox是一维布局，用于排列单行或单列的元素；Grid布局是二维布局，用于排列多行多列的元素。
- 适用场景：Flexbox适用于创建灵活的、动态的布局，如导航菜单、等高列；Grid布局适用于创建复杂的网格结构，如整体页面布局。
- 控制：Flexbox通过
flex-direction等属性控制主轴和交叉轴；Grid通过grid-template-columns和grid-template-rows控制列和行。 - 子元素：Flexbox的子元素（项目）通常在同一轴上排列；Grid布局的子元素可在两个轴上自由定位。
6. 在实践中，你如何处理CSS代码的可维护性问题？
- 使用模块化和组件化CSS，将样式分解成小模块，提高可维护性。
- 使用BEM（块、元素、修饰符）命名规范，增加可读性和维护性。
- 避免使用全局样式，使用局部样式作用域。
- 注释代码以解释样式的用途和结构。
- 使用CSS预处理器（如Sass或Less）提高代码复用性和可维护性。
- 定期进行代码审查和重构，确保代码质量和可维护性。
7. 你有没有使用过CSS预处理器（如Sass或Less）？它们在实践中有什么优势？
- CSS预处理器（如Sass或Less）提供了变量、嵌套、混合（Mixin）、继承等功能，有以下优势：
- 提高代码复用性和可维护性。
- 减少样式表的重复代码。
- 使用变量和混合减少错误。
- 使样式更结构化和清晰。
- 支持嵌套，减少选择器的层级。
- 可以通过编译生成标准CSS。
8. 请解释一下CSS中的“box-sizing”属性和“border-box”模型。
box-sizing属性用于定义元素的盒模型计算方式。border-box模型将元素的总宽度包括了内容区域、内边距和边框，而不是只计算内容区域。这意味着在border-box模型下，通过设置元素的宽度和内边距等属性不会改变元素的总宽度，有助于更精确地控制元素的尺寸。
9. 在CSS中，如何使用“position”属性和“top”、“left”、“right”、“bottom”属性实现元素的定位？
- 使用
position属性设置元素的定位方式（如relative、absolute、fixed）。 - 使用
top、left、right、bottom属性设置元素相对于其定位上下文的位置。 - 例如，要将元素相对于其
包含块上移20像素，可以这样设置：
css position: relative; top: -20px;
10. CSS中的“@import”和“@media”有什么作用？在实践中如何使用它们？
- `@import`：用于在CSS文件中引入其他CSS文件，可以用来拆分和组织样式代码。通常放在样式表的顶部。 - `@media`：用于创建媒体查询，根据不同的屏幕尺寸或设备条件应用不同的CSS样式。常用于实现响应式布局。 示例： ```css /* 使用@import引入外部样式表 */ @import url("external.css"); /* 使用@media定义媒体查询 */ @media (max-width: 768px) { /* 响应式样式 */ body { font-size: 14px; } } ```
