美文网首页
content-box和border-box

content-box和border-box

作者: WANG_M | 来源:发表于2021-08-03 09:35 被阅读0次

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。

盒子的宽高 = content(宽/高)- 2 * border - 2 * padding

相关文章

网友评论

      本文标题:content-box和border-box

      本文链接:https://www.haomeiwen.com/subject/xlidvltx.html