css常見佈局

時間 2019-11-15

標籤 css 常見佈局欄目 CSS 简体版

原文原文鏈接

聖盃佈局

對於三欄佈局來講，左右兩欄通常放置目錄等簡要信息，中間一欄是主要信息。頁面加載時，用戶最但願第一時間看到的是中間一欄內容，因此根據文檔流加載順序（從上到下），中間一欄必須放在左右兩欄的前面。而實際佈局須要將中間一欄居中放置，因此在佈局的時候就稍有不一樣，這是就須要用到聖盃佈局。（緣由or背景)css

下面是代碼示例：html

<!DOCTYPE html>
<html>
<head>
    <title>聖盃佈局</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="center">Center</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            padding-left:150px;
            padding-right:200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
            position:relative;
            right:-200px;
        }

運行結果：
瀏覽器

須要注意的地方：佈局

在HTML中center是在left和right前面。spa
左右兩欄的寬度是固定的，中間一欄寬度是隨瀏覽器寬度變化而變化code
當left負外邊距使得left脫離container時，會升上去。（right同理）htm
第三步中left和right升上去後會左右擋住center，因此須要container設置padding，在將left和right定位。blog
固然這裏只是簡單的舉例，爲使代碼更加簡潔清楚，container沒有加清浮動，此時他的高度爲0.圖片

聖盃佈局的進化：雙飛翼佈局

雙飛翼佈局是在聖盃佈局上進行改進，當left和right設置負margin，會上升並擋住center，聖盃佈局是採用padding+relative定位，而雙飛翼佈局是採用margin解決。utf-8

　　具體代碼以下

<!DOCTYPE html>
<html>
<head>
    <title>雙飛翼佈局</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="center">
            <div class="center-inner">Center</div>
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .center-inner{
            margin-left: 150px;
            margin-right: 200px;
        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
        }

與聖盃運行結果同樣。

　　須要注意的是

這裏是在center裏面套了一個div，再設置margin值。
left和right沒有使用定位。

聖盃佈局的退化

前面兩個佈局是考慮到中間一欄先加載，但有些場景並不須要，此時能夠很快的獲得簡單的三欄佈局。

　　代碼示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>聖盃佈局退化</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            padding-left: 150px;
            padding-right: 200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-150px;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
            margin-right: -200px;
        }

結果與聖盃佈局同樣。

　　須要注意的是:

在HTML中left放在center的前面。
主要實現的思路：根據文檔流從上到下爲：left-center-right。首先將container設置左右padding，在將left和right設置負margin值，使其恰好落在container的padding中。
不管是三欄佈局仍是兩欄佈局，以上方法都適用。

純浮動佈局

左右兩欄分別向左右浮動，中間設置margin值，寬度自適應。

代碼以下：

<!DOCTYPE html>
<html>
<head>
    <title>純浮動</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;

        }
        .center{
            background: #D6D6D6;
            margin-left: 150px;
            margin-right: 200px;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
        }

運行結果與聖盃佈局同樣。

　　須要注意的點：

浮動的left和right須要放在center前面。浮動前面有非浮動的元素，後面浮動元素只能在其後面。
center的width應爲auto。

絕對定位

純浮動是利用浮動將左右兩欄定位，這裏也能夠絕對定位。center依舊設置margin值留出左右空位。

代碼以下：

<!DOCTYPE html>
<html>
<head>
    <title>絕對定位</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="center">Center</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            position: relative;
        }
        .left{
            background: #34934D;
            width:150px;
            position: absolute;
            top: 0px;
            left: 0px;

        }
        .center{
            background: #D6D6D6;
            margin-left: 150px;
            margin-right: 200px;

        }
        .right{
            background: #EF4400;
            width:200px;
            position: absolute;
            top: 0px;
            right: 0px;
        }

運行結果與聖盃佈局同樣。

須要注意：container須要加position：relative（或其餘非static）。

以上就是幾種常見的佈局，可根據不一樣的場景選擇相應的佈局。若有錯誤的地方還望指出，有更好的佈局歡迎補充。新年的第一篇博客完成啦，接下來要將以前所學的知識寫成一篇篇博文，2017年加油吧！！！