理解 CSS 的 Width & Height 属性将会更好地编写代码

如果您不了解如何使用width和height属性，则编写代码会变得很复杂。

• 宽度是从左到右的屏幕（视口）尺寸。
• 高度是屏幕从顶部到底部的大小（视口）。

默认情况下，网页占据视口的整个宽度，因此网页内容将拉伸以占据整个宽度。 没关系，但有时在以不同视口大小查看网页时，您可能会在网页中出现不一致之处。

例如，检查该项目如何显示为两个宽度不同的视口：

屏幕快照1-视口大小为1366像素

屏幕快照2-视口大小为2023像素

注意第二张屏幕截图中的网页外观。 这是因为网页采用了视口的整个宽度，在这种情况下为2023 px。 因此，似乎一个编写代码的对象是为1366px的视口开发的。 但是，具有不同视口的每个人都不会获得相似的网页外观，除非在body属性中定义了网页可以采用的最大宽度。 因此，在上述情况下，以下代码行节省了一天的时间：

html , body { max-width : 144rem ;}

width属性可以通过三种方式表示：

• 宽度
• min- width——最小宽度的简写。
• max- width——最大宽度的简写。

最小宽度和最大宽度通常在媒体查询中使用。 当您想在屏幕尺寸方面限制设计时，它们很有用。 例如：

Youtube频道的移动视图（视口大小：699px）

Youtube频道的桌面视图（视口大小：1400像素）

宽度单位

宽度可以采用rem单位、em单位、像素和百分比。

rem、em和pixel在创建静态网站布局时很有用，而百分比在创建流畅的网站布局时很有用。 在静态布局中，网站不会随着视口宽度的变化而变化。 但是在流畅的布局中，网站会随着视口宽度的变化而变化。 观看此视频，以了解有关固定布局和固定布局的更多信息。

计算百分比宽度

上面的父级的宽度为900px。 假设我们希望图像的宽度为200px，以百分比表示。 因此，我们将所需的宽度除以父级的宽度，然后乘以100以获得百分比。 在我们的例子中，我们可以将图像的宽度定义为：

img { width : 22.22% }

图像的宽度随父元素的宽度变化而变化。

元素的水平对齐

当您尝试沿水平轴对齐元素时，请始终检查子元素和父元素的宽度。 如果它们的宽度相同，则子元素将不会对齐，因为父元素中没有可用的宽度空间。 在进行水平对齐时，请始终确保父元素的宽度大于子元素的宽度。 在进行垂直对齐时，高度也是如此。

原文链接: https://hackernoon.com/understanding-the-width-and-height-css-property-will-help-you-to-code-better-8n8b3ygg