回到所有的课程
课程库

输入值和单位

输入并更新数值,并在数值输入字段中使用不同的单位。

本视频采用了旧的用户界面。更新版本即将到来!

无论您是指定间距值、设置元素或字体的大小,还是使用转换旋转元素,都可以在适当的输入字段中输入值和单位。你甚至可以在任何数字字段输入字段中做数学运算。想要双倍的大小您的div块?在当前值后输入*2并按enter键。

当你在画布上添加一个元素并调整它的大小时,根据元素在现有布局中的流动方式,元素的起始宽度和高度将与元素的“自然”大小匹配。

使用键盘更改输入值

当数值字段被聚焦时,可以使用键盘上的上↑和下↓箭头将数值增加或减少1。按住Shift键将使数值增加或减少10。按ESC取消对输入字段的聚焦。

为多个边添加间距预置

使用预设为多个边添加空间:

  1. 在Spacing区域,单击其中一侧的值
  2. 将鼠标悬停在您想要选择的预设值上
  3. 按住Option(在Mac上)或Alt(在Windows上),然后点击你选择的值

这样做会将预设应用到元素的两边-或者你可以按住Shift将值应用到所有的边。

用鼠标更改输入值

一旦你的光标在一个数字输入字段,你可以按住Option(在Mac)或Alt(在Windows),然后点击并拖动你的鼠标来调整值(拖动左值来减少值或拖动右值来增加值)。没必要把右手从鼠标上拿下来。

增量值

你可以按住Option(在Mac上)或按住Alt(在Windows上)来查看输入框旁边的递增箭头,通过点击数值旁边的向上或向下箭头来递增或递减。

通过单击数值旁边的向上或向下箭头递增地添加或减去

在多个方向上调整间距值

你可以按住Option(在Mac上)或按住Alt(在Windows上)同时拖动保证金和填充控件将相同的值应用于两侧-或按住Shift将该值应用于所有两侧。

改变单位

您可以使用单位下拉框或者在值后面输入单位来更改输入字段中的单位。

当您将单位从px更改为%时,我们将自动为您计算近似的转换。

CSS单位

大多数输入栏允许您选择以下单位:

  • PX(像素)-相对于屏幕分辨率
  • %(百分比)——相对于父元素
  • EM—相对于父元素的字体大小
  • REM—相对于body元素的字体大小
  • VH -相对于视口高度。视口高度为100vh。
  • VW -相对于视口宽度。视口宽度为100vw。
  • ——没有单位

对于某些字段,你可以用一个值来替换单位,比如:

  • 汽车
  • 没有一个

字体设计单位

当您为样式属性(如字体大小或行高)设置值时,应用于您在字段中输入的数值的默认单位是像素(px)。还有一些其他的单位,你可以选择改变字体大小的行为。

像素(px)(默认)

字体大小的像素值可以与具有指定像素值的图像和其他元素成比例地伸缩。要使用默认像素值,只需输入一个数值,例如90,然后按enter键。该值将为90px。

Ems (em)

每个浏览器都有默认的字体大小,通常是16px。当你将网站元素的字体大小设置为1em时,1em就等于16px。2ems等于2 × 16px = 32px。

Webflow中的排版单元

Ems是相对于它们父辈的字体大小的。因此,如果父段的值为0.5ems,那么子段的值为1em的字体大小为16 x 0.5 = 8px,而body中另一个字体大小为1em的段落的字体大小可能为16px。

Webflow中的排版单元

Rems或- Root ems (rem)

作为ems的替代方案,您可以使用rems,也就是根ems。Rems是相对于HTML字体大小的。这将尊重浏览器的默认字体大小。因此,任何值为1rem的元素将等同于16px,而不管其父元素的字体大小如何。即使你改变了body中的默认字体。

Webflow中的排版单元

百分比(%)

与ems一样,百分比表示父元素的字体大小。

视口单元(vw & vh)

视口单元可用于创建响应式字体。视口宽度(vw)基于视口的宽度。当您想要将文本按比例缩放到视口宽度时使用。视口高度(vh)基于视口的高度。当您想要将文本按比例缩放到视口高度时使用。

当使用视口单元时,在实际设备上测试,特别是使用vh时。这些字体大小在不同的设备上会有很大的不同。

行高的单位

无单位(默认)

使用" unitless "单元是行高的最佳选择,因为它使行高是字体大小的倍数。当字体大小改变时,行高会自动缩放。

若要设置“无单位”的单位,请在单位菜单中选择“-”或在值后输入“-”并按回车键。

百分比(%)

行高的百分比值也会乘以字体大小。然而,有继承问题可能会出现%,所以建议使用unitless代替。

固定的单位

如果您想对行高有更多的控制,可以使用固定值,如px、em或rem。

角的单位

阴影,变换,如旋转和倾斜,色调旋转过滤器使用角度单位。你可以用正的值来顺时针旋转,用负的值来逆时针旋转。

  • 温度(-度)-范围从0到360度。0和360的值相同。
  • RAD(-弧度)-等于180/π度或约57.3度
  • GRAD(-梯度)-相当于1 / 400的一个完整的圆
  • 转(-转)-一个旋转。一圈是360度。

时间单位

时间单位用于过渡和交互的持续时间设置。

  • 女士-毫秒。1000毫秒是1秒。

尝试Webflow——它是免费的
Baidu
map