CSS 因其能夠讓網頁設計師和開發者靈活地控制網頁的外觀和布局而備受歡迎。而其中一個重要的概念就是兩頭充滿。下面我們來詳細了解一下。

.full-width {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}

兩頭充滿的主要思想是讓元素的寬度緊貼容器的邊緣，這意味著它沒有任何左右間隔。這種形式最常見于頂部導航欄、頁腳和其他全寬度元素中。

要將一個元素變成兩頭充滿的，首先需要將它的寬度設置為 100%。但是，這個設置通常會在較小的屏幕上過分拉伸并破壞布局。為了解決這個問題，我們可以使用box-sizing: border-box設置盒模型，這樣 padding 和 border 都被包含在設置好的寬度內。

.full-width {
margin: 0;
padding: 0;
}
.full-width * {
box-sizing: border-box;
}

除了使用上述代碼之外，我們還可以使用一個更簡潔的方法來實現兩頭充滿的效果。我們可以將元素和其所有子元素的盒模型都設置為border-box，這樣就不需要對元素的寬度做任何調整。當然，這可能會對其他元素的布局造成影響，但大多數情況下，這種方法非常方便，因為可以立即實現兩頭充滿的效果。

兩頭充滿是 CSS 中一個很重要的使用技巧，通過它，我們能夠輕松靈活地控制我們的布局，讓整個網頁看上去更加美觀。