css盒模型

image.png

w3c的盒模型：宽高只针对content宽高。
IE的盒模型：宽高针对的是content+padding+border的宽高。

box-sizing: content-box w3c模型
box-sizing: border-box IE模型

js获取：
getElementById("aaa").style.width/height 【内联】
dom.currentStyle.width/height (渲染以后的结果 只支持IE)
window.getComputedStyle(dom).width/height
dom.getBoundingClientRect().width/height(计算viewport绝对位置左顶点)

BFC(块级格式化上下文)：
1、父子元素的边距重叠
2、兄弟元素的边距重叠

BFC的生成

float的值不为none；
overflow的值不为visible；
display的值为inline-block、table-cell、table-caption；
position的值为absolute或fixed；
看到有人把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

https://www.jianshu.com/p/76484dff1cb5

http://blog.csdn.net/riddle1981/article/details/52126522

image.png

    
    
    


    
overflow 规定当内容溢出元素框时发生的事情
    

        
        

    

    
    

        
        
1
        

            
2
        
        
3
    

    
    

        
        

        

    
        
    

        
我是浮动元素