- 实现一种三栏布局，中间⼀栏最先渲染
- 实现两边宽度固定，中间⾃适应
1.圣杯布局
1.中间自适应设为100%，两边定宽
<body>
<div class="header">header</div>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">footer</div>
<style>
.header{
width: 100%;
background-color: gray;
height: 100px;
}
.footer{
width: 100%;
background-color: gray;
height: 100px;
}
.main{
width: 100%;
height: 300px;
background-color: aqua;
}
.left{
width: 200px;
height: 300px;
background-color: blue;
}
.right{
width: 200px;
height: 300px;
background-color: bisque;
}
</style>
</body>
2.这个时候两边被挤下去了，这时候给中间三个添加浮动让他们到同一行
问题出现：浮动导致高度塌陷footer会跑到上面去
这时候添加overflow:hidden形成BFC撑开区域 或者 设置.footer { clear: both; }清除浮动
3.给container添加padding给left和right留出位置
<style>
.header{
width: 100%;
background-color: gray;
height: 100px;
}
.footer{
width: 100%;
background-color: gray;
height: 100px;
}
.main{
width: 100%;
height: 300px;
background-color: aqua;
}
.left{
width: 200px;
height: 300px;
background-color: blue;
}
.right{
width: 200px;
height: 300px;
background-color: bisque;
}
.float{
float: left;
}
.container{
overflow: hidden;
padding: 0 200px;
}
</style>
4.相对定位把左盒子弄上去+右边盒子偏移
.header{
width: 100%;
background-color: gray;
height: 100px;
}
.footer{
width: 100%;
background-color: gray;
height: 100px;
}
.main{
width: 100%;
height: 300px;
background-color: aqua;
}
.left{
width: 200px;
height: 300px;
background-color: blue;
/* 相对定位 */
position: relative;
/* 向左偏移-100%整到上行 */
margin-left: -100%;
/* 再偏移一个自身宽度 */
right: 200px;
}
.right{
width: 200px;
height: 300px;
background-color: bisque;
/* 偏移 */
margin-right: -200px;
}
.float{
float: left;
}
.container{
overflow: hidden;
padding: 0 200px;
}
2.双飞翼布局
1.直接设置left的margin-left:-100%和right的margin-left:-200px
问题：中间的内容被盖住了
给中间的套个div然后加padding即可
<body>
<div class="header">header</div>
<div class="main float">
<div class="mid">middle</div>
</div>
<div class="left float"></div>
<div class="right float"></div>
<div class="footer">footer</div>
<style>
.header {
width: 100%;
background-color: gray;
height: 100px;
}
.footer {
width: 100%;
background-color: gray;
height: 100px;
clear: both;
}
.main {
width: 100%;
height: 300px;
background-color: aqua;
}
.left {
width: 200px;
height: 300px;
background-color: blue;
/* 偏移 */
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: bisque;
/* 偏移 */
margin-left: -200px;
}
.float {
float: left;
}
.main .mid{
padding: 0 200px;
}
</style>
</body>
3.总结
圣杯
- 总的container的html包含三个(main,left,right)
- 使用相对定位
- 使用padding预留左右位置
- 左侧处理：
position:relative+margin-left:-100% - 右侧处理：
margin-right:-宽度
双翼
- 包含一个(main)
- 不使用定位
- 使用padding预留左右位置
- 左侧处理：
margin-left:-100% - 右侧处理：
margin-left:-宽度
