Size 尺寸

定義一個元素的大小，設置最小和最大的寬度和高度值，並隱藏溢出元素邊界的內容。

在響應式網頁設計中，寬度和高度屬性的大小基於裡面的內容，但可以更具體地使用一些來定義。

在本課中，我們將介紹這些：

自動調整大小

默認情況下，元素的大小是根據裡面的內容自動決定的。

像素值可以與圖像和其他有指定像素值的元素按比例縮放。

百分比指的是元素在父元素裡所佔的比例大小。

當您想在一個有文字的元素上設置比例填充時，Ems就很實用。

每個瀏覽器都有一個默認的字體大小，通常為16px。 Ems查看它們的父元素並按比例調整字體大小。

假設一個字體是16像素： 1個em是16像素 2個ems=32像素 1.5個ems=24像素

您也可以在一個段落的父元素上設置字體大小，比如Div：

當父元素為20像素時： 1個em=20像素 2個ems=40像素 3個ems=60像素

Rems是相對於HTML字體大小而言的。

Rem的計算方法是將Rem值乘以HTML字體大小（它依循瀏覽器的字體大小，除非您在代碼中手動改變它），這樣做的好處是尊重用戶的瀏覽器偏好。

VW是對瀏覽器視窗寬度的測量，根據視口的寬度按比例進行縮放。

小數單位(fr)在任何設置為網格的地方都可以使用。如果有一個4列的網格，每一列默認為1fr--1fr等於1/4的網格。如果您增加了一列，每個fr就等於1/5。您可以改變這些值（例如，將第一列設置為2fr）。小數單位會自動縮放事物--一切都會自動計算，包括列的間隙。

字符單位非常適用於確定段落或標題的大小，以限制人們每行所需閱讀的字符數。

例如一個段落的最大寬度為60ch，那麽它就會採用選定的字體（該段落的字體），並將該段落的邊界設置為等於60個零的寬度。

當您試圖限制字符數時，CH讓您在文本元素上設置寬度（基於字體的零字符寬度。）

如果把元素的寬度設置為50%，它就會占用其父元素內50%的空間。當調整視窗大小時，該元素就會相應地縮小。

如果在元素上設定了最小（如200px）和最大（如500px）的寬度，它就會保持50%的寬度，並且在視窗收縮和擴展時保持在最小（200像素）和最大（500像素）的寬度之內。

提示使用最小值來刪除元素的任何明確的高度，而將最小高度設置為100vh。現在妳的部分不會短於視口高度的100%。如果想把元素的高度設置為800像素，把它設置為最小高度意味著它將是800像素高，同時尊重其內容的寬度（如果需要，它可以變得更高）。

假如您不希望一個段落的寬度超過60個左右的字符，可以選擇段落標簽，設定最大寬度（例如，60ch），則現在的默認值將自動限制在60個字符的段落（不管是什麽字體的60個零）。

當元素上設置了寬度和高度，但沒有足夠的空間容納裡面的內容時，溢出就會自動發生。默認情況下，溢出的文本是可見的。選擇元素並點擊進入樣式面板>尺寸>溢出，您會看到第一個圖標，可見（眼睛）圖標，被默認選中，這意味著溢出的文本默認為可見。

Last updated 2 years ago