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

前端布局面试题及详细答案

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

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

答案：常见布局方式有5种，核心用途贴合实际开发，不搞虚的：

1.正常流（文档流）：默认布局，元素按“块级占一行、行内并排”排列，不需要额外写CSS，适合简单的文字、图片排版（比如文章正文、普通列表）。

2.浮动（float）：通过float:left/right让元素脱离文档流，向左右浮动，适合“文字环绕图片”“简单的多列布局”（注意：浮动后父元素会塌陷，需要清除浮动，常用clear:both或父元素BFC）。

3.定位（position）：分4种，核心用于“元素精准定位”：

-static：默认值，正常流布局，不受top/left等属性影响；

-relative：相对自身原有位置定位，不脱离文档流，常用于作为absolute的父容器；

-absolute：绝对定位，脱离文档流，相对于最近的已定位父元素（非static）定位，适合弹窗、导航栏下拉菜单；

-fixed：固定定位，脱离文档流，相对于浏览器窗口定位，滚动时不移动，适合顶部导航栏、右侧悬浮按钮。

4.Flex布局（弹性布局）：最常用的现代布局，通过给父容器设置display:flex，子元素自动成为弹性项，可轻松实现“水平居中、垂直居中、均匀分布”，适合移动端、响应式布局