css盒模型

CSS盒模型

• 本文主要知识点学习
• 不知之处请留言指出

盒模型：box-sizing

• 标准盒模型: content-box 宽高即为content的宽高
• IE盒模型：border-box 宽高为content+padding+border

获取盒子的宽高

1. dom.style.width/height 只能获取内联样式设置的宽高
2. dom.currentStyle.width/height 只兼容IE
3. window.getComputedStyle(dom).width/height 兼容chromefirefox
4. dom.getBoundingClientRect() 可以拿到top left width height

BFC块级格式上下文

原理/渲染规则：

1. 垂直方向上子元素边距重叠
2. BFC的区域不会与浮动元素的区域重叠
3. 在页面上是一个独特的元素（外面的元素不回影响里面，里面的元素也不会影响外面）
4. 计算BFC的高度，浮动元素也会参与计算

创建BFC

1. 设置了浮动（float）
2. position 只要不是static,relative || 反之 fixed 和 absolute
3. display inline-block、table-cell、table-caption table
4. overflow: hidden/auto 不为visible

应用场景

• 消除边距重叠 - 给边距重叠的一个元素添加一个BFC的父元素
• 浮动重叠影响 - 给元素设置BFC，这样就不回与浮动元素重叠
• 清除浮动 -子元素float，也会参与BFC的高度计算，从而清除浮动