前端面试之css3盒模型

1.css3盒模型

每个html都可以叫做盒模型,盒模型由外而内包括:边距（margin）、边框（border）、填充（padding）、内容（content）。页面中所占的实际宽度是它们全部加起来。盒模型有标准盒模型和IE盒模型。

1.1标准盒模型

可以通过box-sizing：content-box；设置

1.2 IE盒模型

可以通过box-sizing:boder-box来设置

1.3拓展面试问题

1.3.1获取盒子的宽高

• scrollWidth和scrollHeight获取元素可见内容元素大小
• offsetWidth和offsetHeight获取元素实际大小，包含边框滚动条等
• window.getComputedStyle(dom).width/height获取元素的宽高

1.3.2边距重叠（BFC）

1.问题

• 如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
• 同级元素在垂直方向上外边距会出现重叠情况，最后外边距大小取两者绝对值大的那个

2.解决方案

• BFC的基本概念，块级格式化上下文。它决定了元素如何对其内容进行定位，以及与其他元素的关系和互相作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
• BFC原理：
  a、BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
  b、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里面的。
  c、BFC的区域不会与float box重叠。
  d、计算BFC的高度时，浮动元素也被计算在内。
• BFC如何产生
  • overflow不为visible；
  • position: absolute/ fixed;
  • overflow不为visible；
  • display为inline-block, table-cell, table-caption, flex, inline-flex