css不同盒模型的区别

CSS盒模型指的是一个html元素在页面中占据的空间，可以用来设置元素的大小和位置。CSS盒模型有两种，分别是标准盒模型和IE盒模型。

标准盒模型的大小由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)构成，而IE盒模型的大小则是由元素的内容(content+padding+border)和外边距(margin)构成。

看以下的代码：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  margin: 30px;
} 

在标准盒模型中，这个box元素的实际大小为：

width: 200px (内容) + 40px (padding) + 20px (border) = 260px
height: 100px (内容) + 40px (padding) + 20px (border) = 160px 

而在IE盒模型中，这个box元素的实际大小为：

width: 200px (内容且包含padding和border) + 60px (margin) = 260px
height: 100px (内容且包含padding和border) + 60px (margin) = 160px 

可以看出，两种盒模型计算元素的实际大小的方式不同。因此，在开发网站或者应用程序时，我们需要明确使用哪种盒模型，以便正确的设置元素的大小和位置。