負邊距、三欄布局

1. 負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?

  • 負邊距：父邊距是用于調(diào)節(jié)元素位置，應用較為廣泛，margin-top設(shè)置為負值，那么元素就會被“上拉”，類似地左右下均是這種效果；
  • position: relative;是定位的一種方法——相對定位，相對定位規(guī)定元素相對于本身原來位置進行位置的偏移；
  • 區(qū)別：由此可以看出，元素運用負邊距的時候，本身位置改變的同時還會使兄弟元素位置跟隨其一起移動，而position: relative;使元素位置偏移時，元素原位置所占空間大小沒有發(fā)生改變，兄弟元素不隨著其一起移動。

2. 使用負 margin 形成三欄布局有什么條件?

三欄布局有很多種方式可以實現(xiàn)，其中的圣杯布局和雙飛翼布局運用了負邊距的特點，形成條件為：

  1. 三個元素在同一個父元素下，并且為兄弟元素；
  2. 三個元素均為浮動；
  3. 中間主要區(qū)塊放在HTML中第一位最先渲染，width:100%；
  4. 另外兩個邊欄設(shè)置負margin（本身width≤負margin大小≤父元素width）；

3. 圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟

  • 圣杯布局的原理：
  • 設(shè)置浮動使三欄的位置相對自由靈活；
  • 設(shè)置main區(qū)塊width:100%使主要元素占據(jù)整個中間空間（并且有擠下其他浮動元素的作用）；
  • 設(shè)置左邊欄：margin-left: -100%;使元素進入到main區(qū)塊的最左上角；（原理在例子下面闡述）
  • 設(shè)置右邊欄：負邊距大小為本身高度，使元素到main的最右上角；
  • 父元素設(shè)置一定大小的padding，然后運用position: relative屬性對左右邊欄進一步設(shè)置，防止其蓋住main區(qū)塊；
    具體步驟如下：
    step1:寫好html結(jié)構(gòu)以及基本樣式css：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
        margin: 0;
        padding: 0;
      }
      .ct {
        border: 1px solid;
      }
      .main {
        width: 100%;
        height: 200px;
        background: rgba(255, 0, 0, 0.5);
      }
      .sideL {
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 0, 0.5);
      }
      .sideR {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <div class="main">main區(qū)塊</div>
      <div class="sideL">左邊欄</div>
      <div class="sideR">右邊欄</div>
    </div>
  </body>
</html>

效果圖：

圣杯step1

step2：對元素進行浮動設(shè)置，并撐開父元素：

.ct:after {
        content: '';
        display: block;
        clear: both;               /* 撐開父元素 */
      }
      .main {
        width: 100%;
        height: 200px;
        background: rgba(255, 0, 0, 0.5);
        float: left;               /* 設(shè)置浮動 */
      }
      .sideL {
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 0, 0.5);
        float: left;             /* 設(shè)置浮動 */
      }
      .sideR {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 0, 0.5);
        float: left;                 /* 設(shè)置浮動 */
      }

圣杯step2

step3：負margin使邊欄進入到main里面：

.sideL {
        width: 100px;
        height: 100px;
        margin-left: -100%;                   /* 左邊欄負margin設(shè)置為相對于父元素的-100% */
        background: rgba(255, 255, 0, 0.5);
        float: left;
      }
      .sideR {
        width: 100px;
        height: 100px;
        margin-left: -100px;                    /* 右邊欄負margin為本身width大小 */
        background: rgba(0, 255, 0, 0.5);
        float: left;
      }

圣杯step3

step4：設(shè)置父元素padding，運用position: relative;定位兩邊欄：

* {
        margin: 0;
        padding: 0;
      }
      .ct {
        border: 1px solid;
        padding: 0 120px;                    /* 父元素設(shè)置內(nèi)邊距 */
      }
      .ct:after {
        content: '';
        display: block;
        clear: both;
      }
      .main {
        width: 100%;
        height: 200px;
        background: rgba(255, 0, 0, 0.5);
        float: left;
      }
      .sideL {
        position: relative;
        left: -120px;                            /* 左邊欄定位到最左面 */
        width: 100px;
        height: 100px;
        margin-left: -100%;
        background: rgba(255, 255, 0, 0.5);
        float: left;
      }
      .sideR {
        position: relative;
        left: 120px;                              /* 右邊欄定位到最右面 */
        width: 100px;
        height: 100px;
        margin-left: -100px;
        background: rgba(0, 255, 0, 0.5);
        float: left;
      }

