CSS盒模型&BFC

1.盒模型的概念

在HTML中，可以把元素都看做盒子，每个盒子包括内容（content）、内边距（padding）、边框（border）、外边距（margin）。

2. 盒模型有两种

标准盒模型 (W3C盒子模型)：一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型 (IE盒子模型):一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

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

var obj = document.getElementById("test");

var style = null;
if (window.getComputedStyle) {
     
    style = window.getComputedStyle(obj, null);    // 非IE
} else {
      
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

5.边距重叠

5.1什么是边距重叠？
5.2什么情况下会发生边距重叠？
5.3如何解决边距重叠？
边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

父子关系的边距重叠：

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

        
   
"box" id="fat">
        
"child">
    

同级关系的重叠：

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

  
   
"fat">
        
"child-one">
        
"child-two">
    

6.BFC

BFC的基本概念: BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
BFC原理:

1.BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2.BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3.BFC的区域不会与float box重叠。
4.计算BFC的高度时，浮动元素也被计算在内。

BFC如何产生:

在box属性值为这些的情况下，都会让所属的box产生BFC。

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

BFC的使用场景

1. 可以用来自适应布局

    

        
        
"left">
        
"right">
        
    

2. 可以清除浮动：

        

            
            
"float">我是浮动元素
        

3. 解决垂直边距重叠：

    
    
1
    
"overflow:hidden">
        
2
    
    
3
    

---

---

---

box-sizing主要作用：指定盒子的类型。

• 可以通过box-sizing的值来切换盒模型，它的取值可以为content-box、border-box；
• content-box; 是指盒模型的宽高就是content的宽高，是标准盒模型下设置的,box-sizing的默认属性是content-box。
• box-sizing: border-box; 是IE下的设置。

两个模型的不同点

标准盒模型	怪异盒模型
增加padding,border会将盒子撑开	不会被撑开，增加padding，border只会让content的宽高更小

• W3C标准盒子模型的width和height，是content的宽高；
• IE盒模型的width和height，是content、padding、border三部分合起来的宽高。

---

W3C 标准盒子（content-box）：又称内容盒子， 是指块元素box-sizing属性为content-box的盒模型。 一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素.宽高是以内容区域为准
标准盒模型的内容大小就是content的大小,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。标准模型的宽度指的就是content的宽度，不包含padding和border。

可以理解为现实生活中的气球，大小可以随内容的变化而变化。

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

• 标准模型计算的是 content 的宽/高
  

盒子的总宽高 = css定义的宽高 + padding + border + margin（注意计算时左右和上下的padding、margin都是两个）

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。宽高是以边框为准
怪异盒模型(IE),是content + padding +border 总的大小。width 和 height 指的是内容区域+border+padding的宽度和高度。

可以理解为现实生活中的铁箱子，大小不能被内容改变。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

• IE 模型计算的是 content + padding + border 的宽/高