圣杯布局:(两边定宽,中间自适应):
-
第一种: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>
- 第二种:个人根据官方的双飞翼布局改动的,解决布局相同哦(关键点在container中的padding)
.container {
padding: 0 200px; // 第一种,直接父盒子加padding;
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>