HTML和CSS是網頁開發的基本技術，其中CSS控制網頁的樣式，包括字體、顏色、布局等。在網頁的布局設計中，往往需要實現寬高自適配的效果，以適應不同設備和屏幕的大小。下面介紹幾種實現寬高自適配的CSS方法。

1. 使用vw和vh單位

.container {
width: 50vw; /* 寬度為視口寬度的50% */
height: 50vh; /* 高度為視口高度的50% */
}

以上代碼中，vw和vh是相對于視口寬度和視口高度的單位，也就是說它們會隨著窗口的大小而變化。擴展性好，但在移動端可能會出現兼容問題。

2. 使用百分比

.container {
width: 50%; /* 寬度為父元素的50% */
height: 50%; /* 高度為父元素的50% */
}

以上代碼中，寬度和高度都設置為了父元素的50%，也就是說它們會隨著父元素的變化而變化。但需要注意的是，如果父元素沒有固定的寬度和高度，它們的百分比值也就無從談起。

3. 使用flex布局

.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
height: 100%;
}

以上代碼中，父元素設置為flex布局后，子元素的寬度和高度可以根據flex-grow、flex-shrink和flex-basis等設置來自適應。這種方法尤其適用于網頁的響應式布局。

總之，實現寬高自適配可以讓網頁更好地適應各種設備和屏幕，提高用戶體驗。以上介紹的方法只是冰山一角，除此之外還有很多其他的CSS技巧可以使用，需要根據具體的布局要求和實際情況來選擇合適的方法。