border：1px引起的盒模型塌陷问题解决方法

最新推荐文章于 2022-09-24 12:11:54 发布

置顶最骚的就是你

最新推荐文章于 2022-09-24 12:11:54 发布

阅读量1.7k

点赞数

分类专栏： web前端学习文章标签： border 1px 盒模型塌陷

本文链接：https://blog.csdn.net/libin_1/article/details/52131468

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .main {
                margin: 100px auto;
                height: 173px;
                width: 100%;
                background: url(bottom_bg_img.png) top center no-repeat;
            }

            .mains {
                width: 1200px;
                height: 173px;
                margin: 0 auto;
                border: 1px solid red;/*注释掉这一行看看*/
                text-align: center;
            }

            .mains img {
                display: block;
                margin: -100px auto;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="mains">
                <img src="rocket_icon.png" />
            </div>
        </div>
    </body>

</html>

border: 1px solid red;/注释掉这一行看看/

这里写图片描述

解决方法1

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .main {
                margin: 100px auto;
                height: 173px;
                width: 100%;
                background: url(bottom_bg_img.png) top center no-repeat;
            }

            .mains {
                width: 1200px;
                height: 173px;
                margin: 0 auto;
                border: 1px solid red;
                text-align: center;
            }

            .mains img {
                position: absolute;
                margin-top: -100px;
                 transform:translateX(-50%) ; 

            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="mains">
                <img src="rocket_icon.png" />
            </div>
        </div>
    </body>

</html>

解决方法2

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .main {
                margin:0px auto;
                height: 273px;
                width: 100%;
                background: url(bottom_bg_img.png) bottom center no-repeat;
            }

            .mains {
                width: 1200px;
                height: 273px;
                margin: 0 auto;
                border: 1px solid red;
            }

            .mains img {
                display: block;
                margin: 0 auto;

            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="mains">
                <img src="rocket_icon.png" />
            </div>
        </div>
    </body>

</html>