关于盒模型相关的问题

开门见山

盒模型

什么是盒模型

当对一个文档进行布局的时候，浏览器渲染引擎会根据CSS-Box模型将所有的元素表示为一个矩形盒子。CSS决定这些盒子的大小，位置以及属性。 来点图吧

他们的区别在于width和height的计算方式不同

如何设置这两种模式

box-sizing:content-box/border-box

如何使用JS获取他们的高度呢

• dom.style.width/height 只能获取到内联元素的宽高
• dom.currentStyle.width/height 只有IE支持，兼容性不好
• window.getComputedStyle(dom).width/height 所有的浏览器都支持
• dom.getBoundingClientRect() 该方法返回元素的大小及其相对于视口的位置，（大家可以打印出来看看）
  当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.pageXOffset和window.pageYOffset），这样就可以获取与当前的滚动位置无关的值。

边距塌陷

两个盒子如果都设置了边距，且垂直方向上，那他们的边距会发生重叠(也就是第一个的margin-bottom和第二个的margin-top),以绝对值大的那个为最终的显示结果。那如何解决它，请看下面

BFC

什么是BFC

块格式化上下文（Block Formatting Context，BFC） 是WEB页面可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域（MND）。通俗点讲，就是就是一个特殊的盒子，内部有自己的布局方式，不受外界影响。

如何产生BFC

• float是left/right
• position是absolute/fixed
• overflow是auto/hidden
• display是inline-block/table-cell/flex/inline-flex

BFC规则

• 属于同一个 BFC 的两个相邻 Box 会垂直排列， margin 会发生重叠
• BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，环绕于周围

BFC的作用

• 自适应布局，两栏布局
• 清除浮动
• 解决边距塌陷（在塌陷元素外层添加一层div，并设置BFC）

---

（图片来源网上）

转载于:https://juejin.im/post/5c70ff70e51d45346b313d20