CSS 实现三栏自顺应布局-百分百源码网

CSS 实现三栏自顺应布局

发布时间：09/01 来源：未知浏览：关键词：

所谓三列自顺应规划指的是两边定宽，中心block宽度自顺应。这道题在本年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型规划实现。

1. 基于传统的position和margin等属性停止规划

这里也分为三种办法，离别为绝对定位法，圣杯规划，本身浮动法。

1).绝对定位法

绝对定位法道理是将摆布两边使用absolute定位，由于绝对定位使其离开文档流，后面的center会天然活动到他们上面，然后使用margin属性，留出摆布元素的宽度，既可以使中心元素自顺应屏幕宽度。

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>layout_box</title>
  <link rel="stylesheet" type="text/css" href="../css/layout_box.css">
 </head>
 <body>
  <h3>实现三列宽度自顺应规划</h3>
  <p id = "left">我是左边</p>
  <p id = "right">我是右侧</p>
  <p id = "center">我是中心</p>
 </body>
</html>

css代码：

html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }

该法规划的好处，三个p次序可以任意改动。不足是由于绝对定位，所以假如页面上还有其他内容，top的值需要当心处置，最好能够对css样式停止一个初始化，就像在上面例子中加了一个标题，假如不合错误样式停止初始化，则两边和中心的值会对不齐。别的，随着阅读器窗口缩小，小于200px的时候，会发生紧缩。
结果如图，可以看到中心栏宽度随着屏幕大小伸缩。

2).使用本身浮动法

本身浮动法的道理就是使用对摆布使用离别使用float:left和float:right，float使摆布两个元素离开文档流，中心元素正常在正常文档流中，使用margin指定摆布外边距对其停止一个定位。

HTML代码：

<h3>使用本身浮动法定位</h3>
<p id = "left_self">我是左边</p>
<p id = "right_self">我是右侧</p>
<p id = "center_self">我是中心</p>

css代码：

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}

该规划法的好处是受外界影响小，但是不足是三个元素的次序，center必然要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以必然要放在最后，摆布两个元素位置没有关系。当阅读器窗口很小的时候，右侧元素会被击倒下一行。

3). 圣杯规划

圣杯规划的道理是margin负值法。使用圣杯规划第一需要在center元素外部包括一个p，包括p需要设定float属性使其构成一个BFC，并设定宽度，并且这个宽度要和left块的margin负值停止配合，详细道理参照这里。这里对圣杯规划说明特殊具体。

实现代码：

<h3>使用margin负值法停止规划</h3>
  <p id = "wrap">
   <p id = "center"></p>
  </p>
  <p id = "left_margin"></p>
  <p id = "right_margin"></p>

CSS代码：

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}

该办法在网站规划中非常常见，也是面试常考点，长处是三栏彼此关联，有必然的抗性。需要留意的是，规划中心部分必然要放在前面，摆布次序不限制。关于left快的margin负值必然要等于wrap的宽度。
三种办法实现三栏网页宽度自顺应规划办法见下图。

2 ， css3新特性

在外围包裹一层p，设定为display：flex；中心设定flex：1；但是盒模型默许紧紧受着，可以使用margin操纵外边距。

代码：

<p id = "box">
		 <p id = "left_box"></p>
		 <p id = "center_box"></p>
		 <p id = "right_box"></p>
		</p>

css样式：

#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

留意： center必然要放到中心。

结果图如下：