[分享]css两种盒模型

CSS的盒模型是页面设计中重要的基础知识之一，它是用来描述网页元素的尺寸和大小的计算方法。CSS共有两种不同的盒模型：W3C盒模型和IE盒模型。W3C盒模型是CSS标准盒模型，按照标准测量元素的宽和高...

CSS的盒模型是页面设计中重要的基础知识之一，它是用来描述网页元素的尺寸和大小的计算方法。CSS共有两种不同的盒模型：W3C盒模型和IE盒模型。

W3C盒模型是CSS标准盒模型，按照标准测量元素的宽和高。这种盒模型的特点是元素整体的宽和高包括内容区、内边距和边框的总和，而不包括外边距。

.box {
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 5px solid #000;
} 

在W3C盒模型中，上面这段代码中的元素宽度实际上为250px（200+20+20+5+5=250），高度为200px（150+20+20+5+5=200）。

IE盒模型是Microsoft Internet Explorer浏览器对标准盒模型的扩展，它的特别之处在于将边框和内边距计算到盒模型的宽度和高度之内，把外边距也包含进去了。

.box {
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 5px solid #000;
  box-sizing: border-box;
} 

在IE盒模型中，通过使用box-sizing属性，可以将盒模型设置为border-box，从而让元素整体的宽度和高度包括了边框和内边距，而不是额外增加外边距，这样更好地控制了元素的尺寸。

使用CSS的盒模型可以帮助我们更好地掌握页面元素的尺寸和布局，选择W3C盒模型还是IE盒模型视具体情况而定。