CSS是用于設計網頁的樣式語言，它可以用來控制網頁的顏色、字體、布局等樣式。在網頁設計中，常常遇到需要使子元素的寬度充滿父元素的寬度的情況，下面將介紹如何通過CSS實現。 首先，我們需要了解CSS布局中的盒模型。盒模型包括元素的內容區域、內邊距、邊框和外邊距。經過盒模型的計算，一個元素的寬度是由內容區域、內邊距、邊框和外邊距共同決定的。 接著，我們可以在HTML中設置一個父元素和一個子元素來進行實驗。下面是HTML代碼： `````` 在樣式表中，我們需要同時設置父元素和子元素的樣式。首先，我們為父元素設置一個固定寬度和一個相對定位： ``` .parent { width: 500px; position: relative; } ``` 接著，我們為子元素設置一個絕對定位，使其距離父元素的左邊界、右邊界、上邊界和下邊界都為0，并設置其寬度為100%： ``` .child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; } ``` 這樣，子元素的寬度就會充滿整個父元素，從而實現了子寬度充滿父寬度的效果。 完整的CSS代碼如下所示： ``` .parent { width: 500px; position: relative; } .child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; } ``` 總之，使用CSS實現子寬度充滿父寬度的方法相對簡單，只需為父元素設置一個固定寬度和相對定位，為子元素設置絕對定位和寬度為100%即可。這種方法既簡單又實用，可以用于各種類型的網頁布局設計中。