共计 4453 个字符，预计需要花费 12 分钟才能阅读完成。
对于前端来说，布局也是必须掌握的，一个好的布局可以让页面看起来更美观。提到布局，那就不得不说 CSS 三栏布局。这是前端面试经常会问到的一个问题，算是基础题。所谓的三栏布局，一般是指左右两边固定中间自适应，或者是中间固定左右两边自适应。
左右两边固定中间自适应
圣杯布局
HTML 结构设置新建一个父元素，包含三个子元素：left、main、right（注意，main 在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）
style 样式设置
1、父元素设置高度 2、三个元素均设置浮动 3、中间 main 部分定宽 100%：width: 100%，左右两边按产品需求设置宽高 4、左边设置 margin-left: -100%；右边设置 margin-right: - 右盒子宽 5、父元素设置 padding-left: 左盒子宽；padding-right: 右盒子宽 6、左右盒子相对定位
<div class=”container”>
<div class=”main f”>
go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead
</div>
<div class=”left f”></div>
<div class=”right f”></div>
</div>
<style>
body {
min-width: 700px;
}
.container {
height: 300px;
padding: 0 200px 0 200px;
}
.f {
float: left;
}
.main {
width: 100%;
height: 300px;
background-color: cornflowerblue;
}
.left {
width: 200px;
height: 300px;
background-color: indianred;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 300px;
background-color: lightgreen;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
该布局受内部元素影响而破坏布局的概率低，但是当浏览器屏幕缩小的一定程度时，左右两侧的内容会掉下来，或发生重叠现象。解决方案，给 body 加一个最小宽度（起码大于左右两侧宽度之和）
双飞翼布局
与圣杯布局的思路是一致的，只是有一些细微的差别。
HTML 结构设置新建一个父元素，包含三个子元素：left、main、right（注意，main 在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）
style 样式设置
1、父元素设置高度 2、三个元素均设置浮动 3、中间 main 部分定宽 100%：width: 100%，左右两边按产品需求设置宽高 4、中间 main 部分再加一个盒子 inner，放置内容（与圣杯布局的不同点）5、左边设置 margin-left: -100%；右边设置 margin-right: - 右盒子宽 6、新添加盒子，inner，设置左右 padding 或 margin
<div class=”container”>
<div class=”main f”>
<div class=inner>
go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead
</div>
</div>
<div class=”left f”></div>
<div class=”right f”></div>
</div>
<style>
.container {
height: 300px;
}
.f {
float: left;
}
.main {
width: 100%;
height: 300px;
background-color: cornflowerblue;
}
.left {
width: 200px;
height: 300px;
background-color: indianred;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: lightgreen;
margin-left: -200px;
}
.inner {
padding: 0 200px 0 200px;
}
</style>
自身浮动
HTML 结构设置新建三个元素：left、right、main（注意，main 写在后面）
style 样式设置
1、左盒子左浮动，右盒子右浮动 2、中间部分设置 margin 值
<div class=”left”></div>
<div class=”right”></div>
<div class=”main”> 我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容 </div>
<style>
.main {
margin: 0 200px 0 200px;
background-color: red;
height: 200px;
}
.left {
float: left;
width: 200px;
background-color: blue;
height: 200px;
}
.right {
float: right;
width: 200px;
background-color: pink;
height: 200px;
}
</style>
CSS3 新特性：flex
HTML 结构设置新建一个父元素，包含三个子元素：left、main、right（注意，main 写在中间）
style 样式设置
1、父元素设置宽度为 100%，display: flex；2、左右两则按产品需求设置宽高 3、中间部分设置 flex: 1；
<div class=”container”>
<div class=”left”></div>
<div class=”right”></div>
<div class=”main”>
go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead
</div>
</div>
<style>
.container {
width: 100%;
height: 200px;
display: flex;
}
.main {
flex: 1;
background-color: red;
height: 200px;
}
.left {
width: 200px;
background-color: blue;
height: 200px;
}
.right {
width: 200px;
background-color: pink;
height: 200px;
}
</style>
还有其他的写法，这里就不一一赘述，只是列举了一些比较常用的，以及面试可能会问到的情况。CSS3 还有很多好玩的特性，在工作和学习的过程中值得深入研究。
中间固定左右两边自适应
浮动 + 负边距（圣杯布局）
HTML 结构设置新建一个父元素，包含三个子元素：left、main、right（注意，main 写在中间）
style 样式设置
1、左右两边各占 50% 的宽度 2、左边负边距 margin-left 占中间 div 宽度的一半 3、右边负边距 margin-right 也占中间 div 宽度的一半
<div class=”container”>
<div class=”left”></div>
<div class=”main”> 我是中间内容 </div>
<div class=”right”></div>
</div>
<style>
.main {
width: 100px;
text-align: center;
float: left;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
float: left;
width: 50%;
margin-left: -50px;
background-color: pink;
}
.right {
height: 300px;
float: right;
width: 50%;
margin-right: -50px;
background-color: cornflowerblue;
}
</style>
CSS3 新特性：flex
HTML 结构设置新建一个父元素，包含三个子元素：left、main、right
style 样式设置
1、父元素设置 display: flex；flex-direction: row；2、左右设置 flex-grow: 1，平分剩余空间
<div class=”container”>
<div class=”left”></div>
<div class=”main”> 我是中间内容 </div>
<div class=”right”></div>
</div>
<style>
.container {
display: flex;
flex-direction : row;
}
.main {
width: 200px;
height: 300px;
text-align: center;
background-color: lightgreen;
}
.left {
height: 300px;
flex-grow: 1;
background-color: pink;
}
.right {
height: 300px;
flex-grow: 1;
background-color: cornflowerblue;
}
</style>
CSS3 特性 calc(四则运算)
用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 50px)。
<div class=”container”>
<div class=”left”></div>
<div class=”main”> 我是中间内容 </div>
<div class=”right”></div>
</div>
.container {
width: 100%;
height: 300px;
}
.f {
float: left;
}
.main {
width: 100px;
text-align: center;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
background-color: pink;
width: calc(50% – 50px); /* 平分中间部分的宽度 */
}
.right {
height: 300px;
background-color: cornflowerblue;
width: calc(50% – 50px); /* 平分中间部分的宽度 */
}
