CSS布局

• 布局：把页面分成一块一块，按左中右、上中下等排列。
• 布局通常分为：

1. 固定宽度布局，一般宽度为960/1000/1024px
2. 不固定宽度布局，主要靠文档流的原理来布局（一般用于手机）。
3. 响应式布局：在PC上固定宽度，手机上不固定宽度，也就是一种混合布局。

• 布局的两种思路：

1. 从大到小：先定下大局，然后完善每个部分的小布局。
2. 从小到大： 先完成小布局，然后组合成大布局。

• CSS布局的三种套路

1. float布局

步骤

1. 子元素上加float: left和width
2. 在父元素上加.clearfix

一些经验：

• 有经验者会留一些空间或者最后一个不设width
• 不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的。
• IE 6/7存在双倍margin bug，解决办法有两个：一是针对IE 6/7把margin减半；二是加一个display: inline-block。
• 在使用border调试法时，有的时候border会干扰宽度，可以改为outline（不占空间）。
• float进行平均布局时，要用到负margin。
• float需要程序员自己计算宽度，不灵活。

2. flex布局

教程：css-tricks.com/snippets/cs…

• flex的container和items

• flex container的样式：

1. 让一个元素变成flex容器

2. 改变items流动方向（主轴）

3. 改变折行

4. 主轴对齐方式

4. 次轴对齐

5. 多行内容（很少用到）

• flex item的属性

1. order：控制item在容器中出现的顺序。

2. flex-grow：这定义了item在必要时增长的能力。它接受作为比例的无单位值。它决定了item在伸缩容器内部占用的可用空间量。

3. flex-shrink：这定义了item在必要时收缩的能力。
4. flex-basis：控制基准宽度。
5. align-self:这允许为单个item覆盖默认对齐方式（或由align-items指定的对齐方式）。

可以通过flex青蛙游戏来练习flex的用法：flexboxfroggy.com/#zh-cn

• grid布局

教程：css-tricks.com/snippets/cs…

二维布局用Grid。

可以通过一个小游戏练习grid的用法：Grid Garden cssgridgarden.com/#zh-cn