布局"/>
布局
圣杯布局:(两边定宽,中间自适应):
-
第一种: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>
更多推荐
布局
发布评论