css经典布局面试题

掌握核心布局，应战面试难题

在前端开发面试中，css布局相关的问题是高频考点。下面就为大家详细介绍几种常见的css经典布局面试题。

水平居中布局

水平居中是最常见的布局需求之一。对于行内元素，可以通过设置其父元素的 text-align:center 来实现。例如：

html 代码：

<div class="parent"><span>这是行内元素</span></div>

css 代码：

.parent { text-align: center; }

对于块级元素，如果宽度固定，可以使用 margin: 0 auto 来实现水平居中。示例如下：

html 代码：

<div class="parent"><div class="child">这是块级元素</div></div>

css 代码：

.child { width: 200px; margin: 0 auto; }

垂直居中布局

垂直居中也是面试中常考的点。对于单行文本的垂直居中，可以通过设置 line-height 等于元素的高度来实现。比如：

html 代码：

<div class="box">单行文本</div>

css 代码：

.box { height: 50px; line-height: 50px; }

对于块级元素的垂直居中，当父元素和子元素高度都固定时，可以使用绝对定位和负边距的方法。示例：

html 代码：

<div class="parent"><div class="child">块级元素</div></div>

css 代码：

.parent { position: relative; height: 200px; }

.child { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; width: 100px; height: 50px; }

两栏布局

两栏布局通常是一侧宽度固定，另一侧宽度自适应。可以使用浮动来实现。例如：

html 代码：

<div class="left">左侧固定宽度</div><div class="right">右侧自适应宽度</div>

css 代码：

.left { float: left; width: 200px; }

.right { margin-left: 200px; }

三栏布局

三栏布局常见的是左右两侧宽度固定，中间宽度自适应。经典的实现方式是圣杯布局。示例代码如下：

html 代码：

<div class="container"><div class="center">中间自适应</div><div class="left">左侧固定</div><div class="right">右侧固定</div></div>

css 代码：

.container { padding: 0 200px; }

.center { float: left; width: 100%; }

.left { float: left; width: 200px; margin-left: -100%; position: relative; left: -200px; }

.right { float: left; width: 200px; margin-left: -200px; position: relative; right: -200px; }

等高布局

等高布局是让多个列的高度保持一致。可以使用背景模拟的方法。例如：

html 代码：

<div class="wrapper"><div class="column">列 1</div><div class="column">列 2</div></div>

css 代码：

.wrapper { overflow: hidden; background: #ccc; }

.column { float: left; width: 50%; padding-bottom: 9999px; margin-bottom: -9999px; }

以上这些 css 经典布局面试题涵盖了常见的布局场景，掌握这些布局的实现方法，能让你在面试中更加从容应对。