padding/border与width的关系

本文讲述 padding / border 的设置后是否对 width 有影响，width 等于 auto 与 100% 的区别

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

概述

那么 css 属性中width = ？呢

在标准的w3c的规定中 width 的真实值等于 content 区域的值，不加上 padding 与 border 的值

这虽然与我们常规的理解是有所偏差，因为现实角度理解一个盒子宽度应该是 = 内边距 + 边框 + 内容空间宽度，但是标准就是标准你必须遵守；

而标准有时候也是有问题的，在IE5/6中 width的值 = content的width + padding的width + border的width，所以开发的时候要注意 ；

术语:

• padding : 内边距；
• margin ： 外边距；
• border ： 边框；

box-sizing

这是一个css3中新增的一个属性，可以用来控制，width的值是否包括边框和内边距，它有两个值：

• content-box ：代表 width属性 和 height属性 的值是不包括 内边距 和 边框值的，它是默认属性；
• border-box ：代表 width属性 和 height属性 的值是包括 内边距 和 边框 值的；

width : auto 和 width : 100% 的区别

• 在box-sizing 为 content-box 的时候：
  1. width : auto 时，width = 父级的 width - 自己的 padding - 自己的 border；
  2. width ：100% 时，width = 父级的 width；
• 在box-sizing 为 border-box 时：两个并无区别

ps：这上面所指父级元素的 box-sizing 均为 content-box 的条件下