布局面试题及详细答案.docxVIP

布局面试题及详细答案

一、基础必考题（入门级，考察核心基础）

1.请说说CSS中常见的布局方式有哪些？分别适用什么场景？

答案：最常用的有5种，没有绝对最优，全看业务场景，实际工作中经常混合使用：

1.普通流（默认布局）：元素按照HTML结构顺序依次排列，块级元素独占一行（比如div、p），行内元素并排（比如span、a）。适用场景：简单页面，不需要复杂排版，比如纯文本展示、简单图文组合（如文章详情页）。

2.浮动布局（float）：让元素脱离普通流，向左/向右浮动，围绕它的元素会自动环绕。适用场景：图文环绕（比如新闻正文里的图片靠左/右，文字环绕）、简单的多列布局（比如顶部导航栏的菜单排列，早期常用）。注意：浮动会导致父元素塌陷，需要清除浮动（比如给父元素加clearfix类，或设置overflow:hidden）。

3.定位布局（position）：分为static（默认）、relative、absolute、fixed、sticky，核心是控制元素的精确位置。适用场景：

-relative：相对自身原有位置偏移，不脱离普通流，常用于作为absolute的父容器（比如子元素要相对于父元素定位，父元素设relative）；

-absolute：脱离普通流，相对于最近的已定位父元素（非static）定位，适用弹窗、下拉菜单、元素叠加（比如商品卡片上的“热销”标