盒子模型存在的bug

盒子模型存在的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时效果

盒子模型存在的bug_第1张图片

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

盒子模型存在的bug_第2张图片

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>

c.展示效果

只对上方盒子设置下外边距时,展示效果如下所示:

盒子模型存在的bug_第3张图片

同时对上方盒子设置下外边距和对下方盒子设置上外边距时,展示效果如下所示:
盒子模型存在的bug_第4张图片

d.解决方案

若想要控制具有上下位置关系的两个盒子在垂直方向上的距离,那就只设置上方盒子的下外边距或者下方盒子的上外边距即可,千万不要同时设置两者的值

你可能感兴趣的:(java,web基础知识,bug,css3,盒子模型)