多欄自適應佈局+水平垂直居中+清除浮動——集錦

前言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

5AUJTVB~)}IAM~3913()5F4_thumb[1]

這是由於div元素是塊級元素,默認是會佔據整行的,因而咱們就採用浮動的方法來解決這個問題。3d

此時咱們只須要再添加以下樣式:

.left,.right{
  float:left;
}

那麼就能獲得咱們想要的結果了:

NF`QG4~)Y)[)VY%TD}(YRJ2_thumb[2]

因爲這裏只有兩欄佈局,並且都是固定佈局,而且恰好佔滿父容器,因此第二個子元素右浮動也是同樣的效果。但若是是多欄佈局(好比四欄佈局)而且恰好佔滿父容器的話,那麼最後一個能夠是左浮動或者右浮動。

對於兩欄固定佈局,其實並不必定兩個子元素都須要左浮動,能夠第一個子元素左浮動,第二個設置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;
}

此時運行看一下結果:

$Q3Q)~TMTM]_{%H8NL7()@T_thumb[1]

由於如今已經改爲流式佈局了,因此容器的寬度會隨着瀏覽器的寬度而按比例縮放。固然,須要配合浮動或者定位。

可是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;
}

結果就是這樣的:

72LU~RHH1XJ6O8FB8K$PK`L_thumb[1]

第二種方法就是絕對定位+外邊距:

.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的一些相關知識點直接放上來給你們瞭解一下:

BFC佈局規則:
  • 內部的Box會在垂直方向,一個接一個地放置。
  • Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  • 每一個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,不然相反)。即便存在浮動也是如此。
  • BFC的區域不會與float box重疊。
  • BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。
  • 計算BFC的高度時,浮動元素也參與計算
哪些元素會生成BFC:
  • 根元素
  • float屬性不爲none
  • position爲absolute或fixed
  • display爲inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不爲visible

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>

這時的狀況是這樣的:

[{6O_ZOOV4ELX(~63{C]0UE_thumb[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;
  order:1;
}
.right{
    width:200px;
   height:300px;
   float:right;
   background:#ddd;
   order:3;
}
.center{
    height:100%;
    background:#666;
    flex:1;
    order:2;
}

這時候出來的效果就是咱們想要的:

HRKDFY]ADRI9`BUQ){KZZTL_thumb[1]

好的,關於多欄自適應佈局我就講到這裏,其餘方面的知識擴展與應用,就留給你們去研究了。

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;
}

如今的狀況是這樣的:

360截圖20150907094514427

由於咱們是已知寬高的,因此能夠給子元素加外邊距擠到中間位置,或者經過絕對定位到中間位置,固然還有一些方法,我就放在未知寬高的狀況下再介紹,由於已知寬高包含於未知寬高,因此爲了不重複,我就分開了,這裏就只講僅適合已知寬高的狀況。

咱們給子元素加上外邊距:

.child{
  margin-top:100px;
  margin-left:100px;
}

這時內部子元素就水平垂直居中了。

EXK{G1@JN8Y_7@R0M5VPCOT

如今使用絕對定位來實現:

.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仍是收到浮動的影響。

360截圖20150907132503001

OK,如今給.clear加上清除浮動:

.clear{
    clear:both;
}

刷新一下效果就出來了:

360截圖20150907132808775

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;
}

效果是這樣的:

360截圖20150907134136407

這裏父容器是沒有設置固定高度的,原本第一個子元素浮動以後,父元素的高度會塌陷到跟第二個子元素同樣高,但因爲這裏分別給第二個子元素和父元素都設置了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;
}

此時子元素浮動了,脫離了文檔流,因此父元素高度酒塌陷了:

360截圖20150907134730403

能夠看到父元素的邊框擠在一塊兒了。

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;
}

如今刷新後的效果就是:

360截圖20150907135058497

這種方法和BFC清除浮動我的用的比較多,實際開發中,其實這兩種就夠用了。

好的,清除浮動我也就簡單地提到這裏!

 

總結

以上我總結了本身對標題中列出的三個知識點——(多欄自適應佈局,水平垂直居中,清除浮動)的一些我的積累。若是有什麼錯誤的話,歡迎留言指正。

 

若需轉載,請註明出處,謝謝合做!

相關文章
相關標籤/搜索