关于css盒子模型和BFC的理解

CSS盒子模型

包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）

一般元素总宽度 = element的width+padding的左右边距+margin左右边距值+border的左右宽度

高度同理

外边距合并

上下外边距会合并一般发生在普通文档流中，行内框，浮动框或绝对定位之间外边距不会合并

一般合并的外边距会取那个较大的值

Box-sizing属性（content-box|border-box|inherit）

Content-box: 总宽度 = margin+border+padding+width

Border-box:总宽度 = width+margin   其中盒子的width包含padding+border+element

inherit:规定从父元素继承box-sizing的属性值

实践中的问题

• Margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom）

      ->父元素没边框，设置第一个子元素的margin-top的值会加在父元素上，解决方法如下：  

1. 给父元素加边框
2. 给父元素设置padding
3. 父元素添加overflow：hidden
4. 父元素加前置内容生成（推荐）

  例子：.parent{

              Width:500px;

              Height:500px;

              Background:red

}

.parent : before{

              Content:””;

              Display:table

}

.child{

              Width:200px;

              Height:200px;

              Background:green;

              Margin-top:50px

}

  <div class=“parent”>

     <div class=“child”>

        </div>

</div>

浏览器间的盒子模型

1. ul在MOzillz中默认有padding值，而在IE中只有margin值
2. 标准盒子模型与IE盒子模型之间差异，IE更像box-sizing：border-box，解决方法就是在HTML模板加上doctype

盒子模型画三角形

.triangle{

        Width:0;

        Height:0;

        Border:20px solid transparent;

        Border-top:20px solid red;

}//向下的箭头

 

 

BFC理解（块级格式化上下文，独立的渲染区域，规定了内部的BFC如何布局，并与这个区域的外部互不相干）

BOX、Formatting Context的缩写

Box：CSS布局的基本单位

• box常用盒子：(根据display的你属性区分盒子)

     -> block-level box:display属性为 block,list-item,tabel的元 素，并且参与BFC；

    -> inline-level box:display 属性为 inline,inline-block,inline-table,参与IFC

• 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