經常使用佈局【巧妙使用定位與怪異盒模型】

時間 2019-11-09

原文原文鏈接

這種佈局，管理後臺是很經常使用的，以下圖，頂部一欄是固定的，左上角通常是LOGO，左側也是固定的，通常是導航，右側爲內容區，會出現內部滾動條，三塊內容撐滿了整個屏幕，不會出現滾動條。css

不廢話直接上代碼html

一、絕對定位法瀏覽器

　　撐開整個屏幕ide

<body>
      <header> header </header>
      <aside>Side Nav</aside>
      <section id="main">
          <div id="content">
             <div style="height:800px">content 1!</div>
             <div style="height:200px">content 2!</div>
             <div style="height:200px">content 3!</div>
          </div>
      </section>
</body>

*{padding:0;margin:0;border:none;} body{ font-size:14px; font-family:"微軟雅黑";
} header{ width:100%;　　// 設置left:0;right:0;後其實就不用設置width:100%了，他們功能相同 height:80px; position:absolute; top:0; left:0; right:0; background-color:#123; color:#fff;
} aside{ width:300px; position:absolute; top:80px;　　// 導航的高度 left:0;　　　// 有了固定寬度，就不用設置right值了 bottom:0;
} #main{ position: absolute; left: 300px;　　// 左側導航的寬度 top: 80px;　　  // 導航高度 right: 0; bottom: 0; overflow: hidden;
} #content{ height:100%; overflow-x:hidden;
　　 overflow-y:scroll; background-color:#789; color:#fff;
}

header、aside、content三塊內容都是經過絕對定位定在正確的位置，其中#main的做用只是爲了撐開空間，因此它裏面要嵌套一層#content，用於放真正的內容。佈局

二、"怪異"盒模型border-box法spa

　　box-sizing屬性code

css的box-sizing屬性用來設置或檢索對象的盒模型組成模式。取值有以下兩個： htm

- content-box：
padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding )
此屬性表現爲標準模式下的盒模型。對象

- border-box：
padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )
此屬性表現爲「怪異」模式下的盒模型。blog

HTML佈局同方法一，再也不貼相同代碼，下面直接貼CSS

*{padding:0;margin:0;border:none;} html{ height:100%;　　//高度與寬度的100%必須從最頂層的html標籤開始設置 width:100%;
  }
 body{ height:100%;　　// 撐開整個屏幕 width:100%; font-size:14px; font-family:"微軟雅黑";
   } header{ 　　 width:100%; 　 height:80px; position:fixed; top:0; left:0; right:0; background-color:#123; color:#fff;
 } aside{ width:300px; position:fixed; top:80px; left:0; bottom:0;
 } #main{ width:100%; height:100%; padding:80px 0 0 300px; box-sizing:border-box;
 } #content{ height:100%; overflow:auto; background-color:#789; color:#fff;
 }

header、aside都是經過fixed定位在正確的位置，這時候他兩是浮起來的，下面並無東西，因此#main寬高都設置爲100%是佔據了整個屏幕空間的，這時候就須要padding把header和aside的位置「過濾」掉，只留下屬於#main的位置，這就須要將#main設置爲border-box，不然padding會在寬高100%的基礎上再增長80px和300px，會超出可視區範圍，出現滾動條；設爲border-box，就是在寬高100%的基礎上減去80px和300px（說的有點通俗），剩下的就是#main的空間了。一樣的道理，#main只是爲了撐開空間，真正的內容仍是放在他的子元素#content裏。這裏#content的高度100%是繼承自他的父級#main的高度，也就是去除header的80px後的高度，超過這個高度就會overflow：auto出現滾動條。

說了這麼多，你們能夠本身敲一遍上面的代碼，而後在瀏覽器裏看一下效果，加深記憶，幫助理解。