盒子模型

Posted 2021-01-23 armouy

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