泡泡同学的微博跟新了，bfc和 ifc

泡泡同学的微博跟新了，赶紧来看，css布局新内容，bfc和ifc.希望对你有帮助



css布局

一、盒子定位

  postion

    可选值：static (默认)

         absolute(绝对定位) 按照靠最近的定过位的父元素定位，如果父元素没有定位按body定位

         relative(相对定位) 相对于元素本身定位

         fixed(固定定位)    相对于浏览器窗口定位

     注意：1、相对定位元素原来的位置被保留

         2、绝对定位元素原来的位置被清空  （要移动）

         3、固定定位让元素原来位置被清空  （不移动）

二、设置内容溢出部分

    1、overflow

        可选值：  visible 不会被修剪

                 hidden 会修剪，被修剪的部分不可见

                 scrou  滚动条显示内容，显示内容会被修剪 

      2、 对元素形状进行裁剪

         clip  (绝对定位的元素才能裁剪)

         比如：rect(20px 100px 30px 100px)

         设置顺序：上，右 下 左

         上和左设置的数字表示：所有裁剪区域的高度

         右和下设置的数字表示：所有显示的区域的大小

      3、z-index

        设置重叠元素的显示顺序

        哪个的值越大，就显示哪个

  

     

三、bfc （块级格式化上下文 ）

    规则：

    1、bfc环境中的所有元素按垂直方向摆放（一个接一个）

    2、相琳盒子在垂直方向上的margin值会重叠

    3、内部盒子会以bfc的左边（右边）线接触，浮动也是这样

    4、bfc区域不会与浮动盒子重叠

    5.bfc环境中的子元素以外界分离，不会影响到外面元素，而外面元素也不会影响到bfc里面

    6、bfc中浮动元素会参与计算

四、bfc触发方式

     float：值不为none

     position:absolute fixed

     display:inline-block 

     overflow:不为visible

五、IFC（行级格式化上下文）
规则：

    1、ifc中的元素会在一行从左到右排列

    2、在一行上的所有元素会该区域形成一个行框

    3、行框的宽度为包含框的宽度，高度为行框中最元素的高度

    4、浮动的元素不会在行框中，并且浮动元素会压缩杭框的宽度

    5、行框的宽度容纳下子元素时，子元素会换到下一行显示，并会产生新的的行框

    6、行框内的元素遵循 text-align 和 vertical-align