關於雙飛翼佈局，聖盃佈局，柵格佈局的總結

時間 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>