css盒模型

一：什么是盒模型

说到盒模型大家肯定都能想到content,padding,border,margin
但是盒模型分为两种：标准盒模型 IE模型，他们最主要的区别在于宽高的计算。
1.标准盒模型的宽高不包含padding和border
2.IE模型的宽高是padding和border的总和

设置这两种模式的方式也很简单

标准盒模型：box-sizing:content-box
IE模型:box-sizing:border-box

二：js获取盒模型的宽高

1.dom.style.width/height 此方法只适用于内联元素
2.dom.currentStyle.width/height此方法解决了1的问题，但是只适用于IE
3.window.getComputedStyle(dom).width/height兼容性好，适用于大多数浏览器
4.dom.getBoundingClientRect().widht/height

要注意的是：dom.getBoundingClientRect()返回TextRectangle对象,这个对象包含元素相对于视窗的位置集合(left,right,top,bottom)

三：BFC的原理及如何创建BFC

BFC全称：Block Formatting Context (块级格式化上下文)
原理：同一个bfc下外边距重叠，bfc外面的元素不会影响里面的元素，bfc计算高度时也包含浮动元素，bfc可以防止浮动元素被覆盖
<section id="margin">

        <style>
            #margin{
                background: pink;
                width: 400px;
            }
            #margin>p{
                margin: 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </section>
    

如图所示，1的下边距和2的上边距重合

创建bfc的方法

1.float不为none
2.overflow不为visiable
3.position不为static和relative
4.display是inline-block,table-cell,table-caption

<section id="margin">

<style>
    #margin{
        background: pink;
        width: 400px;
    }
    #margin p{
        margin: 25px;
        background: red;
    }
</style>
<p>1</p>
<div style="overflow:hidden">
    <p>2</p>
</div>
<p>3</p>

</section>

<div id="out">
<style>

#out{
    background: yellow;
}
#out .left{
    float: left;
    width: 200px;
    height: 100px;
    background: pink;
}
#out .right{
    height: 110px;
    background: blue;
    width: 200px;
    overflow: auto;
}

</style>

<div class="left"></div>
<div class="right"></div>

</div>