边框-外围

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

外边框移动的时候按照父类或者子类中的最大值为准

3、重置

边框-外围

相关推荐