CSS佈局整理

時間 2019-11-16

標籤 css 佈局整理欄目 CSS 简体版

原文原文鏈接

目錄html

經常使用居中方法
- 水平居中
- 垂直居中
單列布局
二列&三列布局
- float+margin
- position+margin
- 聖盃佈局（float+負margin）
- 雙飛翼佈局（float+負margin）
- flex佈局
總結

1. 經常使用居中方法
居中在佈局中很常見，咱們假設DOM文檔結構以下，子元素要在父元素中居中：瀏覽器

<div class="parent">
    <div class="child"></div>
</div>

水平居中
子元素爲行內元素仍是塊狀元素，寬度必定仍是寬度未定，採起的佈局方案不一樣。
子元素爲：
行內元素：對父元素設置text-align:center;
定寬塊狀元素: 設置左右margin值爲auto;
不定寬塊狀元素: 設置子元素爲display:inline,而後在父元素上設置text-align:center;
通用方案: flex佈局，對父元素設置display:flex;justify-content:center;網絡

垂直居中
垂直居中對於子元素是單行內聯文本、多行內聯文本以及塊狀元素採用的方案是不一樣的。
父元素必定，子元素爲單行內聯文本：
設置父元素的height等於行高line-height。
父元素必定，子元素爲多行內聯文本：設置父元素的display:table-cell或inline-block，再設置vertical-align:middle。
塊狀元素:
設置子元素position:absolute 並設置top、bottom爲0，父元素要設置定位爲static之外的值，margin:auto。
通用方案:
flex佈局，給父元素設置{display:flex; align-items:center;}。ide

2. 單列布局
特徵：定寬、水平居中佈局

常見的單列布局有兩種：學習

一種是header、content、footer寬度都相同，其通常不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。
一種是header、footer寬度爲瀏覽器寬度，但content以及header和footer裏的內容卻不會佔滿瀏覽器寬度。

對於第一種，對header、content、footer統一設置width或max-width，並經過margin:auto實現居中。flex

DOM文檔:ui

<div class="layout">
  <div id="header">頭部</div>
  <div id="content">內容</div>
  <div id="footer">尾部</div>
</div>

CSS清單:日誌

.layout{
  /*   width: 960px; *//*設置width當瀏覽器窗口寬度小於960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

對於第二種，header、footer的內容寬度爲100%，但header、footer的內容區以及content統一設置width 或 max-width，並經過margin:auto實現居中。code

DOM文檔:

<div id="header">
  <div class="layout">頭部</div>
</div>
<div id="content" class="layout">內容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

CSS清單:

.layout{
/*   width: 960px; *//*設置width當瀏覽器窗口寬度小於960px時，單列布局不會自適應。*/
max-width: 960px;
margin: 0 auto;
}

3. 二列&三列布局

二列布局的特徵是側欄固定寬度，主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度，中間列自適應寬度。

之因此將二列布局和三列布局寫在一塊兒，是由於二列布局能夠看作去掉一個側欄的三列布局，其佈局的思想有殊途同歸之妙。對於傳統的實現方法，主要討論上圖中前三種佈局，經典的帶有側欄的二欄佈局以及帶有左右側欄的三欄佈局，對於flex佈局，實現了上圖的五種佈局。

a. float+margin

原理說明：設置兩個側欄分別向左向右浮動，中間列經過外邊距給兩個側欄騰出空間，中間列的寬度根據瀏覽器窗口自適應。

DOM文檔:

<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

佈局步驟:

對兩邊側欄分別設置寬度，並對左側欄添加左浮動，對右側欄添加有浮動。
對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。
CSS清單:

.sub{
width: 100px;
float: left;
}
.extra{
width: 200px;
float: right;
}
.main{
margin-left: 100px;
margin-right: 200px;
}
一些說明:

注意DOM文檔的書寫順序，先寫兩側欄，再寫主面板，更換後則側欄會被擠到下一列（聖盃佈局和雙飛翼佈局都會用到）。
這種佈局方式比較簡單明瞭，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。
二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置主面板的margin-right值，其餘操做相同。反之亦然。

b. position+margin

原理說明：經過絕對定位將兩個側欄固定，一樣經過外邊距給兩個側欄騰出空間，中間列自適應。

DOM文檔:

<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

佈局步驟:

對兩邊側欄分別設置寬度，設置定位方式爲絕對定位。
設置兩側欄的top值都爲0，設置左側欄的left值爲0，右側欄的right值爲0。
對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。
CSS清單:

.sub, .extra {
position: absolute;
top: 0;
width: 200px;
}
.sub {
left: 0;
}
.extra {
right: 0;
}
.main {
margin: 0 200px;
}
一些說明:

本方法不限制DOM書寫順序，先寫主面板會使主面板部分優先渲染（通常主面板會比側欄內容重要）。
與上一種方法相比，本種方法是經過定位來實現側欄的位置固定。
若是中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器窗口小到必定程度，主面板與側欄會發生重疊。
二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置主面板的margin-right值，其餘操做相同。反之亦然。

c. 聖盃佈局(float + 負margin)

原理說明：

