在CSS中，寬度和高度通常用于設置盒子模型的大小。然而，很多人不知道CSS中的寬度和高度參照是什么。了解CSS中的寬度和高度參照是非常重要的，它可以幫助我們更好地設計和排版網頁。

在 CSS 中，寬度和高度的參照是父元素的大小。也就是說，一個元素的寬度或高度將參照其父元素的寬度或高度。這意味著我們可以用百分比來設置一個元素的寬度或高度，以及自適應大小。

下面是一個示例：

<div style="width: 50%; height: 50%;"><p>這是一個div元素。</p></div>

在這個例子中，我們設置了一個div元素的寬度和高度為50%。由于這個div元素沒有指定父元素，那么它的寬度和高度將參照瀏覽器窗口的大小。如果我們將這個div元素放在另一個元素中，那么它的寬度和高度將參照父元素的大小。

除了百分比，我們還可以使用像素、em、rem等作為長度單位來設置一個元素的寬度或高度。這些單位也是相對于父元素的大小而言的。

當我們使用百分比作為寬度或高度的長度單位時，我們需要注意一個問題：一個元素的寬度或高度將影響它內部的元素的大小。這也就是為什么我們常常使用box-sizing屬性來確定一個元素的寬度或高度是否包含其內部的padding和border。

在總結中，CSS中的寬度和高度參照是父元素的大小。百分比、像素、em、rem等作為長度單位時，也是相對于父元素的大小而言的。我們需要注意元素內部的padding和border對寬度和高度的影響。這些都是我們在設計和排版網頁時需要注意的重要問題。