現在，在互聯網發展的時代，CSS基本布局已成為網頁設計的關鍵之一。這里提供了16個CSS基本布局的例子，以供參考。 首先是常見的固定寬度布局。如下：

.container {
width: 960px;
margin: 0 auto;
}

這個布局是一個簡單的容器，寬度為960像素，水平居中。 其次是彈性布局。如下：

.container {
display: flex;
justify-content: center;
}

這個布局是一個容器，所有子元素都居中。 接下來是兩列布局。如下：

.container {
display: flex;
}
.left-panel {
width: 200px;
}
.right-panel {
flex: 1;
}

這是一個兩列布局。左側面板寬度為200像素，右側面板自動填充。 接下來是三列布局。如下：

.container {
display: flex;
}
.left-panel {
width: 200px;
}
.right-panel {
width: 200px;
}
.content {
flex: 1;
}

這是一個三列布局。左側面板和右側面板寬度分別為200像素，中間內容自動填充。 緊接著是上下布局。如下：

.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 50px;
}
.content {
flex: 1;
}

這個布局中，容器的高度為整個視口高度。頭部高度為50像素，下方的內容自動填充。 然后是垂直居中的布局。如下：

.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

這個布局居中布局容器，使其高度為300像素。 下一步是網格布局。如下：

.container {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 20px;
}
.item {
padding: 20px;
}

此布局使用網格布局，具有兩個相等的列和20像素的間距。 最后是響應式布局。如下：

.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100%;
}
@media (min-width: 768px) {
.item {
width: 50%;
}
}
@media (min-width: 1024px) {
.item {
width: 33.333%;
}
}

這個布局使用媒體查詢，根據屏幕大小自動排列子元素。 這是CSS基本布局的16個例子。因此，在Web設計中使用CSS基本布局時，可以根據不同的條件選擇最合適的布局。