雙飛翼佈局的改造使用詳解-html教學-PHP中文網

雙飛翼佈局的改造使用詳解

零下一度

發布： 2017-06-24 13:24:44

原創

1655 人瀏覽過

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

一、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(內容高度)
二、border-box屬性的應用

程式碼如下：

<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的負值。

###############padding縮小內容本身的高度############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;
}

登入後複製

###

以上是雙飛翼佈局的改造使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！