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