CSS div的三种结构水平垂直包含margin的计算

最新推荐文章于 2022-12-12 16:46:30 发布

weixin_34049948

最新推荐文章于 2022-12-12 16:46:30 发布

阅读量116

点赞数

原文链接：http://www.cnblogs.com/xingkongly/p/7531330.html

版权

  <style>
        * {
            margin: 0;
            padding: 0;
            color: #fff;
            font-size：12px;
        }

        body {
            background: grey;
        }

        body>div {
            width: 550px;
            height: 120px;
            background: blue;
            margin-top: 5px;
        }

        .parent1:after {
            clear: both;
            width: 0;
            height: 0;
            content: '';
            display: block;
            visibility: hidden;
        }

        .parent {
            position: relative;
        }

        .parent>div {

            width: 100px;
            height: 30px;

            background: orange;
        }

        .parent1>div {
            float: left;
        }

        .parent1 span {
            width: 40px;
            height: 60px;
            background: red;
            position: absolute;
            left: 120px;
            top: 50px;
        }

        .parent1 .child {
            margin: 10px 20px;
        }

        .parent2 .child {
            margin: 10px 20px;
        }

        .parent2 span {
            width: 100px;
            height: 10px;
            background: red;
            position: absolute;
            left: 120px;
            top: 30px;
            text-align: right;
        }
       .parent3 .child1 {
            margin-bottom:10px;
        }
               .parent3 .child2 {
            margin-top:20px;
        }

        .parent3 span {
            width: 100px;
            height: 20px;
            background: red;
            position: absolute;
            left: 100px;
            top: 30px;
            text-align: right;
        }
        .parent4 {
            padding: 10px;
        }

        .parent4 .child {
            margin: 10px;
        }

        .parent4 span {

            width: 20px;
            height: 60px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="parent parent1">
        <div class="child">margin-left:10px;</div>
        <div class="child">margin-rihgt:10px;</div>
        <h3>水平结构</h3>
        <span>宽度40px</span>
    </div>
    <div class="parent parent2">
        <div class="child">margin-bottom:10px;</div>
        <div class="child">margin-top:10px;</div>
        <h3>垂直结构</h3>
        <span>高度10px</span>
    </div>
    <div class="parent parent3">
        <div class="child child1">margin-bottom:10px;</div>
        <div class="child child2">margin-top:20px;</div>
        <h3>垂直结构</h3>
        <span>高度20px</span>
    </div>
    <div class="parent parent4">
        <div class="child">包含结构</div>
     <h3>  包含结构 父元素padding-rihgt:10px;子元素margin-left:10px;</h3>
        <span>红色20px</span>
    </div>


</body>

</html>

结论:

1：水平结构第一个盒子的右边距等于左边盒子的margin-right +右边盒子的margin-left;【相加】

2：垂直结构第一个盒子的下边距等于上边盒子的margin-bottom和下边盒子的margin-top比较一下，【取最大值】

3：包含结构子元素的margin-left 等于父元素的padding-rihgt +子元素的margin-left 【margin+padding相加】

转载于:https://www.cnblogs.com/xingkongly/p/7531330.html

weixin_34049948

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS div的三种结构水平垂直包含margin的计算

<style> * { margin: 0; padding: 0; color: #fff; font-size：12px; } body { background: grey; ...
复制链接

扫一扫