我是一名经验丰富的 Web 开发人员。我花了数年时间开发 Web 应用程序，但我 90% 的工作都在后端，使用 Python 和 Django。最近我正在尝试改进我的前端技巧，即 HTML、CSS 和 JavaScript。
我遇到的一个常见问题是：我正在编写一个 HTML 页面，在 Chrome 中加载它，但其中一个元素的大小或位置与我想要的不同。也许它太宽了，也许它太窄了，可能太靠右了，可能太靠左了等等。由于我不是 HTML 和 CSS 方面的专家，而且我还没有记住所有这些晦涩难懂的小规则可以确定元素的大小和位置，这种情况经常发生，真的很令人沮丧。
发生这种情况时，我需要找出该元素的位置/大小错误的原因，以便我可以解决该问题。我想要的是找出为什么我的网页中的某个元素具有它所具有的大小和位置的一般方法。我期待这样的答案：“元素 Xwidth: 300px;的宽度为 300 像素，因为它具有属性”或“元素 Y 的宽度为 380 像素，因为它包含在元素 Z 中，元素 Z 的宽度为 400 像素，填充为 10 像素。” 当然，它不需要如此冗长，但我需要获取这些信息。
现在，我熟悉 Chrome 开发工具。我一直在使用它们。他们很棒。但我不明白他们如何为我回答这个问题。他们可以提供帮助，但我仍然发现自己必须分别调查每个案例，这可能需要数小时才能获得结果。（这只是今天发生的，这就是我花时间写这个问题的原因。）
有没有办法总是知道为什么 HTML 元素具有它的大小和位置？
很抱歉这么说，但是没有任何捷径可以识别这种情况。考虑一下我们/任何开发人员如何识别您心中的需求以及您设计或开发的内容。
建议：最好的识别方法是学习 HTML 和 CSS 的基础知识。您还可以使用 mozila 的一些出色的救生工具，例如开发人员工具和 firebug。