主面板設置寬度爲100%，主面板與兩個側欄都設置浮動，常見爲左浮動，這時兩個側欄會被主面板擠下去。經過負邊距將浮動的側欄拉上來，左側欄的負邊距爲100%，恰好是窗口的寬度，所以會從主面板下面的左邊跑到與主面板對齊的左邊，右側欄此時浮動在主面板下面的左邊，設置負邊距爲負的自身寬度恰好浮動到主面板對齊的右邊。爲了不側欄遮擋主面板內容，在外層設置左右padding值爲左右側欄的寬度，給側欄騰出空間，此時主面板的寬度減少。因爲側欄的負margin都是相對主面板的，兩個側欄並不會像咱們理想中的停靠在左右兩邊，而是跟着縮小的主面板一塊兒向中間靠攏。此時使用相對佈局，調整兩個側欄到相應的位置。

DOM文檔:

<div class="bd">         
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

佈局步驟:

三者都設置向左浮動。
設置main寬度爲100%，設置兩側欄的寬度。
設置負邊距，sub設置負左邊距爲100%，extra設置負左邊距爲負的自身寬度。
設置main的padding值給左右兩個子面板留出空間。
設置兩個子面板爲相對定位，sub的left值爲負的sub寬度，extra的right值爲負的extra寬度。
CSS清單:

.main {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
.bd {
padding: 0 230px 0 190px;
}
一些說明

DOM元素的書寫順序不得更改。
主面板部分優先渲染（通常主面板會比側欄內容重要）。
當面板的main內容部分比兩邊的子面板寬度小的時候，佈局就會亂掉。能夠經過設置main的min-width屬性或使用雙飛翼佈局避免問題。
二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置主面板的padding-right值，其餘操做相同。反之亦然。

d. 雙飛翼佈局(float + 負margin )

原理說明：

雙飛翼佈局和聖盃佈局的思想有些類似，都利用了浮動和負邊距，但雙飛翼佈局在聖盃佈局上作了改進，在main元素上加了一層div, 並設置margin,因爲兩側欄的負邊距都是相對於main-wrap而言，main的margin值變化便不會影響兩個側欄，所以省掉了對兩側欄設置相對佈局的步驟。

DOM文檔:

<div class="main-wrap">
      <div class="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

佈局步驟:

三者都設置向左浮動。
設置main-wrap寬度爲100%，設置兩個側欄的寬度。
設置負邊距，sub設置負左邊距爲100%，extra設置負左邊距爲負的自身寬度。
設置main的margin值給左右兩個子面板留出空間。
CSS清單:

.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
一些說明

主面板部分優先渲染（通常主面板會比側欄內容重要）。
聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局main的最小寬度不能小於左側欄的缺點。
雙飛翼佈局不用設置相對佈局，以及對應的left和right值。
經過引入相對佈局，能夠實現三欄佈局的各類組合，例如對右側欄設置position: relative; left: 190px;,能夠實現sub+extra+main的佈局。
二列的實現方法

若是是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設置main-wrap的margin-right值，其餘操做相同。反之亦然。

e. flex佈局

若是你尚未學習flex佈局，阮一峯老師的兩篇博文將會很適合你。

Flex 佈局教程：語法篇 - 阮一峯的網絡日誌

Flex 佈局教程：實例篇 - 阮一峯的網絡日誌

如下是五種佈局的flex佈局代碼：

DOM文檔：

<div class="layout">
    <aside class="aside">側邊欄寬度固定</aside>
    <div class="main">主內容欄寬度自適應</div>
</div>
<div class="layout">
    <div class="main">主內容欄寬度自適應</div>
    <aside class="aside">側邊欄寬度固定</aside>
</div>
<div class="layout">
    <aside class="aside">左側邊欄寬度固定</aside>
    <div class="main">主內容欄寬度自適應</div>
    <aside class="aside">右側邊欄寬度固定</aside>
</div>
<div class="layout">
    <aside class="aside">第1個側邊欄寬度固定</aside>
    <aside class="aside">第2個側邊欄寬度固定</aside>
    <div class="main">主內容欄寬度自適應</div>
</div>
<div class="layout">
    <div class="main">主內容欄寬度自適應</div>
    <aside class="aside">第1個側邊欄寬度固定</aside>
    <aside class="aside">第2個側邊欄寬度固定</aside>
</div>

CSS清單

.layout {
    display: flex;
}
.main {
    flex: 1;
}
.aside {
    width: 200px;
}

與以前所講的幾種傳統佈局方案相比，flex佈局的代碼可謂異常簡潔，並且很是通用，利用簡單的三行CSS即實現了常見的五種佈局。

總結

傳統的佈局方法基於盒狀模型，依賴 display屬性 + position屬性 + float屬性，邏輯相對複雜，對於實現一些特殊效果，例如垂直居中，尤爲複雜繁瑣。而flex佈局中的flex容器能夠根據實際可用空間動態調整子元素的寬高比和順序，使元素可以儘量地利用可用空間，同時也能經過縮小來避免超出。flex佈局提供了一套簡便、完整、響應式的佈局方案。

本文轉載自知乎

相關標籤/搜索

每日一句

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