至此，圣杯結(jié)構(gòu)就已經(jīng)出現(xiàn)了，確實比較像圣杯- -。
補充：
無論是在圣杯布局還是雙飛翼布局中，負margin的作用舉足輕重，它的具體原理是：

  • 負margin本身計算并不違反規(guī)范，負值會使子元素位置發(fā)生變化；（這里假設(shè)父元素不動，其實父元素也可以是其他元素的子元素）
  • 負margin可以使父元素的width變大；

描述：

  1. 這兩點沒有找到具體根據(jù)，不過在《The Definitive Guide》中，明確闡述了這種特性，并且在計算上并不違反規(guī)范，所以可以廣泛應用。
  2. 圣杯布局和雙飛翼布局是利用第一點，將子元素的間距變?yōu)樨撝?，而加起來的總長還是等于父元素的width，所以計算合理，即可將元素自然上流。

計算步驟如下：（300px=300px+100px-100px）

如果要實現(xiàn)兩欄布局，只需要刪除右邊欄，然后將父元素padding 改一下設(shè)置即可：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
        margin: 0;
        padding: 0;
      }
      .ct {
        border: 1px solid;
        padding-left: 120px;
      }
      .ct:after {
        content: '';
        display: block;
        clear: both;
      }
      .main {
        width: 100%;
        height: 200px;
        background: rgba(255, 0, 0, 0.5);
        float: left;
      }
      .sideL {
        position: relative;
        left: -120px;
        width: 100px;
        height: 100px;
        margin-left: -100%;
        background: rgba(255, 255, 0, 0.5);
        float: left;
      }

    </style>
  </head>
  <body>
    <div class="ct">
      <div class="main">main區(qū)塊</div>
      <div class="sideL">左邊欄</div>
    </div>
  </body>
</html>
圣杯改兩欄布局

4. 雙飛翼布局的原理? 實現(xiàn)步驟?

雙飛翼布局的原理和圣杯結(jié)構(gòu)原理大同小異，基本上就是在思路上的差別，圣杯布局是父元素padding容納邊欄，而雙飛翼結(jié)構(gòu)是改變main區(qū)塊子元素的margin大小來實現(xiàn)同樣效果，具體如下：

  • 浮動和負margin的原理和圣杯布局相同，詳見圣杯布局補充點。
  • 給main區(qū)塊設(shè)置一個子元素，并且子元素左右margin設(shè)置一定數(shù)字大?。?br> 具體步驟如下：
    step1：用圣杯布局的方法，將邊欄元素通過負margin移動到main區(qū)塊兩側(cè)：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
        margin: 0;
        padding: 0;
      }
      .ct {
        border: 1px solid;
      }
      .ct:after {
        content: '';
        display: block;
        clear: both;
      }
      .main {
        width: 100%;
        height: 200px;
        background: rgba(255, 0, 0, 0.5);
        float: left;
      }
      .sideL {
        width: 100px;
        height: 100px;
        margin-left: -100%;
        background: rgba(255, 255, 0, 0.5);
        float: left;
      }
      .sideR {
        width: 100px;
        height: 100px;
        margin-left: -100px;
        background: rgba(0, 255, 0, 0.5);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <div class="main"></div>
      <div class="sideL">左邊欄</div>
      <div class="sideR">右邊欄</div>
    </div>
  </body>
</html>

基礎(chǔ)設(shè)置

step2：給main元素添加一個子元素，設(shè)置子元素的margin值及其他一些基礎(chǔ)屬性：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
        margin: 0;
        padding: 0;
      }
      .ct {
        border: 1px solid;
      }
      .ct:after {
        content: '';
        display: block;
        clear: both;
      }
      .main {
        width: 100%;
        height: 200px;
        float: left;
      }
      .main .wrap {
        background: rgba(255, 0, 0, 0.5);
        height: 200px;
        margin: 0 120px;                   /* 給子元素添加兩側(cè)margin */
      }
      .sideL {
        width: 100px;
        height: 100px;
        margin-left: -100%;
        background: rgba(255, 255, 0, 0.5);
        float: left;
      }
      .sideR {
        width: 100px;
        height: 100px;
        margin-left: -100px;
        background: rgba(0, 255, 0, 0.5);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <div class="main">
<div class="wrap">main區(qū)塊</div>         <!--添加一個類名為wrap的子元素-->
</div>                            
      <div class="sideL">左邊欄</div>
      <div class="sideR">右邊欄</div>
    </div>
  </body>
</html>
雙飛翼布局

如圖所示，雙飛翼布局就出現(xiàn)了，只是思路上和圣杯布局的有差別，兩者本質(zhì)上差別不大。

參考：CSS布局奇淫巧計之-強大的負邊距

代碼題
代碼1預覽
代碼2預覽
代碼3預覽
代碼4預覽
代碼5預覽

本文版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請注明來源。謝謝！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容