一、圣杯布局
<!DOCTYPE html> <html> <head> <title>中间自适应</title> <style type="text/css"> .container{ padding: 0 220px 0 200px; background:#ddd; } .container div{ position: relative; float: left; } .box2{ width: 100%; background:blue; } .box1{ width: 200px; margin-left: -100%; left: -200px; background-color: #999; } .box3{ width: 220px; margin-right: -220px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="box2"> 透视点距离元④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为 </div> <div class="box1">④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素 </div> <div class="box3">④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素④perspective 透视点 => 即透视点距离元素的z轴的距离 => 他如果作为属性，则是设置舞台元素（即设置在要转换元素的父级元素上）；如果作为transform的属性值,则设置的是当前元素 </div> </div> </body> </html>
二、calc计算属性实现中间自适应，两边固定宽度
<!DOCTYPE html> <html> <head> <title>calc</title> <style type="text/css"> .contaienr{ background-color: #f0f0f0; overflow: hidden; } .contaienr div{ position: relative; float: left; } .inner{ width: calc(100% - 700px); background-color: #ddd; } .left{ width: 400px; background-color: #999; } .right{ width: 300px; background-color: #ccc; } </style> </head> <body> <div class="contaienr"> <div class="left"> 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） </div> <div class="inner"> 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） </div> <div class="right"> 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） </div> </div> </body> </html>
三、flex弹性盒子实现中固两边自适应
<!DOCTYPE html> <html> <head> <title>圣杯</title> <style type="text/css"> .contaienr{ background-color: #f0f0f0; display: flex; } .inner{ width: 100%; background-color: #ddd; } .left{ width: 400px; flex-shrink:0; background-color: #999; } .right{ width: 300px; background-color: #ccc; flex-shrink:0; } </style> </head> <body> <div class="contaienr"> <div class="left"> 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） </div> <div class="inner"> 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） </div> <div class="right"> 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧） </div> </div> </body> </html>
四、双飞翼布局。
省略，见其他博客
五、参考
https://www.cnblogs.com/imwtr/p/4441741.html