现在，在互联网发展的时代，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基本布局时，可以根据不同的条件选择最合适的布局。