content-box
content-box是符合w3c标准的盒模型(默认的盒模型)
content-box是根据设定的样式确定元素content的宽高,有border和padding的情况下额外增加盒子的宽高,内容宽高不受影响。
盒子的宽高 = content(宽/高)+ 2 * border + 2 * padding
border-box
border-box是不符合w3c标准的盒模型(怪异盒子)
border-box是先根据设定的样式固定盒子的宽高,如果有border和padding的情况下,再根据盒子的宽高减去border或者padding,内容的宽高会受到影响,会被减去border或者padding。
网友评论