21.外边距

郭振澳

于 2017-07-02 11:25:36 发布

阅读量175

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u011513939/article/details/74095056

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

外边距

<!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>