这就是css盒模型

1,382 阅读2分钟

什么是盒模型

网页渲染的时候,所有的元素都会被浏览器引擎根据CSS-Box模型描述为一个盒子,CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。盒子模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。但盒子的大小由content+padding+border这几部分决定,把margin算进去的那是盒子占据的位置,而不是盒子的大小。

盒模型的分类

盒模型分为两类: IE盒模型(或怪异模型)和标准盒模型。
两者的区别在于:

  • IE盒模型:width/height = content + border + padding
  • W3C标准盒模型:width/height = content

1. 标准盒模型

从图中可以看出我设置的宽高为150,内边距为10,边框为5,下边距10,而元素真正呈现的是180。即width(150) + padding(2 * 10) + border(5 * 2) = 180

2. IE盒模型

从图中可以看出我设置的宽高为150,内边距为10,边框为5,下边距10,而元素真正呈现的依然是150,内容的宽度(content)变为了120,但是盒子的大小并未发生改变。

两种盒模型的优缺点

举个栗子

<style>
  .content-box {
    width: 150px;
    height: 150px;
    background: #fff;
    margin-bottom: 200px;
  }

  .child1 {
    float: left;
    width: 50%;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    background: #ccc;
  }

  .border-box {
    width: 150px;
    height: 150px;
    background: #fff;
  }

  .child2 {
    float: left;
    width: 50%;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: 5px solid red;
    background: #ccc;
  }
</style>

<body>
  <div class="content-box">
    <div class="child1">子元素1</div>
    <div class="child1">子元素1</div>
  </div>
  <div class="border-box">
    <div class="child2">子元素1</div>
    <div class="child2">子元素1</div>
  </div>
</body>

我同时设置了两个子元素宽度都是父元素的50%;当想在子元素内加padding或者border时,标准模型盒子的实际宽度就会超过50%,导致换行。如果强行想让子元素在同一行内,就不能设置宽度为50%,而应该通过计算width:cacl(50% - 2 * padding - 2 * border);而对于IE盒模型,内容的宽度会根据padding和border进行调整,元素的真实宽度始终是50%,所以不会导致换行。

改变盒模型

目前在ie8+以及其他浏览器中盒模型默认值为content-box,即标准盒模型。可以通过box-sizing进行切换。

box-sizing: content-box|border-box|inherit;

  • content-box (标准盒模型)
  • border-box(IE盒模型)
  • inherit (规定应从父元素继承 box-sizing 属性的值)

结语

大家可以根据自己的需要,通过box-sizing来愉快地改变盒子模型啦~