我是一位经验丰富的网络开发人员。我花了数年时间研究Web应用程序，但我的90％的工作都是在后端，使用Python和Django。最近我试图改进我的前端印章，即HTML，CSS和JavaScript。
我遇到的一个常见问题是：我正在编写HTML页面，将其加载到Chrome中，其中一个元素的大小或位置不像我想要的那样。也许它太宽了，也许它太窄了，可能太多了，可能太多了，可能太多了，等等。因为我不是HTML和CSS的专家，而我没有记住可以决定元素大小和位置的所有神秘的小规则，这种情况经常发生，而且非常令人沮丧。
当发生这种情况时，我需要找出为什么该元素的位置/大小错误，以便我可以解决这个问题。 我想要的是找出网页中某个元素的大小和位置的一般方法。我希望得到像＃34;元素X的答案宽度为300px，因为它具有属性width: 300px;＆＃34;或者＆＃34;元素Y的宽度为380px，因为它包含在元素Z中，其宽度为400px，填充为10px。＆＃34;当然，它并不需要这么冗长，但我需要获取这些信息。
现在，我熟悉Chrome开发工具。我一直都在使用它们。他们很棒。但我不知道他们是如何回答这个问题的。他们可以提供帮助，但我仍然发现自己必须分别调查每个案例，这可能需要数小时而没有结果。 （这只是今天发生的，这就是我花时间写这个问题的原因。）
有没有办法随时了解HTML元素的大小和位置为何？
答案 0 :(得分：4)
很抱歉这样说但是没有任何捷径来识别这样的事情。考虑一下我们/任何开发人员如何确定您的想法以及您的设计或开发内容。
建议：最佳识别方法是学习HTML和HTML的基础知识。 CSS。而且你也可以使用像mozila这样的一些很棒的救生工具，比如开发工具和工具。萤火虫。
答案 1 :(得分：2)
经验是关键。但是有一些事情对我有帮助，我会试着告诉你他们。
对我而言，第一个也是最大的帮助是box-sizing属性：https://css-tricks.com/box-sizing/
它做什么？它只是让浏览器像你一样思考。如果设置宽度：200px;宽度将为200像素，如果添加填充，它将向内增长。
第二，定位：http://www.barelyfitz.com/screencast/html-training/css/positioning/
position: static;个元素只是放在页面中，并且通常＆＃34;通常＆＃34;。
position: relative;就像静态一样，但是具有position：absolute的子元素将具有相对于其第一个父级的值，其位置为：relative;
position: absolute;这将使元素脱离页面的正常流程。这意味着空绝对元素的宽度将为0.
第三，浮动：https://css-tricks.com/all-about-floats/
浮点数会将块元素的宽度减小到其内容的宽度，并使它们彼此相邻浮动。
如果您发现浮动元素的父级没有任何高度，则意味着您需要清除这些浮动。我通常只为此添加overflow: hidden;。
第四 - 显示：https://css-tricks.com/almanac/properties/d/display/
display:inline;元素将彼此相邻堆叠。添加到内联元素的边距和填充将不起作用。
display: inline-block;喜欢内联，但边距和填充可以正常工作
display: block;它是您可能最习惯的人。元素堆叠在另一个上，填充和边距有效。
（注意显示属性ie7将它们混合一点，所以要注意这一点）
总的来说，我会说＆＃34;点击＆＃34;对我来说真的是盒装大小的东西。试试吧！
除此之外，即使是经验丰富的前端开发人员也会发现自己时不时地摸不着头脑，当它发生时，唯一剩下要做的就是老好的检查员。
希望这有帮助。
阅读TreeTree的回答后编辑。在前端工作时始终使用css重置以消除浏览器不一致。一个好的是Eric Meyer的css重置：http://meyerweb.com/eric/tools/css/reset/或者使用样板http://www.initializr.com/开始你的项目
答案 2 :(得分：-2)
根据我的经验，跨浏览器的不同大小的一个很好的理由是浏览器的这些元素的默认样式表。我发现这在表单元素中特别明显。在边距，填充和边框大小方面，文本输入的默认样式可能因浏览器而异。
box-sizing:border-box是解决此类问题的好方法，因为它可以确保元素的最终宽度符合您的定义。
reset stylesheet将是另一种消除这些微小差异的好方法，因为它明确地将所有样式设置为某些＆＃34;正常＆＃34;格式。