一個初學者對雙飛翼佈局和聖盃佈局的理解

時間 2019-11-29

標籤一個初學者雙飛佈局理解简体版

原文原文鏈接

Hi！你們好！歡迎你們進入個人博客！
如今好多的大公司寫頁面的時候都會用到三欄佈局，接下來要說的聖盃佈局就是三欄佈局中較爲典型的例子。特色是，左右邊欄寬度固定，中間欄寬度自適應。廢話很少說直接上代碼。css

聖盃佈局：html

咱們先看看最終實現的效果瀏覽器

一、首先看一下html中的結構。（由於瀏覽器加載html文檔的順序是由上到下的，咱們想讓中間欄先加載，咱們只能把中間欄放在最前面）佈局

二、接下來咱們讓middle（中間欄）的寬度爲100%，而後在給左右邊欄設置寬高。spa

.main {
    width: 100%;
    height: 400px;
}
.middle {
    width: 100%;
    background: #fd8c84;
    height: 400px;
}
/*給左邊和右邊的元素設置屬性*/
.left {
    width: 100px;
    height: 400px;
    background: red;
}
.right {
    width: 100px;
    height: 400px;
    background: #1d9fd3;
}

咱們來看一下效果htm

固然這個樣子確定是不行的，咱們接下來在對這個樣式進行修飾blog

三、咱們得保證這三個盒子在同一行顯示，咱們最早想到的固然是float，因此咱們給這三個盒子設置float（一浮全浮）。ip

/*三欄佈局指定是讓他們在一行顯示：因此咱們最早想到的方法就是float*/
.middle, .left, .right {
    float: left;
}

你會發現就算設置了浮動他們還不在同一行顯示，這是爲何呢？文檔

彆着急，那是由於咱們給middle的寬度設置了100%，因此第一行沒有位置了，他們只能在第二行顯示嘍！博客

可是咱們能夠僞裝他們兩個在第一行

四、咱們給middle的父元素設置padding然他把本身的內容壓縮，空出來的部分用來放左右邊欄。

這裏咱們爲何要用padding呢？由於咱們能夠經過box-sizing:border-box;來控制

.main {
            padding: 0 100px;
            box-sizing: border-box;
        }

　　這是你會發現中間欄的兩邊會有100px的留白，這正是咱們要的效果

五、重點部分：利用margin負值的思想

　　1>先將左邊的盒子放在對應的位置

.left {
    position: relative;
    left: -100px;
    margin-left: -100%;
}
注意：咱們給左邊的盒子設置完margin-left:-100%;的時候他會和middle的左邊重合，因此咱們給他加了相對定位（相對本身原來的位置）。
　　2>同理右邊的盒子也作一樣的操做

.right {
    margin-left: -100px;
    position: relative;
    left: 100px;
}
經過上面5個步驟咱們最終實現了聖盃佈局。
所有代碼：

<!DOCTYPE html >
<html lang="en">
<head>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>雙飛翼和聖盃佈局</title>
    <style type="text/css">
        /*我的理解，雙飛翼和聖盃佈局之不過就是三欄佈局中特殊的寫法，下面先對聖盃佈局進行解析*/
        /*第一步：讓中間元素的寬度爲100%*/
        .main {
            width: 100%;
            height: 200px;
        }

        .middle {
            width: 100%;
            background: #fd8c84;
            height: 200px;
        }

        /*給左邊和右邊的元素設置屬性*/
        .left {
            width: 100px;
            height: 200px;
            background: red;
            position: relative;
            left: -100px;
            margin-left: -100%;
        }

        .right {
            width: 100px;
            height: 200px;
            background: #1d9fd3;
            margin-left: -100px;
            position: relative;
            left: 100px;
        }

        /*三欄佈局指定是讓他們在一行顯示：因此咱們最早想到的方法就是float*/
        .middle, .left, .right {
            float: left;
        }

        /*咱們會發現他們並不在同一行，由於middle盒子的寬度是100%，因此咱們若是想讓他們上去
             咱們只能在middle擠出來位置來放置left和right這兩個盒子
             這裏咱們想到用padding， 由於這裏若是用margin，你會發現這個頁面會有一個橫向的滾動條
             其實padding也會出現橫向的滾動條，可是咱們能夠經過box-sizing:border-box;這個屬性來控制*/
        .main {
            padding: 0 100px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="middle"><h2>我是中間元素</h2></div>
    <div class="left"><h2>我是左邊元素</h2></div>
    <div class="right"><h2>我是右邊元素</h2></div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。