关于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