你真的知道元素的宽度吗？.pdfVIP

你真的知道元素的宽度吗？ W3C的标准，⼜称标准盒⼦模型，content-box ： 《css权威指南》和MDN官⽅⽂档对 width都做出了相同的规定 元素的 width 被定义为从左内边界到右内边界的距离，height 则是从上内边界到下内边界的距离。 《css权威指南》： 属性指定了元素内容区的宽度. 在元素padding，border和margin⾥⾯。 MDN官⽅⽂档：width 标准盒模型的width就是content的宽度 ，不包括内边距padding，边框border.在最新的css3可以通过box-sizing：content-box来 设置盒⼦为标准盒⼦。 Internet Explorer标准，⼜称 IE盒模型，border-box: IE盒模型的官⽅⽂档对于此的定义暂时没有找到，但是众所周知的是，此模型的width包括内容content，内边距padding，边框 border。可以通过box-sizing:border-box来实现。⼀旦设置成IE盒模型，元素的渲染宽度就是设置的width值，再设置内边距padding， 边框border时就会向内拓展，侵吞content内容，不会向外拓展，也就是相当于content包裹了padding，border。 后记，当提到中⽂ 宽度 时，⼀般就是指的是可视宽度，渲染宽度，即在浏览器中的显⽰宽度，当提到英⽂width时，指的是 content的宽度，⼆者不能混为⼀谈。⽽且我们会发现这两种盒⼦模型的width其实都是content的宽度。