前言css
首先聲明在這篇博客裏我將不會細說每個知識點(好比什麼是BFC,什麼是flex等等),我主要是總結一下本身對標題中所列三個知識點的一些方法。html
1、多欄自適應佈局css3
首先,在這裏我將從最簡單的兩欄固定佈局慢慢講到多欄自適應佈局。web
1.固定佈局瀏覽器
說到固定佈局想必你們已經以爲無愛了,但我仍是要簡單地講一下,下面經過一個簡單的實例進行講解:佈局
html代碼:flex
<div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div>
css代碼:flexbox
.wrap{ width:500px; height:400px; border:1px solid red; margin:0 auto; } .left{ width:200px; height:400px; background:#ccc; } .right{ width:300px; height:400px; background:#ddd; }
咱們但願的佈局效果是500px寬的容器內分別有一個200px寬和300px寬的子元素容器,可此時運行結果爲:spa
這是由於div元素是塊級元素,默認是會佔據整行的,因而咱們就採用浮動的方法來解決這個問題。3d
此時咱們只須要再添加以下樣式:
.left,.right{ float:left; }
那麼就能獲得咱們想要的結果了:
因爲這裏只有兩欄佈局,並且都是固定佈局,而且恰好佔滿父容器,因此第二個子元素右浮動也是同樣的效果。但若是是多欄佈局(好比四欄佈局)而且恰好佔滿父容器的話,那麼最後一個能夠是左浮動或者右浮動。
對於兩欄固定佈局,其實並不必定兩個子元素都須要左浮動,能夠第一個子元素左浮動,第二個設置margin-left值撐開就好了:
.left{ float:left; } .right{ margin-left:200px; }
這樣也能實現上面的效果。但若是是多欄固定佈局,我的以爲仍是浮動比較方便。
在固定佈局中,除了浮動以外,還有一種比較經常使用的方法就是定位。
把上面的樣式代碼改一改:
.wrap{ position:relative; } .left{ position:absolute; top:0; left:0; } .right{ position:absolute; top:0; left:200px; }
這樣寫一樣能達到以前的那種效果,但定位佈局比較煩的就是得精確計算每一塊的位置。
因此,我的以爲目前固定佈局通常會結合浮動+定位+必要時的內外邊距來進行佈局會更加實用。固然了,浮動+定位+內外邊距也一樣適用於自適應佈局,彼此之間都不是等號關係的。
2.兩欄自適應佈局
一樣是上面的實例,我把它改爲自適應佈局:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; } .left{ width:40%; height:100%; float:left; background:#ccc; } .right{ width:60%; height:100%; float:left; background:#ddd; }
此時運行看一下結果:
由於如今已經改爲流式佈局了,因此容器的寬度會隨着瀏覽器的寬度而按比例縮放。固然,須要配合浮動或者定位。
可是CSS3提供了一種更好的彈性伸縮佈局flexbox,看看怎麼實現:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; display:flex; } .left{ flex:2; background:#ccc; } .right{ flex:3; background:#ddd; }
是否是更簡單。因此說,無論多少欄佈局(實際開發中也不會不少欄的),經過流式佈局或者flexbox彈性伸縮佈局基本能解決。但目前來講,彈性佈局兼容性還不是很好,因此用得比較多的仍是移動端佈局,但整體上更多的仍是使用流式佈局,必要時能夠配合媒體查詢。
既有固定佈局也有自適應佈局
仍是上面的實例,如今兩欄佈局第一個子元素固定寬度,而第二個子元素自適應剩餘的寬度,該怎麼作?
第一種方法就是給第二個子元素加左外邊距,擠出來:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; } .left{ width:200px; height:300px; float:left; background:#ccc; } .right{ height:100%; margin-left:200px; background:#ddd; }
結果就是這樣的:
第二種方法就是絕對定位+外邊距:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; position:relative; } .left{ width:200px; height:300px; background:#ccc; position: absolute; top:0; left:0; } .right{ height:100%; background:#ddd; margin-left:200px; }
但其實第一種方法和第二種方法原理是同樣的,換湯不換藥罷了。
第三種方法,利用BFC特性:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; } .left{ width:200px; height:300px; background:#ccc; float:left; } .right{ height:100%; background:#ddd; overflow: hidden; }
這裏給第二個子元素設置了overflow:hidden以後呢,它就生成了一個BFC塊,BFC其中的一個佈局規則就是不會和float box 發生重疊,因而就和第一個浮動了的子元素隔開了,我說得比較蒼白,你們能夠去多瞭解BFC的一些佈局特性,包括如何生成一個新的BFC塊。那爲了方便,我這裏就把BFC的一些相關知識點直接放上來給你們瞭解一下:
OK,還有一種方法就是flex佈局:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; display:flex; } .left{ width:200px; height:300px; background:#ccc; } .right{ height:100%; background:#ddd; flex:1; }
是否是也挺方便的?如今我提高一下難度,如今是三欄佈局,左右欄固定寬度,中間自適應,該怎麼作?
這時候flex佈局就是最佳的選擇了:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; display:flex; } .left{ width:200px; height:300px; float:left; background:#ccc; } .right{ width:200px; height:300px; float:right; background:#ddd; } .center{ height:100%; background:#666; flex:1; }
這種原本就很苦惱的佈局,對於flex佈局來講都能輕鬆解決意外煩惱。
且慢,若是我想讓中間的子元素優先渲染呢?
<div class="wrap"> <div class="center">中間自適應欄</div> <div class="left">左邊固定欄</div> <div class="right">右邊固定欄</div> </div>
這時的狀況是這樣的:
這時候吧,仍是得利用flex來解決這個問題:
.wrap{ width:80%; height:400px; border:1px solid red; margin:0 auto; display:flex; } .left{ width:200px; height:300px; float:left; background:#ccc; order:1; } .right{ width:200px; height:300px; float:right; background:#ddd; order:3; } .center{ height:100%; background:#666; flex:1; order:2; }
這時候出來的效果就是咱們想要的:
好的,關於多欄自適應佈局我就講到這裏,其餘方面的知識擴展與應用,就留給你們去研究了。
2、水平垂直居中
水平居中最經常使用的就是text-align:center; 和 margin:0 auto; 其中text-align:center;是對內部子元素(inline/inline-block)起做用,而margin:0 auto;是對元素自身(block)起做用,具體根據本身的須要適當地運用。
垂直居中經常使用的有line-height 和 vertical-align:middle,可是它們都有使用的限制條件或者前提吧。好比line-height得和height同樣高,vertical-align:middle 只對inline-block起做用,但其實還有不少坑,我的不怎麼喜歡使用vertical-align。
下面咱們就直接進入水平垂直居中的討論吧:
其實吧,水平垂直居中也是有兩種狀況:知道寬高 和 不知道寬高。
1.已知寬高的水平垂直居中
在這種狀況下,其實就很好解決了,實例說明一下:
html代碼:
<div class="wrap"> <div class="child">水平垂直居中</div> </div>
默認樣式:
.wrap{ width:400px; height:400px; border:1px solid red; margin:0 auto; } .child{ width:200px; height:200px; background:#ccc; }
如今的狀況是這樣的:
由於咱們是已知寬高的,因此能夠給子元素加外邊距擠到中間位置,或者經過絕對定位到中間位置,固然還有一些方法,我就放在未知寬高的狀況下再介紹,由於已知寬高包含於未知寬高,因此爲了不重複,我就分開了,這裏就只講僅適合已知寬高的狀況。
咱們給子元素加上外邊距:
.child{ margin-top:100px; margin-left:100px; }
這時內部子元素就水平垂直居中了。
如今使用絕對定位來實現:
.wrap{ position:relative; } .child{ position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; }
貌似絕對定位比較麻煩,但其實絕對定位對總體佈局更好一些,也是比較經常使用。
2.未知寬高的水平垂直居中
1.絕對定位+css3 transform:translate(-50%,-50%)
.wrap{ position:relative; } .child{ position: absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); }
2.css3 的flex佈局
.wrap{ display:flex; justify-content:center; } .child{ align-self:center; }
3.table佈局
<div class="wrap"> <div class="child"> <div>sadgsdgasgd</div> </div> </div>
.wrap{ display:table; text-align:center; } .child{ background:#ccc; display:table-cell; vertical-align:middle; } .child div{ width:300px; height:150px; background:red; margin:0 auto; }
table佈局貌似得多套一層,試了好多遍,兩層都出不來效果。可是這種html結構太冗餘了。因此前兩種比較新潮一些。
OK,水平垂直居中就講到這裏,以上都是本身琢磨的一些方法,有什麼紕漏或者不恰當的地方,歡迎留言指正。
3、清除浮動
這裏就不講爲何咱們要清楚浮動,反正不清除浮動事多多。
下面我就講三種經常使用清除浮動的方法,夠用了。
1.在浮動元素後面加一個空的div,併爲它清除浮動
html代碼:
<div class="wrap"> <div class="float">浮動</div> <div class="clear"></div> <div class="nofloat">不想被浮動影響</div> </div>
css代碼:
.wrap{ width:500px; height:400px; border:1px solid red; margin:0 auto; } .float{ width:200px; height:200px; background:#ccc; float:left; } .nofloat{ width:300px; height:150px; background:red; }
如今雖然加了一個空的div,可是並無給它清除浮動,因此目前的效果就是第三個子元素.nofloat仍是收到浮動的影響。
OK,如今給.clear加上清除浮動:
.clear{ clear:both; }
刷新一下效果就出來了:
PS:這種狀況比較適合元素之間是垂直排列布局的,爲了避免受彼此浮動的影響。
2.利用BFC特性清除浮動
html代碼:
<div class="wrap"> <div class="float">浮動</div> <div class="nofloat">不想被浮動影響</div> </div>
css代碼:
.wrap{ width:500px; border:1px solid red; margin:0 auto; overflow:hidden; } .float{ width:200px; height:200px; background:#ccc; float:left; } .nofloat{ width:300px; height:150px; background:red; overflow:hidden; }
效果是這樣的:
這裏父容器是沒有設置固定高度的,原本第一個子元素浮動以後,父元素的高度會塌陷到跟第二個子元素同樣高,但因爲這裏分別給第二個子元素和父元素都設置了overflow:hidden ,因此它們都生成了一個新的BFC區域,根據上文提供的BFC佈局規則能夠得知:BFC區域不會與float box 重疊;計算BFC高度時浮動元素的高度也參與計算。因此就獲得清除浮動的效果。說得比較繞,但其實清除浮動得根據本身開發中的實際狀況合理使用。
3.使用:after僞元素,給浮動元素的父元素清除浮動
html代碼:
<div class="wrap"> <div class="float">浮動</div> </div>
css代碼:
.wrap{ width:500px; border:1px solid red; margin:0 auto; } .float{ width:200px; height:200px; background:#ccc; float:left; }
此時子元素浮動了,脫離了文檔流,因此父元素高度酒塌陷了:
能夠看到父元素的邊框擠在一塊兒了。
OK,如今給父元素添加一個clearfix類:
<div class="wrap clearfix"> <div class="float">浮動</div> </div>
.clearfix{ *zoom:1; } .clearfix:after{ content:'clear'; display:block; height:0; clear:both; overflow:hidden; visibility:hidden; }
如今刷新後的效果就是:
這種方法和BFC清除浮動我的用的比較多,實際開發中,其實這兩種就夠用了。
好的,清除浮動我也就簡單地提到這裏!
總結
以上我總結了本身對標題中列出的三個知識點——(多欄自適應佈局,水平垂直居中,清除浮動)的一些我的積累。若是有什麼錯誤的話,歡迎留言指正。
若需轉載,請註明出處,謝謝合做!