边框-外围

最新推荐文章于 2020-12-14 18:18:47 发布

普通旧朋友

最新推荐文章于 2020-12-14 18:18:47 发布

阅读量448

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41646730/article/details/80960675

/1、

    <style>
        .top , .bottom{
            width: 200px;
            height: 200px;

        }
        .top{
            border: tomato solid 2px;
            background-color: green;
            margin-bottom: 20px;
            margin-left: 50px;
            margin-top: 20px;
        }
        .bottom{
            border: green dashed 3px;
            background-color: yellow;
            margin-top: 30px;
        }
    </style>
</head>
<body>
        <div class="top"></div>
        <div class="bottom"></div>

</body>

效果：

注意：上下两个边框移动时按照相互间最大值来决定结果

2、

</body>

         <div class="parent">

                          <div class="child">

                        </div>

        </div>


</body>

2、

.parent{
    width: 200px;
    height: 200px;
    background-color: green;
    margin-top: 20px;
}
.parent .child{
    width: 100px;
    height: 100px;
    background-color: chocolate;
    margin-top: 50px;