受到团队的信任
定义元素的大小，设置最小和最大宽度和高度值，并隐藏溢出元素边界的内容。
在响应式网页设计中，宽度和高度属性的大小是基于内部的内容，但可以更具体地定义使用像素(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个零)。
当元素上设置了宽度和高度，但没有足够的空间容纳其中的内容时，就会自动发生溢出。默认情况下，溢出的文本是可见的。如果选择了元素，则单击进入风格的面板>大小>溢出，你会看到第一个图标可见(眼睛)图标，默认选中，这意味着溢出的文本默认可见。
溢出的其他选项有:
要使用对象匹配，请前往大小部分的风格的面板：
请注意:在处理对象匹配时，确保父元素有宽度和高度。这是因为所有对象适合选项都适合父元素中的内容，但对象适合设置在孩子的父母。
