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

如果您不了解如何使用width和height属性&＃xff0c;编写代码可能会变得很复杂。

• 宽度是从左到右的屏幕&＃xff08;视口&＃xff09;大小。
• 高度是从顶部到底部的屏幕&＃xff08;视口&＃xff09;的大小。

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

例如&＃xff0c;检查此项目如何显示为两个视口的宽度大小不同&＃xff1a;

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

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

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

width属性可以通过三种方式表示&＃xff1a;

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

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

Youtube频道的移动视图&＃xff08;视口大小&＃xff1a;699px&＃xff09;

Youtube频道的桌面视图&＃xff08;视口大小&＃xff1a;1400像素&＃xff09;

宽度单位

宽度可以采用rem单位&＃xff0c;em单位&＃xff0c;像素和百分比。

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

计算百分比宽度

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

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

元素的水平对齐

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

翻译自: https://hackernoon.com/understanding-the-width-and-height-css-property-will-help-you-to-code-better-8n8b3ygg