盒模型

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

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

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

  I use the standard box model.  

  I use the alternate box model.  

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盒模型的最佳方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！