css - 盒模型

盒模型

什么是盒模型

每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

设置

box-sizing:content-box(W3C)/border-box(IE)

标准盒模型和IE的盒模型不同

标准盒模型的内容大小就是content的大小，而IE的则是content + padding +border 总的大小。

获取和设置box的宽高

JavaScript获取元素尺寸和大小操作总结

window.getComputedStyle(dom).width/height获取元素的宽高。这个方法兼容性较好，支持firefox、chrome。

dom.currentStyle.width/height来获取，获取到的是元素渲染之后的宽高，是准确的，但是只限于IE使用。

边距重叠

两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。

同级关系的重叠

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

BFC

BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC原理

• BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
  BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边* 的。
• BFC的区域不会与float box重叠。
• 计算BFC的高度时，浮动元素也被计算在内。

BFC如何产生

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
  在属性值为这些的情况下，都会让所属的box产生BFC。

使用场景

自适应布局

<!-- BFC不与float重叠 -->
    <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: #664664;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。 -->
    </section>

清除浮动

<!-- BFC子元素即使是float也会参与计算 -->
        <section id="float">
            <style media="screen">
              #float{
                background: #434343;
                overflow: auto;
              }
              #float .float{
                float: left;
                font-size: 30px;
              }
            </style>
            <div class="float">我是浮动元素</div>
        </section>

解决垂直边距重叠

 <section id="margin">
        <style>
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin>p{
                margin: 5px auto 25px;
                background: red;
            }
            #margin>div>p {
                margin: 5px auto 20px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。 -->
    </section>