HTML – 物理宽度与内容宽度？

概述我正在学习CSS,我遇到了物理宽度和内容宽度概念的问题.网站似乎是指它们,而没有真正解释它们的区别. 我知道它与CSS盒子模型有关,如果有其他人可以帮助我那将是伟大的. 例如,如果在css中给出以下内容： div {width: 400px;padding-left: 20px;padding-right: 10px;margin: 0px 10px;border: 2px solid 我正在学习CSS,我遇到了物理宽度和内容宽度概念的问题.网站似乎是指它们,而没有真正解释它们的区别.

我知道它与CSS盒子模型有关,如果有其他人可以帮助我那将是伟大的.

例如,如果在CSS中给出以下内容：

div {wIDth: 400px;padding-left: 20px;padding-right: 10px;margin: 0px 10px;border: 2px solID pink;}

包含在物理宽度中的是什么？内容宽度是多少？

解决方法 >“宽度”是指内容区域;把它想象成你盒子的“内部”.
>“填充”是额外的,添加在内容区域的外部.它可以是0.
>“边框”是额外的,在填充之外,如果有的话.
>如果有的话,“边距”在边界之外再次是额外的.

所以,如果你有宽度400,填充左20,右10,边距20(每边10个),边框4个像素(每边2个),你的整个框将是400 20 10 20 4 = 454px

所以,如果你试图将它放入一个只有400像素宽的空间,你需要减少某些地方的东西;例如,你可以将宽度减少54像素,使得总数达到400.

请注意,这不适用于“Quirks模式”,它使用略有不同的盒子模型,如Sean的回答中所述.这仅适用于没有正确DOCTYPE的IE;通常希望避免怪异模式.

总结

以上是内存溢出为你收集整理的HTML – 物理宽度与内容宽度？全部内容，希望文章能够帮你解决HTML – 物理宽度与内容宽度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。