四色格子是一種很有趣的 css 練習(xí)，它可以幫助我們熟悉 css 盒子模型和布局。四色格子通常由一個容器和四個塊組成，每個塊都有不同的背景顏色。以下是一個示例四色格子。

<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>

如您所見，這個四色格子由一個 div 容器和四個 div 塊組成。容器是一個 300px * 300px 的 flexbox 容器。每個塊都通過 flex-grow: 1 等分容器的空間，并且高度為容器高度的一半。 每個塊都有不同的背景色。box1 是黃色，box2 是紅色，box3 是藍(lán)色，box4 是綠色。 這個四色格子的美妙之處在于它的可擴展性。只要更改容器的大小，四個塊將按比例縮放。

.container {
width: 600px;
height: 600px;
/* ... */
}

在這個例子中，我們將容器的大小增加到 600px * 600px。四個塊將等比例縮放，從而保持四色格子的整體外觀。 希望這個簡單的四色格子示例可以幫助您了解 css 盒子模型和布局。它也是一個很好的 css 練習(xí)，你可以更改背景顏色，間距等等來嘗試自己的創(chuàng)意。