css知識：flex 、bfc

1.flex

       flex是css3新出來的佈局方式，是很是厲害經常使用的東西。

       詳情可查詢www.runoob.com/w3cnote/fle…

2.flex易錯點：

       2.1 flex-grow （擴大）

<div class="main">          
     <div class="item1">11</div>          
     <div class="item2">22</div>          
     <div class="item3">33</div>  </div>
<style>            
.main{
    width:500px;
    height: 200px;
    display: flex;
}            
.item1{
     width:100px;                
     flex-grow: 1;                
     background: #f00; 
}            
.item2{
     width:100px;                
     background: #f60; 
 }            
.item3{               
    width:150px;                
    background: #ff0 
} 
</style>複製代碼

  頁面ui爲:

咱們發現：

   item1元素佔據了除了item2和item3全部的位置。

爲何會出現這樣的狀況？

    那咱們須要從"剩餘空間"這個詞提及。

    什麼是剩餘空間呢？具有flex環境的父容器，一般是有一條主軸和一條側軸，默認狀況下主軸就是水平從左向右的，側軸是垂直從上到下的（相似書寫模式）。 剩餘空間就是父容器在主軸的方向上還有多少可用的空間。

     main是父容器，item一、item二、item3就是子元素，那麼

剩餘空間 = main元素寬度 - item1寬度 - item2寬度 - item3寬度 = 150px;（上述代碼計算）

flex-grow其實就是參與剩餘空間的寬度，默認爲0，說明元素默認都不會參與使用剩餘空間。

1. 此例中，只有item1設置了flex-grow：1，也就是說剩餘空間1等分，所有給了item1，因此item1的實際寬度爲:250px;
   
2. 若是此例中，item2也設置了flex-grow:2，則說明剩餘空間已經3等分了，(item1和item2都設置了flex-grow)，因此item1寬度 = 100 + 150 / 3 *1 = 150px; item2寬度 = 100 + 150 /3 * 2 = 200px;

    2.2 flex-basis

     這個屬性值的做用也就是width的替代品。 若是子容器設置了flex-basis或者width，那麼在分配空間以前，他們會先跟父容器預定這麼多的空間，而後剩下的纔是納入到剩餘空間，而後父容器再把剩餘空間分配給設置了flex-grow的容器。 若是同時設置flex-basis和width，那麼width屬性會被覆蓋，也就是說flex-basis的優先級比width高。有一點須要注意，若是flex-basis和width其中有一個是auto，那麼另一個非auto的屬性優先級會更高。

   2.3 flex-shrink （縮小）

    注意一句話: 若是剩餘空間爲正數，則說明子項目寬度之和小於 父元素項目寬度，也就不存在flex-shrink

    當子項目不存在換行，且子項目寬度之和 大於 父元素項目寬度，爲了完整的顯示子元素，確定會子項目進行縮小處理，那這個縮小規則是什麼呢？

     flex-shrink：默認爲1，也就說若是子項目寬度之和 大於 父元素項目寬度，那麼全部的子元素都縮小相同的寬度。

<div class="main">          
    <div class="item1">11</div>          
    <div class="item2">22</div>          
    <div class="item3">33</div>  
</div>

<style>            
.main{               
    width:500px;                
    height: 200px;               
    display: flex;            
}            
.item1{
    width:200px;                
    background: #f00; 
}            
.item2{                
     width:300px;                
     background: #f60;
     flex-shrink:2            
}            
.item3{                
    width:150px;                
    background: #ff0 
}
 </style>複製代碼

     若是此例中，item2的flex-shrink：2，若是默認的壓縮率是x，則item2的壓縮率爲2x

     則 500 = 200 *（ 1-x） + 300 *( 1-2x) +150*(1-x) 能夠計算出每一個子元素各佔的寬度。

     若是flex-shrink:0;則說明這個容器在任什麼時候候都不被壓縮

    也就是說:必須子元素合盒子寬度之和 大於 父元素，該屬性纔會生效。

        2.3 flex

          flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

總結：

一、剩餘空間＝父容器空間－子容器1.flex-basis/width - 子容器2.flex-basis/width - …
二、若是父容器空間不夠，就走壓縮flex-shrink，不然走擴張flex-grow；
三、若是你不但願某個容器在任什麼時候候都不被壓縮，那設置flex-shrink:0；
四、若是子容器的的flex-basis設置爲0(width也能夠，不過flex-basis更符合語義)，那麼計算剩餘空間的時候將不會爲子容器預留空間。
五、若是子容器的的flex-basis設置爲auto(width也能夠，不過flex-basis更符合語義)，那麼計算剩餘空間的時候將會根據子容器內容的多少來預留空間。

2.BFC

2.1 知識準備(對以往知識的從新理解)

