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的高度计算，从而清除浮动

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6755