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的条件，以及最经常使用的解决方法便可。