• float到底由於什麼出現？ 

        在pc時代所謂的浮動佈局，實際上是已經被濫用了，甚至出了一系列的‘bug’，所謂的高度塌陷等等。其實float出現的緣由：爲了實現文字環繞效果！！！

• float有那些特性？

          float存在的特性：

          1.   脫離文檔流

          2.  塊狀該元素（一個內聯元素，設置了float，則至關於爲該內聯元素設置了 display:block）

          3.  沒有margin重疊

          4.   包裹性

假設浮動元素父元素寬度 200px，浮動元素子元素是一個 128px 寬度的圖片， 則此時浮動元素寬度表現爲「包裹」，就是裏面圖片的寬度 128px      

• margin重疊問題？

          1.相鄰兄弟元素之間的margin重疊。(發生在塊級元素，且只在垂直方向，並不是某些博客寫的僅僅在bfc裏出現，記住這是公用的規則)

          2.父元素和第一個子元素和最後一個子元素的的重疊問題(也是在垂直方向)

• float脫離文檔流? 和absolute的區別？

          我記的當初學習float absolute這些css屬性時，說到他們會脫離文檔流

// 看下面代碼(來自css世界-張鑫旭)						<div class="father">

   <img src="me.jpg">

   <p class="animal">小貓1，小貓2，...</p>

</div>img { float: left; }它的效果是一個：文字環繞圖片的效果。
// 明明當初學的時候說到： float元素會脫離文檔流，那應該p內容會從最左邊開始展現，那爲何是在img右邊
呢？
// 其實還有一個概念：部分無視和徹底無視
部分無視：(以上面代碼爲例) 雖然img元素脫離了文檔流，p會無視img(咱們發現，p的width確實是屏幕寬度)，
可是p內部的文本會爲img讓出位置(全部的float元素都有這個問題)
徹底無視：好比absolute元素，其餘元素會徹底無視

*** 這由於「部分無視」的緣故，纔能有「文字環繞效果」 ***複製代碼

• 提醒

       bfc這個東西，不要看博客！看書便可，（張鑫旭大佬的《css世界》）！

       由於博客裏寫的繁雜且亂，對於咱們通常開發而言，僅僅知道bfc能幹什麼？能解決咱們什麼問題便可。

       由於css的世界真的是繁雜且浩瀚，須要大量的時間去閱讀相關的知識。

2.2 BFC核心

         概念：塊級格式化上下文（block formatting context) ，反正看了聽了也不懂。（能夠簡單理解爲生成了一個封閉的空間，內部元素出不來，外部元素進不去，具備很強的防護性）

         核心理念：只要一個元素具備bfc，內部元素如何折騰都不會影響到外面的元素。

         思考：

               咱們上面說的margin重疊問題，以及float元素致使父元素高度塌陷問題。

              是否是這樣理解，只要這個父元素具備了bfc，那float致使的高度塌陷問題也就解決          了？若是bfc不解決高度塌陷問題，則與它的「核心理念」就背道而馳了。不解決這個問            題，那必然會影響到外面元素的問題。

               至於margin重合問題，若是該元素有bfc，若是margin重合問題依然存在，那勢必           影響到外面元素。（聯想一下，父元素和第一個子元素和最後一個子元素的的重疊問               題，若是第一個子元素具備了bfc，而它的重合問題依然存在，必然與「核心理念」背道             而馳）

         解決的問題：

              1.margin重疊問題解決了

              2.高度塌陷問題解決了

        問題來了，如何使一個元素具備bfc？

        讓一個元素具備bfc的條件有哪些？

       

• <html>根元素;

• float 的值不爲 none;

• overflow 的值爲 auto、scroll 或 hidden;

• display 的值爲 table-cell、table-caption 和 inline-block 中的任何一個;

• position 的值不爲 relative 和 static。 

   

       咱們想一想：咱們以前寫的清除浮動，不就是父元素{overflow:hidden},其實它是生成了bfc，解決了高度塌陷問題。

        因此，咱們之後遇到margin重疊問題，高度塌陷問題，第一時間想到bfc能夠解決。  

        咱們平時很經常使用的解決方式就是 overflow:hidden(由於它形成的影響相對較小)

        其實這裏，咱們常常遇到的想不通的css問題都迎刃而解了，那其實bfc最最重要的特性是構建流式佈局。

        ** 面試常見問題： 左邊固定寬度，右邊自適應佈局

       最最多見的解決方案：

// 方法1
.left{
 float:left;
 width:200px;
 height:200px
}
.right{
  overflow:hidden
}
// 方法2
.left{
 float:left;
 width:200px;
 height:200px
}
.right{
  display: table-cell; width: 9999px}// 以上均支持ie8及其以上適配               複製代碼

2.3 BFC的總結

在咱們水平還有限的狀況下，只須要記住：當咱們遇到margin重疊，高度塌陷問題，流式佈局問題，第一印象想到bfc。想到生成bfc的條件，以及最經常使用的解決方法便可。