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

来源：互联网发布：到印度做软件编辑：程序博客网时间：2024/06/16 13:32

这里写图片描述

<!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>

0 0