CSS Chrome dev-tools：谁设置了元素的高度/宽度

在本文中，我们将介绍CSS Chrome开发者工具中的高度和宽度属性是如何被设置的。通过Chrome开发者工具，我们可以轻松地检查和调试我们的网页样式。这些工具提供了强大的功能，使我们能够更好地理解页面的渲染过程以及样式如何被应用和计算。

阅读更多：CSS 教程

什么是Chrome开发者工具？

Chrome开发者工具（Chrome DevTools）是Chrome浏览器内置的一组Web开发和调试工具。它提供了一种查看网页的内部结构、样式、性能和调试错误的方法。其中一个重要功能是检查和编辑页面元素的样式。

通过打开Chrome浏览器，右键点击网页上的任何元素，然后选择“检查”选项，即可打开Chrome开发者工具。在开发者工具窗口中，我们可以看到元素的标记和样式以及应用在元素上的任何CSS规则。

在Chrome开发者工具中，我们可以检查任何元素的样式属性。对于高度和宽度属性，我们可以轻松地找到元素的值以及是什么规则设置了这些属性。

在Elements（元素）选项卡中，我们可以看到HTML文档的结构。通过点击不同的HTML元素，在右侧的Styles（样式）选项卡中，我们可以看到元素的所有已应用的CSS规则。

对于高度和宽度属性，我们可以在Styles选项卡中找到相应的属性。如果有多个CSS规则设置了相同的属性，那么Chrome开发者工具会按照CSS的优先级规则，以及CSS规则的从上到下顺序来确定最终的值。在开发者工具中，我们可以看到应用了哪些规则以及最终计算出的高度和宽度值。

当我们查看元素的高度和宽度属性时，开发者工具会显示两个值：计算值（computed）和应用值（applied）。

计算值是通过应用CSS规则后计算得出的最终值。它可能受到视口（viewport）大小、父元素的尺寸、盒模型和其他CSS属性的影响。计算值反映了元素在文档流中所占空间的实际大小。

应用值是从CSS规则中直接获取的原始值。它可能是具体的尺寸值（如像素、百分比等）或者其他CSS属性（如auto等）。应用值通常反映了开发者在样式表中显式设置的值。

通过查看计算值和应用值，我们可以更好地了解元素的尺寸是如何被计算和应用的。

让我们通过一个简单的示例说明如何在Chrome开发者工具中检查元素的高度和宽度被设置的情况。

假设我们有一个HTML文档，其中包含一个div元素，并在样式表中定义了一些属性：

<div id="example" style="width: 300px; height: 200px;"></div>

打开Chrome浏览器，在页面上右键单击该div元素，并选择“检查”选项以打开开发者工具。
在Elements（元素）选项卡中，展开div元素并找到Styles（样式）选项卡。
在Styles选项卡中，我们可以看到div元素的宽度为300像素，高度为200像素。在Styles选项卡中，可以看到直接设置了宽度和高度属性，即它们的应用值为300px和200px。
在Styles选项卡中，还可以查看计算值，它可以是自动计算或基于其他CSS规则计算而来。

通过这个示例，我们可以清楚地看到如何使用Chrome开发者工具查看元素的高度和宽度属性是如何设置的。