如何理解盒模型

如何理解盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

CSS盒模型分为标准模型、IE模型

标准模型和IE模型的区别

计算宽度和高度的不同

标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin，即 width/height 只是内容高度，不包含 padding 和 border 值

IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin，即 width/height 包含了padding 和 border 值

CSS如何设置这两种模型

标准( 浏览器默认设置 )

box-sizing: content-box; 

IE

box-sizing: border-box

JS如何获取盒模型对应的宽和高

• dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。

• dom.currentStyle.width/height （只有IE兼容）取到的是最终渲染后的宽和高

• window.getComputedStyle(dom).width/height 同上，但是多浏览器支持，IE9 以上支持

• dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，IE9 以上支持，还可以取到相对于视窗上下左右的距离

• dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

BFC

BFC (Block formatting context) 直译为"块级格式化上下文"，它是一个独立的渲染区域，它规定了区域内部如何布局，并且与这个区域外部毫不相干

如何创建BFC

• float的值不是none
• position的值不是static或者relative
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible（通常在最后元素设置overflow: hidden;）

BFC的作用

• 利用BFC避免margin重叠

  垂直放置的两个块级，上面块的margin-bottom和下面块的margin-top会重叠（保留二者最大值）

  例：块A、块B垂直摆放，块A下边距30px，块B上边距40px，不使用BFC情况下二者之间的边距为40px，而非70px

• 自适应两（三）栏布局

  使用BFC后，因BFC区域之间不会互相干扰，所以可以自适应并列展示

• 避免元素被浮动元素覆盖

  使用BFC后，BFC区域会与浮动区域并列展示

• 解决父级元素高度塌陷，清除浮动

给父元素使用BFC，则使浮动元素也会参与高度计算