<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>堆代码 duidaima.com</title> <style> *{ margin: 0; padding: 0; } div{ height: 100px; } .container{ display: flex; } .left,.right{ width: 200px; background: #66a4bd; } .middle{ flex: 1; background: gray; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> </body> </html>
这个方法看起来是不是很简单,没错它真的非常简单,都不需要动脑子,简简单单两行代码就能搞定。but!它存在一个问题,这个方法是先加载左边容器的,中间容器加载。不知道大家在上网的时候有没有发现过,有些页面左右两边的都是广告,重要内容都在中间,那么当我们如果使用这个方法来布局的时候,最先出来的是广告,那你愿意吗?我们肯定是想先看到中间的主要内容,两边广告什么时候出现谁在意呢?
所以为了优化这个问题,就出现了经典的 圣杯 和 双飞翼 布局,它们的目的就是为了在HTML结构上,中间栏在最前面保证了最先渲染中间提升性能。
圣杯布局
既然要保证中间栏最先加载,那就要把middle容器写在前面<body> <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> </body>css样式还是先给左右容器宽度200px,高度都一样,给个背景色便于区分:
.left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; //向左挪动父容器宽度的100% left: -200px; //再向左挪动自身的200宽度 }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>堆代码 duidaima.com</title> <style> *{ margin: 0; padding: 0; } .container{ height: 100px; padding: 0 200px; } .middle, .left, .right{ height: 100%; float: left; } .middle{ width: 100%; background: gray; } .left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; left: -200px; } .right{ width: 200px; background: #76d1ea; position: relative; margin-right: -200px; } </style> </head> <body> <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
不过这样布局有一个问题就是:有一个最小宽度,当页面小于最小宽度时布局就会乱掉。 “由于设置了相对定位,所以当left原来的位置和right的位置产生重叠时,由于浮动的原因一行放不下就会换行” 。所以布局就被打乱了,使用双飞翼布局就可以避免这个问题。
<body> <div class="container"> <div class="middle"> <div class="inner">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body>因为已经设置了middle的width:100%,这时候我们只需要设置inner容器为padding:0 200px,我们要的效果同样是把左右两个容器摆放到对应的红框位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>堆代码 duidaima.com</title> <style> *{ margin: 0; padding: 0; } .container{ height: 100px; } .middle, .left, .right{ float: left; height: 100%; } .middle{ width: 100%; background: gray; } .inner{ height: 100%; padding: 0 200px; } .left{ width: 200px; background: pink; margin-left: -100%; } .right{ width: 200px; background: pink; margin-left: -200px; } </style> </head> <body> <div class="container"> <div class="middle"> <div class="inner">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>给个图便于大家理解
相同之处 :让三列浮动,然后通过负外边距形成三列布局