盒子模型

标签：block   display   rect   getc   abs   原理   盒子模型   height   hidden   

1.盒子模型：W3C标准盒子模型和IE模型。区别以及如何设置此处省略~

2.JS如何获取盒模型的宽和高

• dom.style.width/height;(只能获取内联样式)
• dom.currentStyle.width/height(仅IE浏览器支持)
• window.getComputeStyle(dom).width/height (兼容大多数的浏览器)
• dom.getBoundingClientRect().width/height

3.BFC

BFC:块级格式化上下文。

BFC的原理：

• BFC在这个元素的垂直方向会出现边距重叠；
• BFC区域不会与浮动区域重叠；
• BFC在页面上是个独立的容器，外部元素不会影响内部元素，内部元素也不会影响外部的元素；
• 在计算BFC的高度时，会计算上浮动元素的高度。

如何创建BFC:

• overflow:auto | | hidden;
• display:inline-block | | table-cell;
• float: left | | right;
• position:absolute | | fixed

盒子模型

标签：block   display   rect   getc   abs   原理   盒子模型   height   hidden   

原文地址：https://www.cnblogs.com/armouy/p/10035709.html