在前端開發中經常會碰到各種類型布局的網頁，這要求我們對css網頁布局非常熟悉。其中水平垂直居中布局，多列布局等經常會被使用到，今天就來解決一下css布局方面的問題。
水平垂直居中的幾種方法
說到水平垂直居中布局我們一般會立馬想到以下幾種情況：
實驗參數設置
<div class="container">
123
<p class="inner">456</p>
<span class="inner">789</span>
<img class="inner" src="img/1.jpg">
</div>
未脫離文檔流時
文本元素
/*方法一：*/
/*配合單行文字使用*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
line-height:400px;
}
/*方法二：*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
}
.container:after{
display:inline-block;
content:"";
height:100%;
vertical-align:middle;
}
行內元素
/*方法一：*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*方法二：*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
}
.container:after{
display:inline-block;
cotent:"";
height:100%;
vertical-align:middle;
}
塊狀元素
/*方法一：*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*方法二：*/
/*配合多行文本使用*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.inner{
width:200px; /*需要給子元素一個寬度*/
margin: auto;
}
替換元素
常見的替換元素有：<img> <input> <textarea> <select> <button>
/*方法一：*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
}
.container:after{
display:inline-block;
cotent:"";
height:100%;
vertical-align:middle;
}
.inner{
vertical-align:middle;
}
/*方法二：*/
.container{
height: 400px;
width: 400px;
border: 1px solid red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.inner{
vertical-align:middle;
}
水平垂直居中的終極方法：
.container{
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
/*以下是個各種兼容代碼*/
/* 老版本語法: 比較少用*/
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
}
優點：同樣的代碼解決各種問題
缺點：IE8及以下不兼容
脫離文檔流時
行內元素、塊狀元素、替換元素
由於行內元素加上position:absolute;之后會生成一個塊級框，與塊狀元素類似，其高寬可控
/*當知道子元素高寬時*/
.container{position:relative;}
.inner{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
}
或者
.inner{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:200px;
height:設置為適當的高度;
margin: auto;
}
/*當子元素高寬未知時*/
.inner{
position: absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
常見的幾種頁面布局
固定布局
負邊距除去列表右邊框
<style type="text/css">
#div1 { width: 580px; height: 380px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; }
.box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; }
#div2 { margin-right: -20px; /*通過在外面包裹的div上添加負邊距，除去列表的右邊框*/}
</style>
<div id="div1">
<div id="div2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
雙飛翼布局
- 三列布局，中間寬度自適應，兩邊定寬；
- 中間欄要在瀏覽器中優先展示渲染；
- 允許任意列的高度最高；
- 要求只用一個額外的DIV標簽；
- 要求用最簡單的CSS、最少的HACK語句；
body,html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; }
#container { width: 90%; margin: 0 auto; height: 100%; }
#header,#footer { height: 12.5%; background: deepskyblue; }
#main { height: 75%; }
#center,#left,#right { height: 100%; float: left; }
#center { width: 100%; background: lightgreen; }
#left { background: lightcoral; width: 20%; margin-left: -100%; }
/*左側設置margin-left: -100%;使得left移上去*/
#right { background: lightblue; width: 20%; margin-left: -20%; }
/*右側設置margin-left: -20%;使得right在右側*/
#main-inner { margin: 0 20%; }
/*雙飛翼布局和聖杯布局的區別在於是否有main-inner塊，如果沒有可直接通過設置
#center{padding: 0 20%;}
#left{position:relative;left:-leftwidth;}
#right{position:relative;right:-rightwidth;}
</style>
<div id="container">
<div id="header">
header
</div>
<div id="main">
<div id="center">
<div id="main-inner">
center
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div id="footer">
footer
</div>
</div>
流式布局
網頁中主要的划分區域的尺寸使用百分數（搭配min-、max-屬性使用）圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕，在當今的移動端開發也是常用布局方式。
缺點：寬度使用百分比定義，但是高度和文字大小等大都是用px來固定(現在用em,rem)，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。
彈性布局
由於前人總結的很好，我就不造輪子了
一勞永逸的搞定 flex 布局
由於flex是css3的屬性，低版本瀏覽器不兼容
瀑布流布局
masonry實現瀑布流布局
具體使用方法可參考官網教程
響應式布局
@media screen and (max-width:320px){ /*視窗<=320px*/
/*css code */
}
@media screen and (min-width:769px)and(max-width:1000px){ /* 769px<=視窗<=1000px */
/*css code */
}
清除浮動的幾種方法
空標簽
<div style="clear:both;"></div>
優點：簡單明了
缺點：增加無意義的空標簽，違背了結構表現分離，給后期維護帶來了問題。
利用BFC
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相干。
BFC布局規則：
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算
以下元素會生成BFC：
根元素
float屬性不為none
overflow不為visible
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex中任何一個
after偽類樣式
給父元素增加clearfix類即可,推薦使用
.clearfix:after{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
參考文章：