盒模型

CSS里一切都是盒子。屏幕上显示的所有内容都有一个框，盒模型描述了如何计算该框的大小 - 将外边距，内边距和边框考虑进去。标准的CSS框模型接受给定元素的宽度，然后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。

最近，我们已经能够选择使用IE盒模型，使得元素上的给定宽度作为屏幕上可见元素的宽度。任何内边距或边框都会从边缘插入框的内容。这对许多布局更有意义。

在下面的演示中，我有两个盒子。两者的宽度均为200像素，边框为5像素，内边距为20像素。第一个框使用标准框模型，因此占用总宽度为250像素，第二个框使用IE盒模型，因此实际上是200像素宽。

<div class="box">
  I use the standard box model.  </div><div class="box box2">
  I use the alternate box model.  </div>

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}
p {
  margin: 0 0 1em 0;}.box {
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 20px;
  width: 200px;
  margin-bottom: 2em;}.box2 {
  box-sizing: border-box;}

浏览器开发者工具可以再次帮助你了解正在使用的盒子模型。在下图中，我使用火狐浏览器的开发者工具使用默认的内容框框模型检查框。工具告诉我这是正在使用的盒模型，我可以看到大小以及如何将边框和内边框添加到指定的宽度。

 

注意：在IE6之前，Internet Explorer使用IE盒模型，内边框和边框插入给定宽度的内容里。所以有一段时间浏览器使用不同的盒模型！如果今天的互操作性问题感到沮丧，现在已经有所改善，那么我们就不会处理浏览器以不同的方式计算元素的宽度。

在 CSS Tricks 里，有关于盒模型和盒子尺寸的很好的解释，并解释了在你的网站中全局使用IE盒模型的最佳方法。