你真的知道元素的宽度吗?

 W3C的标准,又称标准盒子模型,content-box :

《css权威指南》和MDN官方文档对 ' width'都做出了相同的规定

《css权威指南》:元素的 width 被定义为从左内边界到右内边界的距离,height 则是从上内边界到下内边界的距离。

 MDN官方文档:width 属性指定了元素内容区的宽度. 内容区在元素padding,border和margin里面。

   地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/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的宽度。

猜你喜欢

转载自blog.csdn.net/qq_41995398/article/details/98871970