盒子模型存在的bug

最新推荐文章于 2024-06-13 21:32:33 发布

SSS4362

最新推荐文章于 2024-06-13 21:32:33 发布

阅读量590

点赞数 2

分类专栏： java web基础知识文章标签： bug css3 盒子模型

本文链接：https://blog.csdn.net/SSS4362/article/details/125477439

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

盒子模型存在的bug

1.margin传递问题

a.具体含义(父子之间)

子元素的margin-top的值m会传递给父亲,这样显示出来的效果就是父级元素往下移动m,但是子元素还是紧挨着父级元素的

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin传递问题</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         #top{
          width: 200px;
          height: 200px;
          background-color: saddlebrown;
         }
         .inside{
            width: 100px;
          height: 100px;
          background-color: skyblue;
          margin-top: 10px;
         }
    </style>    
</head>
<body>
    <div id="top">
        <div class="inside"></div>
    </div>
</body>
</html>

c.展示效果

c.1 不写margin-top时效果

在这里插入图片描述

c.2 写了margin-top时的效果

在这里插入图片描述

d.解决方案

要使子元素往下移动,可以通过设置父级元素的内边距来进行位置的移动

解释说明:在父级元素眼中,它的子元素可以看出是它的内容部分,而内边距又是盒子边框和盒子内容之间的距离,因此就可以通过设置父级元素的内边距来使子元素往下移动,从而使父级元素和子元素产生间距

2.margin叠压问题

a.具体含义(同一层的盒子之间)

当在页面当中有上下关系的两个盒子,同时对上方盒子设置margin-bottom和对下方盒子设置margin-top,此时两个盒子之间的间距=max(margin-bottom,margin-top);

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin叠压问题</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         #first{
          width: 200px;
          height: 200px;
          background-color: saddlebrown;
          margin-bottom: 10px;
         }
         #second{
          width: 200px;
          height: 200px;
          background-color: skyblue;
          margin-top: 20px;
         }
    </style>    
</head>
<body>
    <div id="first">团结</div>
    <div id="second">友爱</div>
</body>
</html>