几种常用的页面布局
前言
??網(wǎng)頁布局是前端網(wǎng)頁開發(fā)的第一步，是最最基礎(chǔ)的部分，也是非常重要的部分。布局就是搭建網(wǎng)頁的整體結(jié)構(gòu)，好的布局不僅可以增加代碼的可讀性，提高開發(fā)效率，讓人心中有丘壑，而且還可以提高代碼的可復(fù)用性，且便于后期維護(hù)，是從事前端開發(fā)的小伙伴們需要重視的基本技能。本篇就著重介紹幾種常用的頁面布局方法。
居中布局
??開頭先說明一下，這里的居中方案都是可以適用于父容器和子容器都既不定寬也不定高的條件下的，所以自然也可以適用于定寬和定高的條件下。
一、水平居中布局
1. 水平居中：absolute + transform: translateX(-50%)
??另外：
- 除了transform: translateX(-50%)這種方式以外，還可以采用給子容器設(shè)置負(fù)margin值的方法實(shí)現(xiàn)居中（其絕對值必須為子容器寬度的一半），但前提是必須要知道子容器的寬度，也就是說子元素要定寬。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {position: relative; /* 如果不寫這句，下面子元素的定位將不會是相對父級的絕對定位 */ }.child {position: absolute;left: 50%;transform: translateX(-50%); /* 相對自身偏移-50% */ }2. 水平居中：flex + justify content: center
??另外：
- 除了給父容器設(shè)置justify-content:center這種方式以外，還可以采用在子容器設(shè)置margin:0 auto的方法實(shí)現(xiàn)居中，因為flex元素是支持margin: 0 auto的。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {display: flex; /* flex布局 */justify-content: center; }3. 水平居中：inline-block + text-align: center
??在使用inline-block布局時需要注意的是：
- vertical-align屬性會影響到inline-block元素，你可能會想把它的值設(shè)置為top；
- 設(shè)置在父容器的text-align:center會繼承到子容器，如果要改變子容器的text-align屬性，則需要重新設(shè)置進(jìn)行覆蓋；
- 如果HTML源代碼中元素之間有空格，那么列與列之間會產(chǎn)生空隙。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {text-align: center; /* text-align設(shè)置在塊級元素的時候可以對里面的inline元素起作用 */ }.child {display: inline-block; }4. 水平居中：table + margin: 0 auto
??給子元素設(shè)置display:table屬性，并且不設(shè)置寬度時，可以使其寬度由內(nèi)容撐開，適合需要寬度自適應(yīng)的水平居中布局。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.child {display: table; /* table在沒有對它進(jìn)行寬度100%的設(shè)置的時候，它的寬度就是和內(nèi)容一樣寬 */margin: 0 auto; }5. 水平居中：table-cell + text-align: center + inline-block
??display:table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類似于td標(biāo)簽。td單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關(guān)聯(lián)伸縮等，所以display:table-cell還是有不少潛在的使用價值的。需要注意的是：
- 與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float， position:absolute，所以，在使用display:table-cell時，與float:left或是position:absolute屬性盡量要同時使用；
- 設(shè)置了display:table-cell的元素對寬度高度敏感，對margin值無反應(yīng)，響應(yīng)padding屬性，基本上就是活脫脫的一個td標(biāo)簽元素了。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {display: table-cell;text-align: center; }.child {display: inline-block; }二、垂直居中布局
1. 垂直居中：absolute + transform: translateY(-50%)
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {position: relative; /* 如果不寫這句，下面子元素的定位將不會是相對父級的絕對定位 */ }.child {position: absolute;top: 50%;transform: translateY(-50%); /* 相對自身偏移-50% */ }2. 垂直居中：flex + align-items
??注意：如果不設(shè)置align-items:center，那么其默認(rèn)值則是stretch，這時子容器將撐滿父容器的高度；
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {display: flex;align-items: center; /* 默認(rèn)值是stretch, 即拉伸, 改為center即可居中 */ }3. table-cell + vertical-align
??display:table-cell的屬性上面的水平居中已經(jīng)大致交代過了，這里再提醒一下需要注意：
- 與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float， position:absolute，所以，在使用display:table-cell時，與float:left或是position:absolute屬性盡量不要同時使用；
- 設(shè)置了display:table-cell的元素對寬度高度敏感，對margin值無反應(yīng)，響應(yīng)padding屬性，基本上就是活脫脫的一個td標(biāo)簽元素了。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {display: table-cell;vertical-align: middle; }三、水平方向和垂直方向同時居中布局
1. 同時居中：absolute + transform: translate(-50%, -50%)
??另外：
- 除了transform: translate(-50%, -50%)這種方式以外，還可以采用給子容器設(shè)置負(fù)margin值的方法實(shí)現(xiàn)居中（其絕對值必須為子容器寬度和高度的一半），但前提是必須要知道子容器的寬度和高度，也就是子元素要定寬定高。
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {position: relative; /* 如果不寫這句，下面子元素的定位將不會是相對父級的絕對定位 */ }.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 相對自身偏移-50% */ }2. 同時居中：inline-block + text-align: center + table-cell + vertical-align
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {text-align: center;display: table-cell;vertical-align: middle; }.child {display: inline-block; }3. 同時居中：flex + justify-content + align-items
HTML:
<div class="parent"><div class="child">DEMO</div> </div>CSS:
.parent {display: flex;justify-content: center;align-items: center; /* 默認(rèn)值是stretch, 即拉伸, 改為center即可居中 */ }多列布局
一、定寬 + 自適應(yīng)
??left和center容器定寬，right容器自適應(yīng)。
1. float + margin
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.left {float: left;width: 100px; }.right {margin-left: 120px; /* 多出的20px作為left容器與right容器之間的邊距 */ }2. float + overflow
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.left, .center {float: left;width: 100px;margin-right: 20px; /* 邊距 */ }.right {overflow: hidden; /* BFC原理 */ }3. table
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {display: table;width: 100%; /* 如果不設(shè)置，寬度將由內(nèi)容決定 */table-layout: fixed; /* 如果不設(shè)置，table內(nèi)部子容器的寬度可能會被內(nèi)容影響，即使設(shè)置了子容器的寬度也是如此 */ }.left, .center, .right {display: table-cell; }.left, .center {width: 100px;padding-right: 20px; /* table-cell相當(dāng)于td元素，是不能設(shè)置margin的，所以用padding代替 */ }4. flex
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {display: flex; }.left, .center {width: 100px;margin-right: 20px; /* 邊距 */ }.right {flex: 1; /* flex: 1 1 0%; */ }二、不定寬 + 自適應(yīng)
??left和center容器不定寬（即寬度由內(nèi)容撐開），right容器自適應(yīng)。
1. float + overflow
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.left, .center {float: left;margin-right: 20px; /* 邊距 */ }.right {overflow: hidden; }2. table
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {display: table;width: 100%; /* 如果不設(shè)置，寬度將由內(nèi)容決定 *//* 這里不設(shè)置table-layout: fixed，因為我們需要table內(nèi)部子容器的寬度由內(nèi)容決定 */ }.left, .center, .right {display: table-cell; }.left, .center {width: 0.1%; /* table-cell的特性，內(nèi)容優(yōu)先 */padding-right: 20px; /* table-cell相當(dāng)于td元素，是不能設(shè)置margin的，所以用padding代替 */ }3. flex
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {display: flex; }.left, .center {margin-right: 20px; /* 邊距 */ }.right {flex: 1; /* flex: 1 1 0%; */ }三、等寬
??當(dāng)父容器中有N個列時，它們的列寬相等，并且當(dāng)父容器變寬（或變窄）時，這些列也要相應(yīng)的變寬（或變窄）。
1. float
HTML:
<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div> </div>CSS:
.parent {margin-left: -20px; /* 將父容器撐開20px，但名義寬度不變，這20px是內(nèi)部列與列之間的邊距 */ }.column {float: left;width: 25%; /* 由列數(shù)決定 */padding-left: 20px; /* 列與列之間的邊距 */box-sizing: border-box; /* 意味著padding-left值被包含在25%的寬度中 */ }2. table
HTML:
<div class="parent-fix"><div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div></div> </div>CSS:
.parent-fix {margin-left: -20px; /* 將父容器撐開20px，但名義寬度不變，這20px是內(nèi)部列與列之間的邊距，但是table不能設(shè)置margin值，所以在parent外面再加一個修正用的容器 */ }.parent {display: table;width: 100%;table-layout: fixed; /* 設(shè)置為fixed時，列寬會相等 */ }.column {display: table-cell;padding-left: 20px; /* 列與列之間的邊距 */ }3. flex
HTML:
<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div> </div>CSS:
.parent {display: flex; }.column {flex: 1; }.column + .column {margin-left: 20px; }四、等高
1. table
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {display: table;width: 100%;table-layout: fixed; }.left, .right {display: table-cell; }.left {width: 100px; /* 不設(shè)置也沒關(guān)系 */border-right: 20px solid transparent; /* 通過border來設(shè)置間距 */background-clip: padding-box; /* 背景顏色默認(rèn)會顯示到border部分，也就是border-box，所以這里設(shè)置到padding-box */ }2. flex
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {display: flex; }.left {width: 100px;margin-right: 20px; }.right {flex: 1; }3. float
??偽等高方案，只是背景顏色一樣高，不推薦。
HTML:
<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div> </div>CSS:
.parent {overflow: hidden; /* 必須 */ }.left {float: left;width: 100px;margin-right: 20px; }.right {overflow: hidden; }.left, .right {padding-bottom: 9999px;margin-bottom: -9999px; } /* 一升一降 */轉(zhuǎn)載于:https://www.cnblogs.com/hexiaobang/p/9590356.html
總結(jié)
- 上一篇： Visual Studio2010安装步
- 下一篇： 3. 中间件安全基础(三)