CSS盒子模型

CSS盒子模型

CSS盒子相信对于大家来说，并不陌生，但是大家有真正深入的了解CSS模型引申出来的知识点？现在我这里总结一下，之前有过面试的经历问到了CSS模型的一下知识，故在此总结一下，方便日后查看。 下面我主要从这几个方面对CSS模型进行剖析。

• 基本概念：标准模型+IE模型
• 标准模型和IE模型的区别
• CSS如何设置这两种模型
• JS如何设置获取盒子模型对应的宽高
• 根据盒子模型解释边距重叠
• BFC(边距重叠解决方案)

（一）CSS盒子模型的概念

css盒子模型本身就是一个盒子，包装周围的其他的HTML元素，css盒子模型主要包含几个方面的属性，padding,border,margin,content。

（二）标准盒子模型和IE盒子模型

标准盒子模型和IE盒子模型最主要的不同就是计算宽高的不同，但具体的不同在哪里的呢？

标准盒子模型定义：

从图中我们可以看出

1.标准盒子模型的宽度仅包含content内容的宽度，它并不包含border + padding的宽度。 2. IE盒子模型的宽度除了包含content内容的宽度之外，还包含border + padding的宽度

那么整个盒子模型的实际的宽度是多少？

标准盒子模型的实际宽度：content(内容) + padding-left + border-left + margin-left + padding-right+ border-right + margin-right;

标准盒子模型的实际的宽度： 内容 + 左填充 + 左边框 + 左边距 + 右填充 + 右边框 + 右边距；

IE盒子模型定义：

从图中我们可以看出IE盒子模型的width是包含padding+border的，而标准盒子模型的width指的是content的宽度，这就是IE盒子模型和标准盒子模型的区别。

但我们在实际的开发中，怎么区别这两种模型的呢？

（三）CSS如何设置这两种模型

我们可以利用css3的属性box-sizing来设置是标准盒子模型还是IE盒子模型

<!---->这个属性表示的含义是标准盒子模型，width就是content内容的宽度，这是浏览器默认的盒子模型
box-sizing: content-box; 
复制代码

<!---->这个属性表示的是IE盒子模型，width除了content内容之外还包括padding+border的宽度
box-sizing: border-box;
复制代码

（四）JS如何设置获取盒模型对应的宽和高

1. dom.style.width/height
2. dom.currentStyle.width/height
3. window.getComputedStyle(dom).width/height
4. dom.getBoundingClientRect().width/height

说一下这几种方法的局限性：

第一种方法，在javascript中，document.getElementByID('demo').style.height 就可以获取的到该样式的值，但是仅可以获取的到内嵌样式的width/height 也就是 style="width: 100px;height: 100px;" style样式中的值
第二种方法，这种方法的话，仅IE浏览器支持
第三种方法，firfox,chrome都支持,这个相对好一些。
第四种方法，返回的是相对于视口的位置，它有四个值，分别是top,left,bottom,right分别表示四个方向的不同的距离。

（五）根据盒子模型解释边距重叠

子元素高100px,子元素和父元素上边距高10px,求父元素的高度

答：如果给父元素加上overflow: hidden （相当于给父元素添加BFC）,父元素高110px,子元素高100px

（六）BFC(边距重叠解决方案)

BFC

• BFC(快级格式化上下文),IFC(内联元素格式化上下文)

BFC的原理

• BFC在垂直方向的边距会发生重叠
• BFC的区域不会与浮动元素的盒子重叠
• BFC是一个独立的容器，外面的元素和里面的元素互不影响
• 计算BFC高度的时候，浮动元素也会参与计算

如何创建BFC

• float的值不为none
• position的值不是static或者relative
• display:table,table-cell都可以创建BFC
• overflow: visible 不是visible时，其他的都可以创建BFC

解决BFC垂直方向重叠的问题就是在其父元素中，创建一个新的BFC，就可以解决BFC垂直方法边距重叠的问题。

<!---->BFC垂直方向边距重叠
<section id="margin">
    <p>林黛玉</p>
    <div style="overflow: hidden;"> // 这里是在父元素中，创建一个BFC
        <p>贾宝玉</p>
    </div>
    <p>薛宝钗</p>
</section>
复制代码

<!---->BFC垂直方向边距重叠的css样式
<style>
#margin {
    background: pink;
    overflow: hidden; // 创建一个快级格式化上下文
}
#margin > p {
    margin: 5px auto 25px;
    background: red;
}
</style>
复制代码

BFC不与float重叠

<!---->BFC不与float重叠HTML代码
<section id="layout">
    <div>left</div>
    <div>right</div>
</section>
复制代码

<!---->BFC不与float重叠的CSS代码
<style>
    #layout {
        background: red;
    }
    #layout .left {
        float: left;
        width: 100px;
        height: 100px;
        background: pink;
    }
    #layout .right {
        height: 110px;
        background: #ccc;
        overflow: auto;
    }
</style>
复制代码

BFC子元素，即使是float,也会计算高度

<section id="float">
    <div class="float">我是浮动的元素</div>
</section>
复制代码

#float {
    background: red;
    overflow: auto;
}
#float .float {
    float: left;
    font-size: 30px;
}
复制代码