css常见问题处理

外边距塌陷
问题：嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷

例如:
html部分

<div class="parentBox">
    <div class="sonBox"></div>
</div>

css部分

.parentBox{
    width: 300px;
    height: 300px;
    background-color: red;
}
.sonBox{
    width: 100px;
    height: 100px;
    background-color: black;
    /* 设置外边距垂直100px 水平居中*/
    margin: 100px auto;
}

解决办法1：给父盒子设置边框
例如:
html部分

<div class="parentBox">
    <div class="sonBox"></div>
</div>

css部分

.parentBox{
    /* 注意父盒子宽高扣除边框的1px */
        width: 299px;
        height: 299px;
        background-color: red;
        border: 1px solid red;
    }
    .sonBox{
        width: 100px;
        height: 100px;
        background-color: black;
        /* 设置外边距垂直100px 水平居中*/
        margin: 100px auto;
        }

解决办法2：给父盒子设置溢出隐藏
例如:
html部分

    <div class="parentBox">
        <div class="sonBox"></div>
    </div>

css部分

.parentBox{
    width: 300px;
    height: 300px;
    background-color: red;
    overflow: hidden;
}
.sonBox{
    width: 100px;
    height: 100px;
    background-color: black;
    /* 设置外边距垂直100px 水平居中*/
    margin: 100px auto;
}

清除浮动
问题：当父盒子没有定义高度， 子盒子浮动后 （1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
例如:
html部分

    <div class="outer">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
    </div>

css部分

    .outer{
        border: 1px solid #ccc;
        background: #fc9;color:
         #fff; margin: 50px auto;
         }
    .div1{
        width: 80px;
        height: 80px;
        background: red;
        float: left;
    }
    .div2{
        width: 80px;
        height: 80px;
        background: blue;
        float: left;
    }
    .div3{
        width: 80px;
        height: 80px;
        background: sienna;
        float: left;
    }

解决方法1：父盒子加伪元素
例如:
html部分

    <div class="outer">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
    </div>

css部分

    .outer{
        border: 1px solid #ccc;
        background: #fc9;color:
         #fff; margin: 50px auto;
         }
    .div1{
        width: 80px;
        height: 80px;
        background: red;
        float: left;
        }
    .div2{
        width: 80px;
        height: 80px;
        background: blue;
        float: left;
        }
    .div3{
        width: 80px;
        height: 80px;
        background: sienna;
        float: left;
        }
    /* 兼容ie */
    .outer {
        zoom: :1;
        }
    /* 为父元素添加伪类 */
    .outer::after {
        clear:both;
        content:'.';
        display:block;
        width: 0;
        height: 0;
        line-height: 0;
        visibility:hidden;
    }

解决方法2：在最后一个浮动元素下面添加一个div style=”chear:both”;
例如:
html部分

    <div class="outer">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <!--加一个空div设置清除浮动-->
        <div  style="clear: both;"></div>
    </div>

css部分

    .outer{
        border: 1px solid #ccc;
        background: #fc9;color:
         #fff; margin: 50px auto;
         }
    .div1{
        width: 80px;
        height: 80px;
        background: red;
        float: left;
        }
    .div2{
        width: 80px;
        height: 80px;
        background: blue;
        float: left;
        }
    .div3{
        width: 80px;
        height: 80px;
        background: sienna;
        float: left;
        }

解决方法3：给父级元素添加overflow:hidden;
例如:
html部分

    <div class="outer">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
    </div>

css部分

    .outer{
        border: 1px solid #ccc;
        background: #fc9;
        color:#fff;
        margin: 50px auto;
        /*添加溢出隐藏*/
        overflow: hidden;
         }
    .div1{
        width: 80px;
        height: 80px;
        background: red;
        float: left;
        }
    .div2{
        width: 80px;
        height: 80px;
        background: blue;
        float: left;
        }
    .div3{
        width: 80px;
        height: 80px;
        background: sienna;
        float: left;
        }

问题：定位盒子居中
解决： 先向右走父盒子的一半，再向左走子盒子的一半(margin-left:负值);
例如：
html部分

    <div class="outer">
        <div class="div1"></div>
    </div>

css部分

    .outer{
        width: 300px;
        height: 300px;
        background-color:red;
        position: relative;
        /* 处于标准文档流盒子居中 */
        margin: 0 auto;
    }
    .div1{
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        /* 先向右走父盒子的一半*/
        left: 50%;
        /*再向左走子盒子的一半(margin-left:负值)*/
        margin-left: -50px;
        top: 50%;
        margin-top: -50px; 
    }