css盒与ie盒

CSS盒模型是网页设计中经常用到的概念，它是指在CSS中每个元素所拥有的一个盒子，这个盒子包括四个部分：内容（content）、填充（padding）、边框（border）和外边距（margin）。这个盒子的大小由元素本身的宽度和高度以及盒子的一些属性值所决定。

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px;
}
 

在这个例子中，我们定义了一个盒子的大小为200px * 100px，它的填充为10px，边框为1px的实线，外边距为20px。在CSS中，我们可以通过盒子模型来控制元素的布局、大小、边框、内边距和外边距等属性。

然而，在早期的IE版本中，盒模型的实现与CSS标准有所不同，这种实现方式被称为IE盒模型。IE盒模型将元素的宽度和高度包括了所有的填充、边框和外边距，也就是说，元素的实际大小等于元素宽度属性值加上左右填充、边框和外边距的宽度。

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px;
  /* IE盒模型 */
  box-sizing: border-box;
}
 

可以通过在CSS中设置box-sizing属性来实现IE盒模型，将box-sizing的属性值设置为border-box，元素的宽度和高度就会包括填充和边框的宽度，不再额外计算。如果要在不同的浏览器中兼容盒模型，可以使用CSS hack或者reset.css来处理不同的盒模型模型差异。