团队的信任
定义元素的大小，设置最小和最大宽度和高度值，并隐藏超出元素边界的内容。
在响应式网页设计中，宽度和高度属性的大小是基于里面的内容，但可以更具体地使用像素(px)、百分比(%)、ems、rem、视口宽度(vw)、视口高度(vh)、视口最小值和最大值(vmin和vmax)、分数单位(fr)和字符单位(ch)来定义。
在这节课中，我们将介绍这些单元，以及最小值和最大值，溢出和对象匹配。
本课:
默认情况下，网页元素会根据里面的内容自动调整大小。
像素值可以与具有指定像素值的图像和其他元素按比例缩放。
使用默认像素值:
像ems一样，percentage指的是父元素的字体大小。如果你在一个部分上有填充，并将宽度设置为25%，它将占用元素内部空间的25%。
当您想要在带有文本的元素上设置比例填充时，Ems非常实用。每个浏览器都有默认的字体大小，通常是16px。Ems查看它们的父元素并按比例缩放字体大小。
如果字体是16像素:
你也可以在段落的父元素上设置字体大小，比如Div块：
当父元素是20像素时:
rem是相对于HTML字体大小的。
rem是通过将rem值乘以HTML字体大小来计算的(除非您在代码中手动更改字体大小，否则它尊重浏览器的字体大小)。这样做的好处是尊重用户的浏览器首选项(如果在浏览器上设置了自定义文本大小)。
rem查看根(根ems) -它们查看HTML标记，除非您更改它，否则它会尊重浏览器的默认字体大小。(rem忽略元素或元素的父元素上的字体设置，并根据浏览器的字体大小进行缩放。)
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的高度)。这不是一个问题，直到浏览器变得更短，元素开始溢出或在底部剪辑(这看起来不太好)。
专业技巧:使用最小值来删除部分的任何显式高度，并将最小高度设置为100vh。现在你的部分不会短于视口高度的100%。
如果你想将一个部分的高度设置为800像素，将其设置为最小高度意味着它将是800像素高，同时尊重其内容的宽度(如果需要，它可以变得更高)。
如果你不想让一个段落的宽度超过60个字符，你可以选择任何一个段落，点击所有段落标签并设置最大宽度(例如，60ch)。现在你的默认，除非你重写它，将自限制段落在60个字符(60个零在任何字体)。
当元素上设置了宽度和高度，但没有足够的空间容纳其中的内容时，会自动发生溢出。默认情况下，文本溢出是可见的。如果您选择了元素，请单击进入风格的面板>大小>溢出，您将看到第一个图标，the可见(眼睛)图标，默认情况下是选中的，这意味着溢出的文本默认为可见。
溢出的其他选项有:
要使用对象匹配，请转到大小章节。风格的面板：
请注意:当使用对象匹配时，确保父元素有宽度和高度。这是因为所有对象匹配选项都适合父元素中的内容，但对象匹配设置在孩子父母的。
