布局

布局"/>

布局

圣杯布局:(两边定宽,中间自适应):

• 第一种：flex实现圣杯布局

 .w200 { /* 左右定宽 */width: 100px;height: 500px;background-color: green;}.parent {display: flex;/* flex-direction: row; */width: 100%;}.center {/* width: -webkit-calc(100% - 200px); */  // 使用calc函数也可以实现自适应剩余空间flex: 1;height: 500px;background-color: #1637ce;}<div class="parent"><div class=" w200">左边</div><div class="center">中间</div><div class=" w200">右边</div></div>

• 第二种：flex实现的方式：加载顺序不同，这种中间部分优先加载呢

实现的代码：

 * {box-sizing: content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */margin: 0;padding: 0;}body {display: flex;flex-direction: column;/* 头、中部、脚纵向显示 */}header,footer {flex: 0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */background: #3f3f3f;}.main {display: flex;flex: 1;/*flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)  分配多余空间之前项目占据的主轴空间(flex-basis)flex:1指的是：中部区域自由伸缩auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。*/}.content {flex: 1;background: red;height: 1000px;/*横向中间内容区自适应，即使未指定宽度，但会分配宽度块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。*/}.left,.right {height: 800px;background: blue;width: 200px;}.left {order: -1;   /*关键的一句，是和第一种圣杯布局不同的地方*//* 让left居于左侧 */}<header></header><div class="main"><div class="content"></div>  <!--  //可保证中间元素最先加载 --><div class="left"></div><div class="right"></div></div><footer></footer>

• 第三种：使用最原始的margin + float + padding 实现；

     .container {padding: 0 200px;height: 200px;background-color: red;}.main {float: left;width: 100%;height: 100%;background-color: blue;}.left,.right {float: left;width: 200px;height: 200px;background-color: green;}.left {position: relative;margin-left: -100%;left: -200px}.right {position: relative;right: -200px;margin-left: -200px}<div class="container"><div class="main">中间栏</div><div class="left">左边栏</div><div class="right">右边栏</div></div>

双飞翼布局：

由来：最早是淘宝团队提出来的，是为了解决圣杯布局中开启定位的问题；它是圣杯布局的优化解决方案!

它只是在圣杯布局（个人总结中的第三种布局的基础上改动的一部分，即中心盒子加了一个小盒子，来解决覆盖的部分，同时定位属性也可以完全移除，）

•  淘宝官方的解决方案。（在main盒子里加一个盒子，来设置左右margin,效果是不用在设置定位属性，会更好~）

 .container {height: 200px;background-color: red;}.main {float: left;width: 100%;height: 100%;background-color: blue;}.main .inner{margin-right:200px;margin-left:200px;  }.left,.right {float: left;width: 200px;height: 200px;background-color: green;}.left {margin-left: -100%;}.right {margin-left: -200px}<div class="container"><div class="main"><div class="inner"></div></div><div class="left">左边栏</div><div class="right">右边栏</div></div>