谈一谈css盒模型

最新推荐文章于 2022-09-24 20:23:36 发布

小李还有很多头发.

最新推荐文章于 2022-09-24 20:23:36 发布

阅读量140

点赞数

分类专栏：前端 CSS 文章标签： css 前端

原文链接：https://juejin.cn/post/7025880293013716999

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述
盒子模型，顾名思义，可以装东西的称为盒子，比如 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。

在这里插入图片描述

W3C标准盒模型（content-box）

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

在这里插入图片描述

切换盒模型

如果想要切换盒模型也很简单，这里需要修改 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>

实现效果：
在这里插入图片描述

margin-top

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

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

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

在这里插入图片描述

margin-bottom

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

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

结果如下，绿色的盒子没有发生位移，但是高度变短了。
在这里插入图片描述

margin-left

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

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

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

在这里插入图片描述

margin-right

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

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

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

在这里插入图片描述

不使用浮动的两列布局

掌握了 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>