HTML&&CSS

盒模型与BFC

1，什么是盒子模型

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

2，盒子模型有哪几种

标准模式下：一个块的总宽度 = width+marign(左右)+padding(左右)+border(左右)
怪异模式下：一个块的总宽度 = width+marign（width包括padding，border）

3，标准和怪异模型的转换

• box-sizing:content-box 将采用标准模式的盒子模型标准
• box-sizing:border-box 将采用怪异模式的盒子模型标准
• box-sizing:inherit 规定应从父元素继承box-sizing的属性值

4，js盒模型

怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height

CSS布局中的BFC问题

1，面试题——双边距（边距重叠）

**边距重叠：**两个box都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值最大的那个为最终结果显示在页面上。

有两种边距重叠的情况fu

1，父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素设置为BFC的情况下，父元素也会产生外边距

解决办法：给父元素添加 overflow:hidden这样父元素就会变为BFC，不会随子元素产生外边距

2，同级关系的重叠

同级关系会在垂直方向上外边距会出现重叠的情况，最后外边距的大小取两者绝对值最大的那个

可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

3，回答边距重叠—BFC

什么是BFC

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