1、单列布局
布局
2、单列布局水平居中
.main{width: 800px;height: 300px;background: #ccc;margin: 0 auto;}
3、自适应宽度两列布局（用得比较少）
布局
4、固定宽度两列布局（用得比较多）
两栏被限制在父级div（main）中.
布局
5、自适应三列布局
布局
6. ケース: 左側は固定 200 ピクセル、右側は固定 300 ピクセル、中央はアダプティブです
layout
< div class ="main">
200px
ブログ パークは 2004 年 1 月に設立されました。ブログ パークは揚州で生まれました。江蘇省はITが非常に遅れている小さな都市ですが、知識とイノベーションを求める人がたくさんいます。ブログパークが誕生した理由はとても簡単です。
300px
7. 混合レイアウト
< meta charset="utf-8">
layout
< class = "footer"> 間の関係: ブロックはブロックの隣にあり、ブロックはブロックの上に積み重ねられています。 これらのブロックが CSS を通じて正しく配置されていれば、Web ページのレイアウトは自然に整います。完璧。
1. 余白: 0 自動的に中央に配置されます
2. 3 つの列に分割する 2 つの方法: 1) 両側の位置: 絶対、左: 0/右: 0、
中央の余白｛0 右 0左｝
2) まずフロートを 2 つの列に分割し、次にフロートを 2 つの列に分割します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
