【面试题解】CSS盒子模型与margin负值

站长

2023年09月25日 17:24 · 阅读数 10

盒子模型，顾名思义，可以装东西的称为盒子，比如 div，h，li 等等。像 img，input 这种不能装东西的就不是盒子。

盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分，内容又分为高(height)、宽(width)。

div 高(height)默认为auto，会由子元素的改好、宽(width)

盒子模型类型

IE盒模型（border-box）

IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content + padding + border 。

【面试题解】CSS盒子模型与margin负值

W3C标准盒模型（content-box）

W3C 标准盒模型：属性 width ，height 只包含内容 content，不包含 border 和 padding 。

【面试题解】CSS盒子模型与margin负值

切换盒模型

如果想要切换盒模型也很简单，这里需要修改 css3 的 box-sizing 属性。

//W3C盒子模型
box-sizing: content-box 
//IE盒子模型
box-sizing: border-box

margin负值问题

margin-top 元素自身会向上移动，同时会影响下方的元素会向上移动；
margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。
margin-left 元素自身会向左移动，同时会影响其它元素；
margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动；

我们先初始化几个盒子，然后分别给它们设置一下不同的 margin 负值，看看和上面的结论一不一致。

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        width: 400px;
        box-sizing: border-box;
        height: 400px;
        background: blue;
      }

      .green {
        width: 200px;
        height: 200px;
        background: green;
      }

      .yellow {
        width: 200px;
        height: 200px;
        background: yellow;
        margin-bottom: -20px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="green"></div>
      <div class="yellow"></div>
    </div>
  </body>

【面试题解】CSS盒子模型与margin负值

margin-top

我们给绿色的盒子设置一个 margin-top。

  .green {
    background: red;
    margin-top: -20px;
  }

结果如下，可以看到绿色的盒子自身向上移动了，下方的元素会随着它一起发生位移。

【面试题解】CSS盒子模型与margin负值

margin-bottom

我们给绿色的盒子设置一个 margin-bottom。

  .green {
    background: red;
    margin-bottom: -20px;
  }

结果如下，可以看到绿色的盒子自身并没有发生位移，但是高度变短了，同时下方黄色的盒子向上发生了移动。

【面试题解】CSS盒子模型与margin负值

margin-left

首先我们给元素一个浮动，让其横向排列，然后我们给绿色的盒子设置一个 margin-left。

   .container div{
     float:left
   }
  .green {
    background: red;
    margin-left: -20px;
  }

结果如下，可以看到绿色的盒子自身向左移动了，右侧黄色的盒子会随着它一起发生位移。

【面试题解】CSS盒子模型与margin负值

margin-right

我们给绿色的盒子设置一个 margin-right。

  .green {
    background: red;
    margin-right: -20px;
  }

结果如下，可以看到绿色的盒子自身没有发生位移，但是宽度减少了，同时右侧黄色的盒子向左移动了。

【面试题解】CSS盒子模型与margin负值

不使用浮动的两列布局

掌握了 margin ，即可以不使用浮动实现两列布局了。

    <style>
      .container {
        width: 400px;
        padding: 10px
      }

      .left {
        width: 100px;
        height: 400px;
        background-color: blue;
      }

      .right {
        width: 300px;
        height: 400px;
        margin: -400px 0 0 100px;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>

结果如下。

【面试题解】CSS盒子模型与margin负值