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