四种常见的布局

Feax 6月 28, 2017

对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看

绝对定位法

左右两栏采用绝对定位，中间的由两边的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 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁

小结

一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。

美观大方的布局加上简洁的代码，加油吧，骚年~