CSS是前端開發(fā)中不可或缺的一部分，它的作用是通過各種屬性和值來布置網(wǎng)頁的各個(gè)部分，讓我們的網(wǎng)頁更加美觀和易于操作。其中，設(shè)置高度和寬度是CSS中比較重要的屬性之一。

CSS中設(shè)置高度和寬度的方法非常多，其中一個(gè)比較常見的就是使用寬度比例來設(shè)置高度。這種方法的好處是可以很好地適應(yīng)不同尺寸和比例的屏幕，讓我們的網(wǎng)頁在各種設(shè)備上都能夠正常顯示、并能夠擴(kuò)展。

/* CSS代碼 */
.container{
width: 80%; /* 容器寬度為80% */
height: 0;
padding-bottom: 80%; /* 基于寬度的80%來設(shè)置高度 */
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
}

上述代碼中，通過設(shè)置padding-bottom屬性為80%，讓高度基于寬度的80%來進(jìn)行設(shè)置，這使得高度隨著寬度的變化而自動(dòng)縮放。同時(shí)，使用position屬性來使box元素相對于容器進(jìn)行定位，使其可以充滿整個(gè)容器，從而適應(yīng)不同尺寸和比例的屏幕。

在實(shí)際開發(fā)中，我們可以根據(jù)需要自定義設(shè)置高度寬度比例，來達(dá)到最佳的顯示效果。同時(shí)，注意要對不同設(shè)備和瀏覽器進(jìn)行測試，使我們的網(wǎng)頁能夠在各種環(huán)境中都能正常顯示。