盒模型分类
1.IE盒模型
box-sizing:border-box;
2.W3C标准盒模型
box-sizing:content-box;
js 如何获取盒模型对应的宽和高
// 只能取到内联样式的宽高
console.log('style:' + box.style.width) // 100px
// 内联样式和外联样式的宽高都能取到，但只有 IE 支持
console.log('currentStyle:' + box.currentStyle.width) // 100px
// 内联样式和外联样式的宽高都能取到，几乎所有主流浏览器都支持
console.log('getComputedStyle:' + getComputedStyle(box).width) // 100px
// 内联样式和外联样式的宽高都能取到，几乎所有主流浏览器都支持，取到的是盒子总宽度
console.log('getBoundingClientRect:' + box.getBoundingClientRect().width)
BFC 原理
- 在 BFC 的垂直方向上，边距会发生重叠
- BFC 区域不会与 浮动区域重叠
- BFC 在页面上是一个独立的容器，与其他元素互不影响
- 计算 BFC 高度时，浮动元素也会参与计算
如何创建 BFC
- float 值不为 none ，只要设置了浮动，当前元素就创建了一个 BFC
- position 值不为 static/relative ，只要设置了定位，当前元素就创建了一个 BFC
- display 值不为默认，只要设置了 display，当前元素就创建了一个 BFC
- overflow 值不为 visible ，只要设置了 overflow，当前元素就创建了一个 BFC
BFC 使用场景
1.解决margin塌陷问题
给子元素加一个父元素，并设置父元素为BFC
2.侵占浮动元素的位置
设置非浮动元素为 BFC
3.清除浮动
设置父元素为BFC
