在CSS中,常常需要為元素設置寬度。有時候,我們需要將寬度設置為整個父元素的寬度,可以使用寬度為100%來實現。
但是,在實際開發中,我們也經常需要為元素留出一些空隙,比如頁面頂部導航欄、側邊欄等。這時候,我們可以使用寬度為100%減去一定的數值來實現元素寬度的設定。
.example { width: calc(100% - 120px); }
上述代碼表示,為類名為example的元素設置寬度,寬度為整個父元素寬度減去120像素的空隙。這里使用了CSS中的計算函數calc(),可以對數值進行加、減、乘、除計算。
除了減去像素單位的數值外,還可以減去百分比等表達式。比如,以下代碼可以將一個元素的寬度設置為父元素寬度的80%,再減去30像素。
.example { width: calc(80% - 30px); }
通過寬度為100%減去一定數值的方式,可以讓我們更靈活地控制元素的尺寸,同時實現元素與父元素之間的空隙控制。