css3标准盒模型 |css标题过长变省略号

使用CSS3标准盒模型的好处在于可以更方便地布局元素。例如，当大家需要设置一个元素的宽度为100像素时，使用旧有的盒模型需要考虑元素的padding和border属性，而使用CSS3标准盒模型则无需考虑这些属性，只需设置width为100像素即可。

/* 旧有盒模型 */
.box {
width: 100px;
padding: 10px;
border: 1px solid #000;
}
/* 宽度实际为 100px + 2 * 10px + 2 * 1px = 122px */
/* CSS3标准盒模型 */
.box {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 1px solid #000;
}
/* 宽度实际为 100px */

在CSS3标准盒模型中，可以通过设置box-sizing属性改变元素的盒模型类型。如果将box-sizing设为border-box，即为使用CSS3标准盒模型；如果设为content-box，则使用旧有的盒模型。

需要注意的是，在使用CSS3标准盒模型时，元素的宽度和高度属性可以为负值，但内边距和边框属性不能为负值。

综上所述，CSS3标准盒模型相比旧有盒模型具有更加便利的布局和计算方式，同时可以通过设置box-sizing属性灵活地选择使用特定类型的盒模型。