关于盒模型相关的问题

男娘i 2022-01-19 01:33 199阅读 0赞

开门见山

#### 盒模型 ####

##### 什么是盒模型 #####

当对一个文档进行布局的时候，浏览器渲染引擎会根据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