圣杯布局
圣杯布局要求
- ● header和footer各自占领屏幕所有宽度，高度固定。
- ● 中间的container是一个三栏布局。
- ● 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
- ● 中间部分的高度是三栏中最高的区域的高度。
1、浮动
- ● 先定义好header和footer的样式，使之横向撑满。
- ●在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
- ●三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
●这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
● 接下来设置left的 margin-left:-100%;，让left回到上一行最左侧 ● 但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
●这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
●同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
●这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。
<title>圣杯布局 定位浮动</title>
<style>
body {
min-width: 550px;
/* 2x leftObj width + rightObj width */
font-size: 20px;
font-weight: bold
}
#hd,
#ft {
height: 60px;
background-color: rgba(29, 27, 27, 0.725);
text-align: center;
line-height: 60px;
}
#ft {
clear: both; /* 清楚两边浮动 */
}
#sec {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
#sec>.box {
position: relative;
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
.centerObj {
width: 100%;
background-color: rgb(206, 201, 201);
}
.leftObj {
margin-left: -100%;
width: 200px;
/* leftObj width */
right: 200px;
/* leftObj width */
background-color: rgba(95, 179, 235, 0.972);
}
.rightObj {
width: 150px;
/* rightObj width */
margin-left: -150px;
/* rightObj width */
right: -150px;
background-color: yellow;
}
</style>
</head>
<body>
<header id="hd">头部区域</header>
<section id="sec">
<div class="centerObj box">我是中间的</div>
<div class="leftObj box">我是左边的</div>
<div class="rightObj box">我是右边的</div>
</section>
<footer id="ft">底部区域</footer>
</body>
2、弹性盒子
- ● header和footer设置样式，横向撑满。
- ● container中的left、center、right依次排布即可
- ● 给container设置弹性布局 display: flex;
- ● left和right区域定宽，center设置 flex: 1; 即可
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。
flex：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
<title>圣杯布局 弹性盒子</title>
<style>
*{
margin: 0 auto;
}
.box{
width: 100%;
}
header,footer{
width: 100%;
height: 50px;
background-color: greenyellow;
text-align: center;
font-size: 40px;
font-weight: 700;
}
.content{
width: 100%;
background-color: aqua;
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 300px;
display: flex;
}
.left{
width: 150px;
background-color: red;
height: 300px;
float: left;
}
.right{
width: 200px;
height: 300px;
background-color: gray;
}
.center{
/* 扩张因子 flex:1 ==> flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写 */
flex: 1;
background-color: orange;
height: 300px;
}
</style>
</head>
<body>
<div class="box">
<header class="upObj">上</header>
<section class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</section>
<footer class="downObj">下</footer>
</div>
</body>
3、calc布局
calc（100% - 两边子盒子宽度和
让content盒子清楚浮动overflow：hidden，里面的三个子盒子左浮动；
然后给center盒子的width设置为 ：calc（100% - 左右盒子的宽）
<title>圣杯布局 calc</title>
<style>
*{
margin: 0 auto;
}
.box{
width: 100%;
min-width: 550px
}
header,footer{
width: 100%;
height: 50px;
background-color: greenyellow;
text-align: center;
font-size: 40px;
font-weight: 700;
}
.content{
width: 100%;
overflow: hidden;
background-color: aqua;
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 300px;
}
.left{
width: 200px;
background-color: red;
height: 300px;
float: left;
}
.right{
width: 200px;
background-color: gray;
height: 300px;
float: left;
}
.center{
/* calc（100% - 两边子盒子宽度和） */
width: calc(100% - 200px - 200px);
background-color: orange;
height: 300px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<header class="upObj">上</header>
<section class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</section>
<footer class="downObj">下</footer>
</div>
</body>
4、grid布局
- ● 给header元素设置grid-row: 1; 和 grid-column: 1/5;意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束
- ● 给footer元素设置grid-row: 1; 和 grid-column: 1/5;意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束
- ● 给left元素设置grid-row: 2; 和 grid-column: 1/2;意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束
- ● 给center元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束
- ●给right元素设置grid-row: 2; 和 grid-column:4/5;意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束
<title>圣杯布局 grid布局</title>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
display: grid;
}
#hd,
#ft {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#hd {
grid-row: 1;
grid-column: 1/5;
}
#ft {
grid-row: 3;
grid-column: 1/5;
}
.box {
text-align: center;
height: 300px;
line-height: 300px;
}
.leftObj {
grid-row: 2;
grid-column: 1/2;
background: rgba(95, 179, 235, 0.972);
}
.centerObj {
grid-row: 2;
grid-column: 2/4;
background: rgb(206, 201, 201);
}
.rightObj {
grid-row: 2;
grid-column: 4/5;
background: rgb(231, 105, 2);
}
</style>
<body>
<header id="hd">头部区域</header>
<div class="leftObj box">我是左边的</div>
<div class="centerObj box">我是中间的</div>
<div class="rightObj box">我是右边的</div>
<footer id="ft">底部区域</footer>
</body>
