21.外边距

来源:互联网 发布:淘宝开放平台api 授权 编辑:程序博客网 时间:2024/05/21 07:50

外边距

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>外边距</title>    <style>        .father{            width: 500px;            height: 500px;            background-color:orange;            margin: 0 auto;            position: relative;        }        .son{            width: 100px;            height: 100px;            background-color: #ccc;            position: absolute;            left: 100px;            right: 100px;        }        .box{            width: 1226px;            height: 460px;            position: relative;        }        .nav{            width: 300px;            height: 460px;            background-color: rgba(0,0,0,0.6);            top:0;            left:0;        }    </style></head><body>    <!--         当对象作为子元素时, 做绝对定位, 若想在父级元素内部做绝对定位, 那么父级必须加上定位        常用于:  多个对象重叠在一起     --><div class="father">        <div class="son"></div></div>    <div class="box">        <img src="datu.jpg">        <div class="nav"></div>    </div></body></html>