CSS3盒模型圣杯(两边固定中间内容自适应)三种布局方案
2020-04-16 本文已影响0人
鱼香肉丝没有渔
圣杯布局第一种方案:
效果图
image.png
css样式:
<style>
.box {
width: 100%;
height: 600px;
position: relative;
/*在父盒子上增加外边距就使用box-sizing: border-box属性*/
box-sizing: border-box;
/* 自己向内挤的200像素区域 */
padding: 0 200px;
}
.box .left {
width: 200px;
height: 600px;
position: absolute;
top: 0;
left: 0;
background-color: red;
line-height: 600px;
}
.box .mid {
/* 父盒子多宽中间盒子就多宽 */
width: 100%;
height: 600px;
background-color: yellow;
line-height: 600px;
text-align: center;
}
.box .right {
width: 200px;
height: 600px;
position: absolute;
top: 0;
right: 0;
background-color: red;
line-height: 600px;
}
</style>
html结构:
<body>
<div class="box">
<div class="left">左边盒子固定</div>
<div class="mid">中间内容自适应</div>
<div class="right">右边盒子固定</div>
</div>
</body>
圣杯布局第二种方案:
效果图
image.png
css样式
<style>
.box {
width: 100%;
height: 600px;
position: relative;
}
.left {
width: 100px;
height: 600px;
background-color: skyblue;
position: absolute;
top: 0;
left: 0;
line-height: 600px;
}
.mid {
/* 默认宽度100% */
/* 如果宽度不是通过width设置来，显示有宽度，设置左右margin值，向内挤； */
margin: 0 100px;
height: 600px;
background-color: orange;
line-height: 600px;
text-align: center;
}
.right {
width: 100px;
height: 600px;
background-color: skyblue;
position: absolute;
top: 0;
right: 0;
line-height: 600px;
}
</style>
html结构
<body>
<div class="box">
<div class="left">左边盒子固定</div>
<div class="mid">中间内容自适应</div>
<div class="right">右边盒子固定</div>
</div>
</body>
圣杯布局第三种方案:
效果图
image.png
css样式
<style>
.box {
width:100%;
height: 600px;
display: flex;
}
.left {
width: 200px;
height: 200px;
background-color: red;
text-align: center;
line-height: 200px;
}
.mid {
/*使用flex方法把中间的剩余空间占据*/
flex: 1;
height: 200px;
background-color: skyblue;
text-align: center;
line-height: 200px;
}
.right {
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
line-height: 200px;
}
</style>
html结构
<body>
<div class="box">
<div class="left">左边固定</div>
<div class="mid">
圣杯布局第三种方案
中间自适应
</div>
<div class="right">右边固定</div>
</div>
</body>
