记一次重温CSS盒模型遇到的疑惑

我今天在重温CSS盒模型时突然产生了一次懵逼,因为我发现chrome上发现这样一个【疑问】。


【疑问】:W3C盒模型说【宽度=正文内容】那么为啥这个尺寸是220220不是200200。
抱着这样的疑问,我开始了一次给自己解疑的路程。

首先我明确了一个知识点,一直以来我看过的盒模型文章都是告诉我:
W3C盒模型【width=content】
IE盒模型【width=content+padding+border】
记着这样的知识点,我分别给div添加了【box-sizing: border-box】和【box-sizing: content-box】


从如上两图我发现,因为我的【宽度】和【内边距】是固定的,所以我的content一直在变化。
content-box时是200200
border-box时是180
180
由此我可以断定,首先,知识点是没有错的,但是问题发生在哪,我看着这个图深思,突然有个想法冒出来,好像我一开始的认定就是错误。
首先,这个尺寸图没说代表的是元素的宽度,它代表的是元素的总尺寸,想到这里,我突然发现知识点串起来了,这就突然解决了我产生的疑惑,现在想想,这次的疑惑才是真正的解决了我对CSS盒模型的理解。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,844评论 0 11
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,122评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,892评论 0 6
  • 女人如何才能活得有福气? 长得漂亮是优势,活得漂亮是本事。不管处于什么年岁,女人都应该自信而优雅地活着。 相较于不...
    甜酒少女阅读 3,808评论 0 4