前端经典面试题合集, 有哪些常见的 CSS 布局?
前端经典面试题合集, 有哪些常见的 CSS 布局?
QA
Step 1
Q:: 有哪些常见的 CSS 布局？
A:: 常见的 CSS 布局有以下几种：1. 普通流布局：元素按顺序排列，默认从上到下，从左到右。2. 浮动布局：使用 float 属性使元素浮动，实现左右排列。3. 定位布局：使用 position 属性（static, relative, absolute, fixed, sticky）来精确定位元素。4. Flexbox 布局：使用 display: flex 使父元素成为弹性容器，通过 flex 子属性来控制子元素的排列方式。5. 网格布局（Grid）：使用 display: grid 使元素按网格排列，可以精确控制每个元素的大小和位置。
Step 2
Q:: Flexbox 和 Grid 布局的区别是什么？
A:: Flexbox 布局主要用于一维布局，即只能控制行或列的排列，而 Grid 布局是二维布局，可以同时控制行和列的排列。Flexbox 更适合组件内部的布局，而 Grid 更适合页面整体布局。
Step 3
Q:: 如何使一个元素水平居中？
A:: 可以使用以下几种方法使元素水平居中：1. inline-block 元素：使用 text-align: center 对父元素进行设置。2. 块级元素：使用 margin: 0 auto。3. Flexbox：父元素设置 display: flex 和 justify-content: center。4. Grid：父元素设置 display: grid 和 justify-items: center。
Step 4
Q:: position: absolute 和 position: relative 的区别是什么？
A:: position: relative 元素相对于其正常位置进行定位，而 position: absolute 元素相对于最近的已定位祖先元素（不包括 static 定位）进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是 body）进行定位。