CSS布局与技巧

本文将简单介绍如何使用CSS做出以下效果：

左右布局
左中右布局
水平居中
垂直居中
其他小技巧

一、左右布局

左边定宽，右边自适应

position + margin

.left {position: absolute;top: 0;left: 0;width: 150px;background: red;}
.right {margin-left: 160px;background: green;}

<div class="left">左边position+定宽</div>
<div class="right">右边自适应</div>

float + overflow

.left {margin-right: 10px; // 如需设置两列之间的间距float: left;width: 150px;background: red;}
.right {overflow: auto;background: gray;}

<div class="left">左边float+定宽</div>
<div class="right">右边自适应</div>

二、左中右布局

三列布局通常是两侧定宽，中间自适应，布局方案类似于二列布局
1.posotion + margin

.left {position: absolute;top: 0;left: 0;width: 150px;background: red;}
.right {position: absolute;top: 0;right: 0;width: 150px;background: gray;}
.main{margin:0 160px;background: green;}

<div class="left">左边position+定宽</div>
<div class="main">中间自适应</div>
<div class="right">右边position+定宽</div>

float + overflow + margin

.left {float: left;width: 150px;background: red;}
.right {float: right;width: 150px;overflow: auto;background: gray;}
.main {margin: 0 160px;background: green;}// 注意排列顺序为left、right、main

<div class="left">左边float+定宽</div>
<div class="right">右边float+定宽</div>
<div class="main">中间margin+宽度自适应</div>

圣杯布局
float + 负margin + padding + position
特点：两侧定宽，中间自适应
思路：

按main、left、right排序；
三者都float:left;
中间栏设置width:100%，左右两侧栏设置一定值width(如此例中的150和100)；
此时中间栏独占一行，把左右两侧栏挤下去了，设置左侧栏margin-left:-100%，将左侧栏拉上来至第一栏处；同理，设置右侧栏margin-left:-100px，将右侧栏拉上来至第三栏处；
此时会发现中间栏的头部和尾部分别被左右两栏的覆盖了，所以设置父元素padding：0 100px 0 150px，给左右两栏留出足够的空间，然后再把左右两栏相对定位至留空的地方（position:relative）;

.content {padding: 0 100px 0 150px;overflow: hidden; //用于清除浮动}
.main {float: left;width: 100%;background: green;}
.left {float: left;position: relative;left: -150px;margin-left: -100%;width: 150px;background: red;}
.right {float: left;position: relative;right:-100px;margin-left: -100px;width: 100px;background: gray;}

<div class="content">
    <div class="main">中间自适应</div>
    <div class="left">左边定宽</div>
    <div class="right">右边定宽</div>
</div>

双飞翼布局
float + 负margin + margin
特点：两侧定宽，中间自适应
思路：类似于圣杯布局
1~4思路同圣杯布局一样；
5.不在父元素上设置padding，而是在中间栏里再添加一层div，设置margin：0 100px 0 150px，这样，中间栏的宽度就会缩小至左右两侧之间，而不会被其覆盖，省掉了对两侧栏设置相对布局的步骤;

.content {overflow: hidden;}.main {float: left;width: 100%;}
.main-content {margin: 0 100px 0 150px;background: green;}
.left {float: left;margin-left: -100%;width: 150px;background: red;}
.right {float: left;margin-left: -100px;width: 100px;background: gray;}

<div class="content">
    <div class="main">
         <div class="main-content">中间自适应</div>
    </div>
    <div class="left">左边定宽</div>
    <div class="right">右边定宽</div>
</div>

三、水平居中

文字水平居中

text-align:center;

容器水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。

div#container {
　　　　width:760px;
　　　　margin:0 auto;
　　}

四、垂直居中

文字垂直居中
单行文字的垂直居中，只要将行高与容器高设为相等即可。
比如，容器中有一行数字。

<div id="container">1234567890</div>

然后CSS这样写：

div#container {height: 35px; line-height: 35px;}

如果有n行文字，那么将行高设为容器高度的n分之一即可。

容器的垂直居中
比如，有一大一小两个容器，请问如何将小容器垂直居中

<div id="big">
　　　　<div id="small">
　　　　</div>
</div>

首先，将大容器的定位为relative

div#big{
 　　　　position:relative;
 　　　　height:480px;
}

然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

div#small {
　　　　position: absolute;
　　　　top: 50%;
　　　　height: 240px;
　　　　margin-top: -120px;
}

使用同样的思路，也可以做出水平居中的效果。

五、其他小技巧

搜索: 关键词 MDN
CSS Tricks
搜索: 阮一峰 css
张鑫旭的 240 多篇 CSS 博客

本文参考资料：
CSS常见布局方案归纳
 CSS使用技巧