IE盒模型和W3C盒模型

1.什么是盒模型？

        盒模型的组成：padding+border+content+margin。

        有两种盒模型，一种是标准（W3C）盒模型，它的宽高：content

        一种怪异（IE）盒模型，它的宽高:padding+border+content

2.怎么设置盒模型？

        box-sizing:border-box; //IE盒模型

        box-sizing:content-box; //标准盒模型

3.边距重叠

       如果父盒子有margin-bottom,子盒子有margin-top;这个时候很可能发生边距重叠，问题那怎么解决边距重叠？可以通过BFC来解决。        

BFC的原理

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

怎么取创建bfc

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

应用场景

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

4.获取宽高

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

为了方便书写，以下用dom来表示获取的HTML的节点。

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

　　这个就没什么好说的了，最常用的，也是兼容最好的。

       

 <style>
        .box {
            width: 200px;
            height: 200px;
            padding:10px;
            background-color: lawngreen;
            box-sizing: border-box;
        }
    </style>  

alert(document.getElementById("box").offsetWidth);