首先谈谈三栏布局
-
三栏布局长什么样子？
三栏布局是左右两侧浮动，而中间宽度自适应不浮动做出的效果。
三栏布局 三栏布局的HTML
-
如果我想页面的main主要内容优先加载呢？效果如下图：
产生这种效果的原因是先加载main，而main是块级元素占据一整行，导致后面加载的两侧侧边栏被挤到了下行。
布局错乱
我们选择了圣杯布局
为什么要使用圣杯布局？
为了网页的优化，主要内容需要优先加载，说白了就是为了解决三栏布局的main优先加载的问题，让网页在main优先加载的同时还保持普通三栏布局的样式；圣杯布局的制作步骤
1.写下HTML代码，规定main、aside、ad的区域，并添加如下样式
2.使三个区域都处于左浮动状态，并使main的宽度成父容器的100%；
3.为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的aside的margin-left为-100%，而右边的ad的margin-left则为负的其自身的宽度。（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）
4.为class="ct"的主容器设置左右margin值，使其为以后的侧边栏定位空出位置，margin的值为侧边栏的宽。
5.对ad和aside添加position:relative，然后对它们进行定位，移动到两侧，我们的圣杯布局就初步做完了，但是还有问题：
- 圣杯布局留下的问题
1.当我把整个页面的宽度收缩后，会出现布局错乱的效果：
2.产生这个问题的原因
当页面收缩时，main因为是其父容器ct的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度<aside的宽度，就不能容纳aside，所以将其挤到了下一行，ad同理。
3.解决方案
可以给父容器ct加上一个min-width样式，min-width的值不能小于ad和aside两者间的宽度最大值，这样做可以使中间的main的宽度始终比ad和aside大，就不会导致布局错乱了。
- 圣杯布局代码一览
双飞翼布局比圣杯布局更好？
为什么选择双飞翼布局？
因为双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。双飞翼布局的制作
1.首先圣杯布局的步骤到了这一步：
2.给main里面添加一个内容标签content，并且设置它的左右margin值为左右侧边栏的宽度：
3.去掉main的背景色和高度，双飞翼布局就做成了
双飞翼布局和圣杯布局的对比
- 优点：
1.双飞翼布局完美解决了圣杯布局的布局错乱问题；
2.双飞翼布局CSS代码逻辑更简单； - 缺点：
添加了无意义的标签； - 实际应用：
个人更偏向于使用双飞翼布局，但也会根据具体的需求进行使用；
