[分享]css3宽度包含padding

CSS3中的宽度包含了padding值，这对我们的页面布局有很大的帮助。在CSS2中，元素的宽度只包括内容区域，不包括padding值，因此要想实现元素的宽度包含padding，必须通过一些技巧才能实...

CSS3中的宽度包含了padding值，这对我们的页面布局有很大的帮助。在CSS2中，元素的宽度只包括内容区域，不包括padding值，因此要想实现元素的宽度包含padding，必须通过一些技巧才能实现。而CSS3中，宽度属性已经增加了一个新的值——box-sizing。通过设置box-sizing的值为border-box，元素宽度就可以包含border和padding值了。

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

在上面的代码中，设置了元素的宽度为200px，并且设置了padding值和border值。如果不设置box-sizing的值为border-box，元素的宽度会是230px（200px+20px+5px+5px），而设置了box-sizing的值为border-box之后，元素的宽度就是200px，padding和border值不会再对元素的宽度产生影响。

在实际的页面布局中，我们经常需要为元素设置padding值，如果宽度不包含padding值，就会导致页面的错乱。因此，使用CSS3中的box-sizing属性可以让我们更方便地进行页面布局。