【css3】06-css3新特性之网页布局篇

/* 设置容器以便内容可以在容器内居中 */
.container {
  display: flex; /* 使用弹性盒布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 高度设置为视口高度 */
}
 
/* 设置网格布局的列和间距 */
.grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 设置三个等宽列 */
  grid-gap: 20px; /* 设置网格间距 */
  padding: 20px; /* 设置内边距 */
}
 
/* 设置网格项的动画效果 */
.grid-item {
  transition: all 0.3s ease; /* 设置过渡效果 */
}
 
/* 鼠标悬停时改变网格项的颜色和缩放效果 */
.grid-item:hover {
  background-color: #f0f0f0; /* 悬停时背景色改变 */
  transform: scale(1.05); /* 放大效果 */
}
 
/* 设置多列文本的样式 */
.multi-column {
  column-count: 3; /* 设置列数 */
  column-gap: 40px; /* 设置列间隙 */
}

这段代码展示了如何使用CSS3的布局特性，包括弹性盒布局、网格布局以及列的多列文本布局。通过简单的样式设置，可以实现网页布局的优化和用户界面的改善。