雙飛翼佈局的改造 box-sizing和margin負值的應用

時間 2019-11-12

標籤雙飛佈局改造 box sizing margin 負值應用欄目 CSS 简体版

原文原文鏈接

box-sizing + margin負值升級雙飛翼佈局css

1、box-sizing屬性

.content-size, .border-size{
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    margin: 20px;
}
.content-size{
    box-sizing: content-box;
}
.border-size{
    box-sizing: border-box;
}

context-size、border-size兩個類的的width、height、padding、border、margin值都是一致。
box-sizing: content-box時，div的寬度和高度爲width和height的值
box-sizing：border-box時，div的寬度和高度爲 padding + border + width(內容高度)

2、border-box屬性的應用

對雙飛翼佈局的改造，傳統的雙飛高度是自適應的。本次經過box-sizing屬性的border-box值對雙飛翼佈局的高度進行定高，從而實現head與footer固定，而中間內容部分自動出現滾動條的能力。html

代碼以下：

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div, body{
            margin: 0px;
        }
      .head{
          height: 60px;
          background: red;
      }
      .main {
          height: 100%;
          clear: both;
          box-sizing: border-box;
          padding: 60px 0px 100px 0px;
          margin: -60px 0px -100px 0px;
      }
      .main-main{
          clear: both;
      }
      .main-main:after{
          content: '';
          display: block;
          overflow: hidden;
          clear: both;
      }
      .cont-main{
          margin: 0px 300px 0px 200px;
          overflow: hidden;
          overflow-y: auto;
          height: inherit;
      }
      .main .cont, .main .left, .main .right{
          float: left;
          height: 100%;
      }
      .main .cont{
          width: 100%;
      }
      .main .left{
        width: 200px;
        margin-left: -100%;
      }
      .main .right{
        width: 300px;
        margin-left: -300px;
      }
      .footer{
          height: 100px;
          background: gray;
      }
    </style>
</head>
<body>
    <div class="head">head</div>
    <div class="main">
        <div class="main-main">
            <div class="cont">
                <div class="cont-main">
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont<br/>
                    cont最後一條<br/>
                </div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

效果圖：佈局

重點代碼解析

實現傳統的雙飛翼佈局，此處不在贅述。
根據box-sizing屬性的介紹，能夠知道設置爲border-box時，他的高度=padding + border的值，其中還須要利用margin的負值。
1. padding縮小內容自己的高度
2. margin負值拉近head、footer與內容的距離

.main {
      height: 100%;
      clear: both;
      box-sizing: border-box;
      padding: 60px 0px 100px 0px;
      margin: -60px 0px -100px 0px;
  }

內容部分滾動條的實現因爲咱們的main(中間部分的最外層div，如.main)必需要設置height:100%，讓其高度滿屏。因此內容佈局外層還須要增長一個div(如.main-main)。此時.main-main的高度就是咱們想要的了。以下中間主體部分了css代碼：

.cont-main{
  margin: 0px 300px 0px 200px;
  overflow: hidden;
  overflow-y: auto;
  height: inherit;
}

相關標籤/搜索

每日一句

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