CSS盒子模型、边距重叠、计算宽高

CSS盒模型笔记，主要包括了盒模型的标准模式和IE模式的区别，通过box-sizing属性设置宽高的计算方式，盒模型中的边距重叠问题，几种通过js获取宽高的方法，BFC相关概念以及BFC的几种使用场景。

1、IE模式和标准模式

先敬上一张描述这两种模式的图：

标准模式和IE模式区别在于计算width与height的方式。但是总宽度和总长度的计算方式是一样的。

可以通过box-sizing属性设置计算宽高的方式。IE8+支持box-sizing。 

 

2、box-sizing属性

属性值与含义如下

content-box，默认值，标准模式

border-box，宽高计算方法与IE模式一致

padding-box，宽高计算方法是content+padding

 

3、边距重叠

边距重叠指的是相邻的元素在垂直方向上出现的边距重叠，而不是将边距相加。

边距重叠发生在相邻元素，父子元素之间。

相邻元素比如上元素margin-bottom:50px;下元素margin-top：70px，最终两个元素之间的边距为70px;

父子元素之间边距重叠的情况稍有不同。比如子元素marigin-top：50px;实际上父子元素并不会出现50px的边距。父子元素上边界重叠，并且外边距使父元素上方也有50px的边距空间。

<section>
        <style>
            #parent {
                background: red;
                width: 100px;
                height: 100px;
                /*margin:100px 0;*/
                /*border:1px solid #eee*/
            }

            #child {
                margin: 50px 0;
                background-color: green;
                height: 50px;
                width: 50px;
            }
        </style>
        <div id="parent">
            <div id="child"></div>
        </div>
    </section>

结果如下：

此时如果设置父元素margin-top:100px，则父子元素上边界仍然重叠，并且上方有100px的边距空间，而不是150px；

如果需要消除这种父子重叠效果，可以有以下几种方法：

（1）、设置父元素的border不为none，或者设置padding，增加一些字符等内容，让父子之间不会直接“接触”。

（2）父元素浮动，float 除 none 以外的值； 
（3）父元素设置为定位元素，position（absolute，fixed）； 
（4）父元素的display 为以下其中之一的值 inline-block，table-cell，table-caption；

（5）父元素的overflow 设置除了 visible 以外的值（hidden，auto，scroll）；

其中2、3、4、5都能让父元素成为一个BFC。

如果是兄弟元素之间消除边距重叠，需要将兄弟元素放到一个BFC中，方能达到效果。

 

4、如何获取盒子的宽高

（1）、dom.style.width/height，只能获取内联样式中的width和height

（2）、window.getComputerStyle(dom).width/height，比较通用，推荐这种写法

（3）、dom.currentStyle.width/height，只能在IE下使用

（4）、dom.getBoundingClientRect().width/height，也比较通用，但是没用过

 

5、BFC

BFC相关内容移步CSS中的BFC