---
title: 四种常见的布局
date: 2017-06-28 16:16:11
tags: [布局, 圣杯]
categories: HTML
---
对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看
[demo](http://jzxer.cn/layout/)
### 绝对定位法
> 左右两栏采用绝对定位，中间的由两边的margin撑开
```html
#main {
margin:0 200px;
background:red;
}
#left{
position:absolute;
top:0;left:0;
width:200px;
background:blue;
height:100%;
}
#right{
position:absolute;
top:0;right:0;
width:200px;
background:green;
height:100%;
}
```
这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象
### 自身浮动法
> 左栏左浮动，右栏右浮动，中间栏放最后
```html
#main {margin:0 200px;background:red;}
#left{float:left;width:200px;background:blue;height:100%;}
#right{float:right;width:200px;background:green;height:100%;}
```
简单而高效，代码还容易理解，适合初学者
### 圣杯布局
```html
//注意元素次序
Main
Left
Right
//习惯性的CSS reset
body,html{
height:100%;
padding: 0;
margin: 0
}
//父元素body空出左右栏位
body {
padding-left: 100px;
padding-right: 200px;
}
//左边元素更改
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
height: 100%;
}
//中间部分
.main {
background: blue;
width: 100%;
height: 100%;
float: left;
}
//右边元素定义
.right {
background: red;
width: 200px;
height: 100%;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
```
稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高
### 双飞翼布局
```html
div class="main">
Main
Left
Right
```
>css样式就是将body上的左右margin值去掉，加在新增的 div 中
这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁
### 小结
一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。
* 美观大方的布局加上简洁的代码，加油吧，骚年~