CSS面试必备：Flex布局与关键属性解析

"这是一份关于CSS面试题的文档，涵盖了从Flex弹性盒子模型到CSS选择符，优先级，以及新特性的多个知识点。" 1. Flex弹性盒子模型：Flex布局是CSS3的一项重要特性，用于解决复杂的网页布局问题。通过设置`display: flex`，父元素变为flex容器，其子元素称为flex项目。主轴（默认水平方向）和交叉轴（垂直于主轴）定义了项目的排列方式。关键属性包括： - `flex-direction`：控制项目的排列方向，如`row`（默认）、`row-reverse`、`column`和`column-reverse`。 - `flex-wrap`：控制是否允许项目换行，可设置为`nowrap`（默认，不换行）、`wrap`（换行）和`wrap-reverse`。 - `justify-content`：沿主轴调整项目之间的空间，有`flex-start`、`flex-end`、`center`、`space-between`、`space-around`和`space-evenly`等选项。 - `align-items`：沿交叉轴调整项目，可选值有`flex-start`、`flex-end`、`center`、`baseline`和`stretch`。 2. 外边距塌陷：当两个或多个盒模型的相邻外边距相遇时，会发生塌陷，通常发生在同一级别的块级元素中。可以通过设置`margin`为负值，或者使用`overflow`、`border`、`padding`等方式来避免。 3. 清除浮动：为了解决浮动元素导致的父元素高度塌陷问题，可以使用`clear:both`、`clearfix`类或者`overflow:hidden`等方法。 4. 定位：CSS中的定位包括`static`（默认值，不进行定位）、`relative`（相对于其正常位置定位）、`absolute`（相对于最近的非静态定位祖先元素定位）和`fixed`（相对于浏览器窗口定位）。 5. 行内元素与行内块元素：行内元素如`<span>`不会影响周围元素的布局，而行内块元素如`<img>`在保持行内元素特性的同时，宽度和高度可以设置。消除行内块的空白间隙，可以设置`font-size: 0`或使用`display`属性。 6. 浮动的影响：浮动元素会脱离标准文档流，影响周围元素布局。可能导致父元素高度塌陷，需要通过清除浮动来解决。 7. 代替浮动的方案：使用`display: inline-block`、`display: flex`或`display: grid`等现代布局方式。 8. 水平垂直居中：有多种方法实现，如`text-align: center`配合`vertical-align: middle`（适用于行内元素），`margin: auto`（适用于块级元素且需设定固定宽度），`display: flex`或`display: grid`的居中属性等。 9. CSS引入方式：`link`和`@import`都是引入外部样式表的方式。`link`是HTML标签，可以并行加载，支持浏览器缓存，而`@import`是CSS语句，需等待整个页面解析完后才加载，但支持媒体查询。 10. CSS选择符和优先级：选择符包括元素选择器、类选择器、ID选择器、属性选择器等。可继承的属性有`color`、`font`等。优先级计算为：内联样式`!important` > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器。内联样式和`!important`具有相同优先级，但`!important`在两者冲突时胜出。 11. 隐藏元素：可用`display: none`、`visibility: hidden`或`opacity: 0`等方式实现。 12. 实现三角形：利用边框塌陷和透明边框创建。 13. 2D、3D变换和动画：CSS3提供了`transform`、`transition`和`animation`属性，实现元素的位移、旋转、缩放等2D和3D效果。 14. 回流与重绘：回流（reflow）是元素几何尺寸或位置的改变，导致整个或部分渲染树需要重新布局；重绘（repaint）是元素外观的改变，如颜色、背景等，只涉及视觉效果的更新。 15. `src`与`href`：`src`用于引入外部资源，如图片、脚本等；`href`用于链接外部资源，如链接到其他页面或样式表。 16. 英文单词首字母大写：可以使用CSS的`text-transform: capitalize`属性实现。 17. `px`、`em`和`rem`：`px`是固定单位，`em`基于父元素字体大小，`rem`基于根元素字体大小。 18. CSS3新特性：包括但不限于渐变、阴影、动画、过渡、多列布局、Flexbox、Grid布局、伪元素和伪类、边框圆角、 rgba()颜色、透明度、响应式设计等。 19. CSSprites（精灵图）：将多个小图像合并到一张大图上，通过CSS的背景定位来显示需要的部分，减少HTTP请求，提高页面加载速度。优点是减少网络请求，缺点是图片管理复杂，不易维护。 20. `:link`、`:visited`、`:hover`、`:active`顺序：LVHA，即链接未访问、已访问、鼠标悬停和活动状态的顺序。 21. BFC（块格式化上下文）：BFC是块级元素渲染规则的一个独立区域，用于解决元素间的布局相互影响问题。可通过创建新的BFC来避免外边距塌陷、实现自适应两栏布局等。 以上是CSS面试题中的关键知识点，这些内容对于理解和掌握CSS布局、样式控制及优化至关重要。