CSS 盒模型

盒模型分类

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 原理

1. 在 BFC 的垂直方向上，边距会发生重叠
2. BFC 区域不会与 浮动区域重叠
3. BFC 在页面上是一个独立的容器，与其他元素互不影响
4. 计算 BFC 高度时，浮动元素也会参与计算

如何创建 BFC

1. float 值不为 none ，只要设置了浮动，当前元素就创建了一个 BFC
2. position 值不为 static/relative ，只要设置了定位，当前元素就创建了一个 BFC
3. display 值不为默认，只要设置了 display，当前元素就创建了一个 BFC
4. overflow 值不为 visible ，只要设置了 overflow，当前元素就创建了一个 BFC

BFC 使用场景

1.解决margin塌陷问题
给子元素加一个父元素，并设置父元素为BFC
2.侵占浮动元素的位置
设置非浮动元素为 BFC
3.清除浮动
设置父元素为BFC