CSS3寬度分配是一項非常重要的功能，可以幫助我們實現頁面中的元素布局和排版。它通過使用不同的 CSS 屬性來分配元素的寬度，使得頁面的排版更加靈活和可控。在本文中，我們將逐一介紹 CSS3 寬度分配的各種方法和技巧。 使用 pre 標簽來展示代碼，你可以把下面的代碼復制到你的文本編輯器中，然后再將其粘貼到 HTML 頁面中。

// 使用百分比分配寬度
p {
width: 50%;
}
// 使用 em 或 rem 單位分配寬度
p {
width: 10em;
width: 5rem;
}
// 使用 calc() 函數分配寬度
p {
width: calc(100% - 20px);
}
// 使用 flex 布局分配寬度
.container {
display: flex;
}
.item {
flex: 1;
}
// 使用 grid 布局分配寬度
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

使用百分比分配寬度是一種很常見的方法。它可以讓頁面中的元素自適應窗口大小，并且可以很靈活地控制元素的排版。例如，在一個有兩個相鄰的 p 元素的容器中，我們可以使用 width: 50% 來讓它們平分容器的寬度。 em 和 rem 單位也可以用來分配寬度。它們可以讓元素的寬度與字體大小相關，從而實現更加靈活的排版方式。例如，我們可以使用 width: 10em 或 width: 5rem 來讓 p 元素的寬度等于其字體大小的 10 倍或 5 倍。 calc() 函數是一個很方便的方法，它可以讓我們計算元素的寬度，從而實現更加精確的排版。例如，我們可以使用 width: calc(100% - 20px) 來讓元素的寬度等于窗口寬度減去 20 像素。 flex 和 grid 布局是 CSS3 中最強大的排版工具之一，它們可以幫助我們實現非常復雜和精細的排版布局。例如，在使用 flex 布局時，我們可以將容器設置為 display: flex，并將每個子元素的 flex 值設置為相同的值，從而實現等寬排版。在使用 grid 布局時，我們可以將容器設置為 display: grid，并使用 grid-template-columns 屬性來定義列的寬度。 總之，CSS3 寬度分配是非常重要的，它可以幫助我們實現頁面中的元素布局和排版。我們可以靈活地使用不同的 CSS 屬性來分配元素的寬度，從而實現各種不同的布局需求。希望本文對大家有所幫助，如有需要還請多多指教。