- 正确答案：CSS布局是指通过CSS控制HTML元素在页面中的排列方式，常见的布局方式包括浮动布局、定位布局、Flexbox布局、Grid布局等。CSS选择器用于选中HTML文档中的特定元素，以便为其应用样式，常见选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器以及组合选择器（如后代选择器、子选择器、相邻兄弟选择器等）。 - 解答思路：首先明确CSS布局和选择器是CSS的两大核心部分。布局决定元素的位置和尺寸关系，选择器决定哪些元素被选中并应用样式。回答时应分别从布局类型和选择器类型两个维度展开，结合实际使用场景说明其工作原理和适用情况，并深入讲解底层机制，如盒模型、层叠上下文、重排与重绘等。 - 深度知识讲解： 1. CSS布局详解： a. 传统布局方法： - 浮动布局（float）：通过float:left/right使元素脱离正常文档流并向左或右移动，其他内容环绕其周围。常用于图文混排或早期多列布局。但容易造成父容器高度塌陷，需清除浮动（clear:both 或使用BFC）。 - 定位布局（position）： static：默认值，遵循正常文档流。 relative：相对自身原始位置偏移，不脱离文档流。 absolute：相对于最近的已定位祖先元素进行定位，脱离文档流。 fixed：相对于视口定位，脱离文档流，常用于固定导航栏。 sticky：混合relative和fixed，滚动到某点后变为fixed。 b. 现代布局方法： - Flexbox（弹性布局）：适用于一维布局（行或列）。容器设置display:flex后，子元素成为flex item，可通过flex-direction、justify-content、align-items等属性控制主轴和交叉轴对齐方式。核心概念：主轴（main axis）、交叉轴（cross axis）、flex-grow、flex-shrink、flex-basis。底层实现：浏览器引擎根据flex因子计算每个item的最终尺寸，动态分配剩余空间。 - Grid（网格布局）：适用于二维布局（行和列）。容器设置display:grid后，可通过grid-template-columns/rows定义网格轨道，grid-gap设置间距，grid-area命名区域。优势：可以精确控制行列结构，支持隐式网格和显式网格。 c. 响应式布局技术： - 媒体查询（@media）：根据设备特性（如屏幕宽度）应用不同样式。 - 百分比布局、rem/em单位、vw/vh视口单位：实现可伸缩界面。 2. CSS选择器详解： a. 基本选择器： - 元素选择器：div { } - 类选择器：.class-name { } - ID选择器：#id-name { }（唯一性，优先级高） - 通配符选择器：* { } b. 组合选择器： - 后代选择器：A B { }（B在A内任意层级） - 子选择器：A > B { }（B是A的直接子元素） - 相邻兄弟选择器：A + B { }（B紧接在A之后且同父） - 通用兄弟选择器：A ~ B { }（B在A之后的所有同级） c. 属性选择器： - [attr]：存在属性 - [attr=value]：属性等于值 - [attr^=value]：前缀匹配 - [attr$=value]：后缀匹配 - [attr*=value]：包含子串 d. 伪类选择器： - :hover, :focus, :active —— 用户交互状态 - :first-child, :last-child, :nth-child(n) —— 结构性伪类 - :not() —— 否定选择器 - :root —— 根元素（html） - :empty —— 无子元素（包括文本节点） e. 伪元素选择器： - ::before, ::after —— 在元素前后插入生成内容（需配合content） - ::first-line, ::first-letter —— 首行/首字母样式 - ::selection —— 用户选中文本样式 3. 选择器优先级计算（特异性 Specificity）：优先级由四部分组成：(a, b, c, d) a = 内联样式（style=""）→ 1000 b = ID选择器数量 → 100 c = 类、属性、伪类选择器数量 → 10 d = 元素、伪元素选择器数量 → 1 示例： #nav li.active → (0,1,1,1) = 111 ul li:hover → (0,0,1,2) = 12 .sidebar #title → (0,1,1,0) = 110 注意：!important 权重最高，但应避免滥用。 4. 渲染机制相关知识点： - 盒模型（Box Model）：content + padding + border + margin 标准盒模型：width = content IE盒模型（box-sizing:border-box）：width = content+padding+border - BFC（块级格式化上下文）：独立渲染区域，防止外边距折叠，清除浮动。触发条件：float非none、position非static/relative、display为flex/grid/table-cell等。 - 重排（reflow）与重绘（repaint）：改变布局属性（如width、position）会触发重排，代价大；改变颜色、背景等仅触发重绘；尽量减少DOM操作频率，使用CSS动画代替JS动画。 5. 实际应用场景举例： - 使用Flex实现居中： .container { display: flex; justify-content: center; align-items: center; height: 100vh; } - 使用Grid创建响应式布局： .grid-container { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; } - 复杂选择器示例： nav ul > li:first-child a:hover { color: red; } // 选中nav下的ul中第一个li的a标签，在悬停时变红 6. 性能优化建议： - 避免使用标签+类的冗余选择器（如div.container应简化为.container） - 减少深层嵌套（影响匹配效率） - 使用类名而非复杂结构选择器提高复用性和性能 - 扩展知识： - CSS-in-JS 和原子化CSS（如Tailwind）正在改变传统CSS编写方式。 - CSS自定义属性（变量）：--main-color: #333; 通过var(--main-color)调用。 - Container Queries（新特性）：基于容器尺寸而非视口进行响应式设计。 - Cascade Layers：解决CSS优先级混乱问题，组织样式层级。 - 代码示例（Flex居中与Grid布局）： HTML:

居中文本

Header

Main Content

CSS: .flex-center { display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid #ccc; } .grid-layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-rows: 60px 1fr 40px; grid-template-columns: 200px 1fr; gap: 10px; height: 300px; } .grid-layout > header { grid-area: header; background: #f8b500; } .grid-layout > aside { grid-area: sidebar; background: #b8e0ba; } .grid-layout > main { grid-area: main; background: #e0e0e0; } .grid-layout > footer { grid-area: footer; background: #9ca3af; } 以上内容涵盖了CSS布局与选择器的核心知识点，既适合面试回答，也具备工程实践指导意义。

途虎养车前端面试

全站热榜

创作者周榜