css3 宽度包含padding

CSS3中的宽度包含padding，是一个非常实用的功能。在以前的版本中，元素的宽度不包括padding，这就经常导致页面布局的问题。而在CSS3中，我们可以通过使用Box-sizing属性来实现包含padding的宽度计算。 使用Box-sizing属性，我们可以指定元素的盒模型类型。默认情况下，盒模型类型为content-Box，这意味着元素的宽度只包括内容区域，不包括padding和border。而使用Box-sizing属性将盒模型类型改为border-Box，就可以实现宽度包含padding的计算了。 下面是一个简单的示例代码：

p {
  Box-sizing: border-Box;
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
}

以上代码将p标签的盒模型类型改为border-Box，然后指定宽度为200px，padding为10px，border为1px实线边框。此时，元素的总宽度即为200px，包括padding和border的宽度。这样我们就可以更方便地控制元素的布局了。 需要注意的是，Box-sizing属性在一些老版本的浏览器中可能不被支持。在这种情况下，我们可以使用hack的方式来兼容这些浏览器。比如使用：

p {
  Box-sizing: border-Box;
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  *width: 218px;
  *padding: 0 9px;
}

以上代码在IE6和IE7中都可以正确地计算宽度，并且使用了hack的方式来避免影响其他浏览器的效果。 总之，CSS3中的宽度包含padding，让我们可以更方便地进行页面布局，同时也让代码更加简洁和易读。如果我们需要考虑兼容性问题，那么使用hack的方式来解决就可以了。