映入眼帘的便是一个常见的三栏布局：即左边商品导航和右边导航固定宽度，中间的紧张内容随浏览器宽度自适应。下面环绕的这样的目的，即旁边模块固定宽度，中间模块随浏览器变革自适应，想要完成的终极效果如下图所示：
赤色和蓝色宽度固定，绿色宽度自适应，下面七种方法实现的终极效果跟这个差不多，可能会稍有不同。
1. 流体布局
旁边模块各自向旁边浮动，并设置中间模块的 margin 值使中间模块宽度自适应。
缺陷便是紧张内容无法最先加载，当页面内容较多时会影响用户体验。
2. BFC 三栏布局
BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。
缺陷跟方法一类似，紧张内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为理解决这个问题，有了下面要先容的布局方案双飞翼布局。
3. 圣杯布局
干系阐明如下：
(1)中间部分须要根据浏览器宽度的变革而变革，以是要用100%，这里设左中右向左浮动，由于中间100%，左层和右层根本没有位置上去
(2)把左层margin负100后，创造left上去了，由于负到出窗口没位置了，只能往上挪
(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把旁边栏定位
(4)但由于旁边栏隐瞒住了中间部分，于是采取相对定位方法，各自相对付自己把自己挪出去，得到终极结果
跟双飞翼布局很像，有一些细节上的差异，相对付双飞翼布局来说，HTML 构造相对大略，但是样式定义就轻微繁芜，也是优先加载内容主体。
4. 双飞翼布局
圣杯布局实际看起来是繁芜的后期掩护性也不是很高，在淘宝UED的磋商下，出来了一种新的布局办法便是双飞翼布局，代码如上。增加多一个div就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。利用的是浮动元素 margin 负值的运用，感兴趣的同学可以上网搜搜事理。
主体内容可以优先加载，HTML 代码构造轻微繁芜点。
5. Flex 布局
大略实用，未来的趋势，须要考虑浏览器的兼容性
6. Table 布局
缺陷：无法设置栏间距
7. 绝对定位布局
利用absolute定位，只需将旁边两栏绝对定位到窗口两边，为main添加旁边margin创建安全输入区域即可。由于absolute因此第一个定位不是static的父元素定位的，为这个整体添加一个定位不是static的父元素，绝对定位不会与header，footer等重叠。并且main的dom位置在left和right的前面，可在旁边两栏之前完成加载
大略实用，并且紧张内容可以优先加载。
本周回顾前端要知道的网络知识一：TCP/IP 协议到底在讲什么
前端要知道的网络知识二：TCP协议的三次握手和四次分离
前端要知道的网络知识三：认识OSI七层模型
前端要知道的网络知识四：TCP的观点和HTTP连接管理
前端要知道的网络知识五：详细的先容web缓存
前端要知道的网络知识六：详细先容URL及其用法
前端要知道的网络知识七：初识HTTP报文
前端要知道的网络知识八：GET 和 POST 到底有什么差异
前端要知道的网络知识九：初识HTTPS加密过程，原来如此
前端要知道的网络知识十：HTTPS加密核心RSA算法
....
参考文章
https://www.cnblogs.com/chenyablog/p/7918807.html
https://zhuanlan.zhihu.com/p/24305930
https://zhuanlan.zhihu.com/p/25070186
