CSS 布局的一些些点

CSS 布局主要涉及以下几个要点：

1. 盒子模型：内容、填充（padding）、边框（border）和边距（margin）构成了盒子模型。
2. 浮动（Float）：使元素向左或向右浮动，可以创建多列布局。
3. 定位（Position）：可以绝对定位或相对定位元素。
4. Flexbox：一种灵活的布局模型，可以在任何方向上排列子元素。
5. Grid：是一个二维的基于网格的布局系统，可以更容易地设计各种复杂的布局。
6. 网格布局（Grid Layout）：是一个二维的基于网格的布局系统，可以更容易地设计各种复杂的布局。

示例代码：

/* 简单的Flexbox布局 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
/* 网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 三列 */
  grid-gap: 10px; /* 网格间隙 */
}

<!-- Flexbox 示例 -->
<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
 
<!-- Grid 示例 -->
<div class="grid-container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
  <div>项目 5</div>
</div>

以上代码展示了如何使用Flexbox和Grid布局简单地创建一个居中容器和多列布局，以及一个三列的网格布局。