面试题整理

盒模型

        在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成

标准盒模型：总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型：总宽度= width + margin(左右)

标准和怪异模型的转换：

标准盒模型：box-sizing:content-box

怪异盒模型：box-sizing:border-box

怎么获取和设置box的内容宽高：
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle.width/height

BFC：​​​​​​​

什么是BFC？

        BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

BFC可以用来自适应布局、可以清除浮动、 解决垂直边距重叠

BFC有两种边距重叠的情况：

        1. 父子关系的边距重叠

        父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden这样父元素就变为 BFC，不会随子元素产生外边距

        2. 同级兄弟关系的重叠：

        同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个，可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

为什么要清除浮动？

清除浮动主要是为了解决，父元素因