盒模型使用技巧及解决

最新推荐文章于 2022-05-04 11:00:42 发布

渣渣灰

最新推荐文章于 2022-05-04 11:00:42 发布

阅读量444

点赞数

本文链接：https://blog.csdn.net/zhushiqing1314/article/details/79666932

版权

margin相关技巧

1、设置不浮动的元素相对于父级水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

垂直外边距合并
垂直外边距合并指的是，当两个不浮动的元素，它们的垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，实际开发中一般只设置margin-top来避开这种合并的问题，或者将元素浮动，也可以避开这种问题。

margin-top 塌陷
在两个不浮动的盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: '';
    display:table;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin塌陷</title>
    <style>
        /* 标准解决塌陷方式 */
    .clearfix::before{
        content: "";
        display: table;
    }

    /* margin-top塌陷原因：
       父元素没有边界时设置子元素的margin-top 时
       子元素的顶部外边距没有生效，反而是生效到父元素身上 */
    .con{
        width: 200px;
        height: 200px;
        background-color: gold;


        /* 1。第一种解决方式
        border: 1px solid gold; */

        /* 第二种方式
        overflow:hidden; */
    }

    .box{
        width: 100px;
        height: 50px;
        background-color: forestgreen;
        margin-top: 100px;
    }



    </style>

</head>
<body>
    <div class="con clearfix">
        <div class="box"></div>
    </div>
</body>
</html>

渣渣灰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型使用技巧及解决

margin相关技巧1、设置不浮动的元素相对于父级水平居中： margin:x auto; 2、margin负值让元素位移及边框合并垂直外边距合并垂直外边距合并指的是，当两个不浮动的元素，它们的垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，实际开发中一般只设置margin-top来避开这种合并的问题，或者将元素浮动，也可以避开...
复制链接

扫一扫