了解Width＆Height CSS属性将帮助您更好地编码

如果您不了解如何使用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