在CSS中，設定元素的寬度（width）和高度（height）是基本的樣式調整，用來控制元素的大小。這兩個屬性可以使用多種單位來設定，如像素（px）、百分比（%）、視窗單位（如vw、vh）、以及其他相對單位（如em、rem）。

寬度與高度的基本設定

• width：設定元素的寬度。例如，width: 100px; 將元素寬度設為100像素。
• height：設定元素的高度。例如，height: 200px; 將元素高度設為200像素。

百分比單位

使用百分比時，width: 50%; 代表元素寬度是其父元素寬度的50%。同理，height: 50%; 代表高度是其父元素高度的50%。這對於響應式設計很有幫助，因為元素尺寸會隨父元素尺寸變化。

視窗單位

視窗單位則與瀏覽器視窗大小相關，例如：

• vw (Viewport Width)：視窗寬度的1%。
• vh (Viewport Height)：視窗高度的1%。
  設定 width: 50vw; 會讓元素寬度等於視窗寬度的一半。

自動設定

若設定為 auto，CSS會自動計算元素的大小，這通常依賴內容來確定寬高。

例子

div {
    width: 50%;
    height: 100px;
    background-color: lightblue;
}

這段CSS將一個div元素寬度設為父元素的50%，高度設為100像素，背景顏色設為淺藍色。

使用這些屬性時，要注意CSS中的盒模型（box model），其中padding、border和margin會影響元素的實際尺寸。為了確保寬高的預期效果，可以使用box-sizing: border-box;來包含內邊距和邊框。