关于css中盒模型随记

一、背景

　　之前对盒模型一直只知道个大概，现在有空刚好记录下。

二、盒模型分类

　　1、指的是div盒子的构成：content+padding+border+margin

　　2、标准盒模型

　　　　指的是w3c对盒模型的一种计算方式　　=》　　content

　　3、ie盒模型

　　　　指的是ie对盒模型的计算方式　　=》　　content + padding + border

三、获取盒子的对应宽高

　　dom.offsetWidth

　　dom.offsetHeight

四、BFC相关

　　1、bfc即块级格式化上下文。

　　2、原理

• 内部的box会在垂直方向一个接着一个放置
• box垂直距离由margin决定，属于同一个bfc区域的相邻的两个box边距会重叠
• 每个元素的margin   box的左边与包含块border box的左边相接触（元素从左排列，即使存在浮动也是如此）
• bfc区域不会与float box重叠
• bfc区域就是页面上一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦是
• 计算bfc区域的高度，浮动元素也参与计算

3、主要作用

• 清除浮动
• 清除边距重叠

4、如何生成bfc

• 根元素
• float属性不为none
• position属性为absolute或者fixed
• display属性为flex、inline-block等
• overflow属性不为visible