css盒模型与BFC

盒子模型

1.标准盒子模型
    宽度=内容的宽度（content）+ border + padding + margin
    box-sizing:content-box;
    设置元素的 height/width 属性指的是content部分的高/宽
2.IE盒子模型
    宽度=内容宽度（content+border+padding）+ margin
    box-sizing:border-box;
    设置元素height/width属性指的是border + padding + content部分的高/宽

标准.png
IE.png

js获取宽高

1.dom.style.width/height，该方式只能获取dom元素内联样式所设置的宽高
2.dom.currentStyle.width/height，该方式只有IE浏览器支持
3.window.getComputedStyle(dom).width/height，可兼容多个浏览器，通用性好些
4.dom.getBoundingClientRect().width/height，根据元素在视图中的绝对位置获取宽高
5.dom.offsetWidth/offsetHeight，最常用，兼容性最好

边距重叠

子元素设置margin-top，父元素未设置margin-top,但是父元素一起有了边距
两个或多个块级盒子的 垂直相邻边距会重合，水平边距不会重合，边界宽度为最大值
如何解决边距重叠的上述问题？答：创建BFC(Block Formatting Context，即块级格式化上下文)

创建BFC的方法：
    1. 浮动（float不为none）
    2. overflow不为visible
    3. 定位元素(position为absolute或fixed)
    4. 表格单元（display为table,table-cell,table-caption等表格相关属性）
    5. 行内块(display为inline-block)
    6. 弹性盒子(display为flex,inline-flex)

案例
1.垂直margin重叠

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100px;
        background: red;
        + overflow:hidden;    // 添加此句，解决边距重叠问题
    }
    .box1{
        width: 100px;
        height: 100px;
        margin-top: 20px;
        background-color: yellow;
    }
</style>

<div class="box">
    <div class="box1"></div>
</div>

image.png

2.兄弟元素边界重叠

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background: #E7A1C5;
        width: 100px;
        overflow: hidden;
    }

    p {
        margin: 20px 0 30px 0;
        background: #C8CDF5;
    }                    
    /* 添加div.bfc */
    .bfc{
        overflow: hidden;
    }
</style>
<div class="box">
    <p>1</p>
    + <div class="bfc">
        <p>2</p>
    + </div>
    <p>3</p>
</div>

image.png

3.内部浮动

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        background: #E7A1C5;
        width: 100px;
        + overflow: hidden;    /* 添加此属性解决，或添加float:left */
    }

    .float{
        float: left;
    }
</style>

<div class="box">
    <div class="float">浮动元素</div>
</div>

image.png

4.自适应两栏布局

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background: #E7A1C5;
    }

    .left {
        float: left;
        width: 100px;
        height: 100px;
        background: red;
    }
    .right{
        height: 110px;
        background: #ccc;
        + overflow: auto;      /* bfc */
    }
</style>
<div class="box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

image.png