定义元素的大小,设置最小和最大宽度和高度值,并隐藏溢出元素边界的内容。
在响应式网页设计中,宽度和高度属性的大小是基于内部的内容,但可以更具体地定义使用像素(px),百分比(%),ems, rems,视口宽度(vw),视口高度(vh),视口最小和最大(vmin和vmax),分数单位(fr),和字符单位(ch)。
在本课中,我们将介绍这些单元,以及最小值和最大值、溢出和对象匹配。
在这节课中:
默认情况下,web元素的大小会根据它们内部的内容自动调整。
像素值可以与具有指定像素值的图像和其他元素成比例地伸缩。
使用默认像素值:
与ems一样,percentage表示父元素的字体大小。如果你在一个section中设置填充,并将宽度设置为25%,它将占用元素内部25%的空间。
当你想用文本设置元素的比例填充时,Ems是很实用的。每个浏览器都有默认的字体大小,通常是16px。Ems查看它们的父元素并按比例缩放字体大小。
如果字体是16像素:
还可以设置段落的父元素的字体大小,例如Div块:
当父元素为20像素时:
Rems是相对于HTML字体大小的。
rem的计算方法是将rem值乘以HTML字体大小(除非您在代码中手动更改,否则会考虑浏览器的字体大小)。这样做的好处是尊重用户的浏览器首选项(如果在浏览器上设置了自定义的文本大小)。
Rems会查看根(根ems) -它们会查看HTML标签,它会遵守浏览器的默认字体大小,除非你更改它。(Rems忽略元素或元素父元素上的字体设置,并根据浏览器的字体大小缩放。)
VW是浏览器视口宽度的度量,它根据视口的宽度比例缩放。
分数单位(fr)工作在任何设置为网格。
如果您有一个4列的网格,每一列默认为1fr—1fr等于网格的1/4。如果添加一列,每个fr等于1/5。您可以更改这些值(例如,将第一列设置为2fr)。分数单位自动缩放东西-一切都是自动计算的,包括列间隙。
看看我们Webflow大学的CSS网格课程.
CH对于调整段落或标题之类的东西的大小,以限制每行必须阅读的字符数是很好的。
例如,如果一个段落的最大宽度为60ch,它将使用选定的字体(段落的字体),并将段落的边界(它的方框)设置为60个零的宽度。
CH允许您在试图限制字符数量时设置文本元素的宽度(基于字体的零字符的宽度)。
如果将一个元素的宽度设置为50%,那么它将占用父元素内部50%的空间部分).当您调整视口的大小时,元素将相应地缩放。
如果你在一个元素上设置了最小宽度(例如,200px)和最大宽度(例如,500px),它会保持50%的宽度,并保持在最小宽度(200像素)和最大宽度(500px)内,视口会收缩和扩展。
一种常见的设计模式是设置全高区段(例如,高度为100vh)。这不是一个问题,直到浏览器变得更短,元素开始溢出或在底部剪切(这看起来不是太好)。
专业技巧:使用minimums删除任何显式高度从一个节,而不是设置最小高度为100vh。现在你的部分不会短于视窗高度的100%。
如果你想将一个区域的高度设置为800像素,将其设置为最小高度意味着它将是800像素高,同时尊重其内容的宽度(如果需要,它可以变得更高)。
假设你不想让一个段落的宽度超过60个字符,你可以选择任何段落,点击进入所有段落标签并设置最大宽度(例如,60ch)。现在你的默认设置,除非你重写它,将自动限制段落为60个字符(无论字体是什么,60个零)。
当元素上设置了宽度和高度,但没有足够的空间容纳其中的内容时,就会自动发生溢出。默认情况下,溢出的文本是可见的。如果选择了元素,则单击进入风格的面板>大小>溢出,你会看到第一个图标可见(眼睛)图标,默认选中,这意味着溢出的文本默认可见。
溢出的其他选项有:
要使用对象匹配,请前往大小部分的风格的面板:
请注意:在处理对象匹配时,确保父元素有宽度和高度。这是因为所有对象适合选项都适合父元素中的内容,但对象适合设置在孩子的父母。
提交表单时出错了。请联系support@www.raktarban.com