盒子模型，bfc问题

第一类问题：盒子模型

两种：w3c标准模型，ie模型

*{
    box-sizing:content-box
 }
*{
    box-sizing:border-box
 }

盒子模型：border padding margin

区别

1.标准模型实际宽度：margin + border + padding + content(width)

2.ie模型实际宽度：margin + (border + padding + width)--看作(content)

js如何获取盒模型的宽度，高度

// 内联样式宽
const h1 = dom.style.width;
// 渲染的宽，仅仅支持ie
const h2 = dom.currentStyle.width;
// 渲染的宽,兼容性更好
const h3 = window.getComputedStyle(dom).width;
// 获取dom元素距离初始点的位置
const h4 = dom.getBoundingClientRect().width;

第二类问题：BFC问题

bfc详细解答,知乎

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

Bfc规则

1.内部的Box会在垂直方向一个接着一个地放置。

2.Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。

3.每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。

4.BFC的区域不会与float box重叠。

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

6.计算BFC的高度时，浮动子元素也参与计算。

bfc建立方法

元素	属性
根元素
float	left,right
position	absolute,fixed
overflow	hidden,auto,scroll
display	inline-block, table-cell

BFC的应用

1.浮动的元素会造成坍塌，或者覆盖原有元素

方法:给父元素，兄弟元素加成bfc---这样就会单独计算一个bfc区块

2.垂直方向上margin重合的问题

方法：把各自做成bfc块，单独计算margin,比如加overflow:hidden