CSS3中的等分和間距 CSS3中的等分和間距是一種常見的布局技巧。通過(guò)指定元素的寬度、高度、間距和列數(shù)等屬性，可以輕松地創(chuàng)建網(wǎng)格布局和柵格布局。 在CSS3中，我們使用calc函數(shù)來(lái)計(jì)算元素的寬度或高度。例如，以下代碼將創(chuàng)建一個(gè)3列網(wǎng)格布局，每列的寬度為calc(33.33% - 10px)，其中10px為列之間的間距。

.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: calc(33.33% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}

此外，我們還可以使用grid布局和flexbox布局來(lái)實(shí)現(xiàn)更復(fù)雜的等分和間距效果。在grid布局中，我們可以使用grid-template-columns屬性來(lái)定義列數(shù)和寬度，例如以下代碼將創(chuàng)建一個(gè)4列網(wǎng)格布局，每列的寬度為100px，間距為20px。

.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 20px;
}
.grid-item {
width: 100%;
height: 100%;
}

在flexbox布局中，我們可以使用flex屬性來(lái)定義元素的寬度和寬度比例。例如，以下代碼將創(chuàng)建一個(gè)4列柵格布局，每列寬度比例為2:1:1:1，間距為20px。

.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.grid-item {
flex: 2;
margin-right: 20px;
margin-bottom: 20px;
}
.grid-item:nth-child(2), .grid-item:nth-child(3), .grid-item:nth-child(4) {
flex: 1;
}

以上是CSS3中常見的等分和間距布局技巧，可以根據(jù)實(shí)際需要進(jìn)行靈活運(yùn)用。