盒模型

基本概念

盒模型由content、padding、border和margin组成。
分类：标准盒模型（默认）和IE盒模型。
区别：标准盒模型的width/height为content的宽高，而IE盒模型的width/height为content+padding+border之和的宽高。

设置方法

/* 标准模型 */
box-sizing: content-box;
 /*IE模型*/
box-sizing: border-box;

JS获取宽高

JS获取对应盒模型的宽高有以下几种方法：

1. dom.style.width/height
   这种方法只能获取dom元素内联样式所设置的宽高，即该节点的样式在style标签中或外联的css文件中设置的话，通过这种方法是获取不到dom元素宽高的。
2. dom.currentStyle.width/height
   这种方法获取的是页面渲染完成后的结果，就是说不管用哪种方法设置都可以获取到，但是只有IE浏览器支持。
3. window.getComputedStyle(dom).width/height
   这张方法和方法2几乎一致，只是可以兼容更多的浏览器。
4. dom.getBoundingClientRect().width/height
   这种方法是根据元素在视窗中的绝对位置来获取宽高的。
5. dom.offsetWidth/offsetHeight
   最常用，兼容性最好。

边距重叠

如下图所示，子元素设置margin-top:20px;，父元素没有设置，但是父元素也一起有了边距

边距重叠示意图

代码如下：

    
    


    
上边的标签1
    

        
子标签
        父标签2
    

边距重叠解决方案(BFC)

首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

BFC的原理

1. 内部的box会在垂直方向，一个接一个的放置
2. 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
3. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
4. bfc的区域不会与浮动区域的box重叠
5. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
6. 计算bfc高度的时候，浮动元素也会参与计算

怎么创建BFC

1. float属性不为none（脱离文档流）
2. position为absolute或fixed
3. display为inline-block,table-cell,table-caption,flex,inine-flex
4. overflow不为visible
5. 根元素

应用场景

1. 自适应两栏布局
2. 清除内部浮动
3. 防止垂直margin重叠

BFC解决边距重叠例子

代码：

    
    
    


    

        
上
        margin-bottom:30px;
    
    

        
下
        margin-top:50px;
    

 

效果图：

边距重叠示意图

用BFC修改后的部分代码如下:

//...
    

        
上
        margin-bottom:30px;
    
     
    

        

            
下
            margin-top:50px;
        
    
//...

效果图：

BFC解决边距重叠示意图

谢谢~