关于双飞翼布局，圣杯布局，栅格布局的总结

时间 2019-11-17

标签关于双飞布局栅格总结繁體版

原文原文链接

学习前端有段时间了，对于页面布局老是采用相似于这种的方式css

1 <div class="header"></div>
2 <div class="main">
3     <div class="content"></div>
4     <div class="side"></div>
5 </div>
6 <div class="footer"></div>

姑且不论好坏你们都在使用各类布局感受若是不用的话就有点out，因此研究了一下关于css的布局相关知识，在这里总结一下。html

首先是双飞翼布局

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>测试双飞翼布局</title>
        <style>
            .page {
               width: 980px;
               height: 500px;
             }
            .body {
                 height:300px;
            }
            .header,.footer{
                 width: 100%;
                 height: 25px;
                 background-color: #999;
             }
             .main {
                 background:#D6D6D6;
                 float:left;
                 width:100%;
                 height: 300px;
              }
              .left {
                 background:#E79F6D;
                 float:left;
                 width:190px;
                 margin-left:-100%;
                 height: 300px;
              }
              .right {
                 background:#7BD;
                 float:left;
                 width:230px;
                 margin-left:-230px;
                 height: 300px;
              }
              .in{margin:0 230px 0 190px}
        </style>
    </head>
    <body>
          <div class="page">
               <div class="header">这里是头部</div>
               <div class="body">
                     <div class="main">
                           <div class="in">这里是主体内容</div>    
                     </div>
                     <div class="left">这里是侧边栏一</div>
                     <div class="right">这里是额外内容</div>
                 </div>
                <div class="footer">这里是底部</div>    
            </div>    
     <body>
<html>

双飞翼布局优缺点：前端

优势bootstrap

实现了内容与布局的分离，即Eric提到的Any-Order Columns.

main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。

任何一栏均可以是最高栏，不会出问题。

须要的hack很是少（就一个针对ie6的清除浮动hack:_zoom: 1;）

在浏览器上的兼容性很是好，IE5.5以上都支持。

不足浏览器

main须要添加一个额外的包裹层

圣杯布局

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>测试双飞翼布局</title>
        <style>
            .page {
               width: 980px;
               height: 500px;
             }
            .body {
                 height:300px;
                 padding: 0 230px 0 190px;  
            }
            .header,.footer{
                 width: 100%;
                 height: 25px;
                 background-color: #999;
             }
             .main {
                 background:#D6D6D6;
                 float:left;
                 width:100%;
                 height: 300px;
              }
              .left {
                 background:#E79F6D;
                 float:left;
                 width:190px;
                 margin-left:-100%;
                 height: 300px;
                 position:relative;
                 left:-190px;
              }
              .right {
                 background:#7BD;
                 float:left;
                 width:230px;
                 margin-left:-230px;
                 height: 300px;
                 position:relative;
                 right:-230px;
              }

        </style>
    </head>
    <body>
          <div class="page">
               <div class="header">这里是头部</div>
               <div class="body">
                     <div class="main">
                           这里是主体内容
                     </div>
                     <div class="left">这里是侧边栏一</div>
                     <div class="right">这里是额外内容</div>
                 </div>
                <div class="footer">这里是底部</div>    
            </div>    
     <body>
<html>

栅格布局

栅格布局的原理能够经过如下的一张图片表示出来(网上copy来的)框架

几种比较经常使用的栅格系统css框架ide

http://www.megong.com/2011/0302/1458.html布局

960学习

http://960.gs/测试

bootstrap

http://v2.bootcss.com/scaffolding.html#gridSystem