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;     }