[分享]css两个盒子模型

CSS中的盒子模型是指HTML元素的大小、边距和填充，它影响了元素在页面上的布局和位置。CSS中有两种盒子模型：标准盒子模型和IE盒子模型。标准盒子模型：元素的宽度和高度仅包含内容，不包含边框、内边距...

CSS中的盒子模型是指HTML元素的大小、边距和填充，它影响了元素在页面上的布局和位置。CSS中有两种盒子模型：标准盒子模型和IE盒子模型。

标准盒子模型：元素的宽度和高度仅包含内容，不包含边框、内边距和外边距。在标准盒子模型中元素的宽度和高度可以通过CSS设置。

.box {
  width: 200px;   /*元素的宽度*/
  height: 100px;  /*元素的高度*/
  border: 1px solid black;   /*元素的边框*/
  padding: 20px;  /*元素的内边距*/
  margin: 10px;   /*元素的外边距*/
} 

IE盒子模型：元素的宽度和高度包含内容、内边距和边框，但不包含外边距。在IE盒子模型中元素的宽度和高度可以通过CSS的box-sizing属性设置，属性值为border-box。

.box {
  width: 200px;   /*元素的宽度*/
  height: 100px;  /*元素的高度*/
  border: 1px solid black;   /*元素的边框*/
  padding: 20px;  /*元素的内边距*/
  margin: 10px;   /*元素的外边距*/
  box-sizing: border-box;   /*IE盒子模型*/
} 

需要注意的是，在IE8及以下版本中不支持box-sizing属性，因此在开发过程中需要考虑到浏览器的兼容性。