经典圣杯双飞翼布局
1.经典的双飞翼布局，两边的盒子宽度固定，中间的内容宽度自适应，在某宝某东等一些电商平台比较常见，里面利用了margin的负边距来布局，这样使三个盒子在同一行显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ outline: none; padding: 0; margin: 0; color: #fff; } .header { height: 40px; width: 100%; background-color: #a01321; } .container{ height: 400px; margin: 0 200px; } .left{ width: 200px; height: 400px; background-color: green; float: left; margin-left: -100%; position: relative; left: -200px; } .center{ float: left; height: 400px; width: 100%; background-color: red; } .right{ width: 200px; height: 400px; background-color: blue; float: left; margin-left: -200px; position: relative; right: -200px; } .footer{ height: 40px; background-color: black; } </style> </head> <body> <header class="header"><h4>jfkdslajkfk.s</h4></header> <div class="container" > <div class="center">2、文件可能已经被加载过并保存有缓存 一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度 3、高效率 你的网站做的再NB也不会NB过百度NB过Google吧？一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率。 4、分布式的数据中心 假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。 5、使用情况分析 一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。 6、有效防止网站被攻击 一般情况下CDNs提供商也是会提供网站安全服务的 </div> <div class="left">left</div> <div class="right">right</div> </div> <footer class="footer">header</footer> </body> <script type="text/javascript"> </script> </html>
