前端常用布局高频面试题及详细答案（实战向）.docxVIP

前端常用布局高频面试题及详细答案（实战向）

说明：所有题目为一线前端面试高频原题，答案贴合工程实战，摒弃书面化套话，侧重原理、区别、踩坑点和实际应用场景。

一、基础布局概念类

1.标准文档流是什么？默认布局规则有哪些？

答案：

标准文档流是浏览器默认的页面元素排列规则，是所有布局的基础，没有设置浮动、定位、弹性等特殊样式的元素，都会默认遵循文档流规则。

核心规则：

1.块级元素：独占一行，从上到下依次排列，默认宽度100%父级宽度，可设置宽高、内外边距。常见：div、p、h1-h6、ul、li。

2.行内元素：不独占一行，从左到右依次排列，空间不足自动换行。无法设置宽高，上下margin不生效，padding仅视觉生效、不挤占布局。常见：span、a、em、i。

3.行内块元素：兼具两者特点，不独占一行、可同行排列，同时支持设置宽高、内外边距。常见：img、input、button。

面试加分点：文档流的核心是“秩序性、不重叠”，浮动、绝对定位、固定定位会脱离标准文档流，不再遵循默认排列规则。

2.如何区分块级、行内、行内块元素？各自使用场景？

答案：

区分核心看display属性：

-块级：display:block

-行内：display:inline

-行内块：display:inline-block

使用场景：

1.块级：用于页面大结构布局、模