基础知识常被4：圣杯布局
实现效果：（两边固定，中间随浏览器的大小变化而变化）方法1：（利用float布局）方法2：（利用flex布局）
昨天工作比较忙，没有及时更新文档，趁着深夜发出来。所谓为什么叫圣杯布局，我的感觉可能是做出来的效果很像圣杯大概吧！
实现效果：（两边固定，中间随浏览器的大小变化而变化）
html：公用部分
<div class="box1">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="box2">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="box3">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
方法1：（利用float布局）
.box1 {
//父元素相对定位
position: relative
;
padding: 0 200px
;
}
.box1 .left {
//子元素相对定位
position: absolute
;
top: 0
;
left: 0
;
//左面的盒子左浮动
float: left
;
height: 200px
;
width: 200px
;
background-color: pink
;
}
.box1 .right {
position: absolute
;
top: 0
;
right: 0
;
//右面的盒子右浮动
float: right
;
height: 200px
;
width: 200px
;
background-color: hotpink
;
}
.box1 .center {
//中间盒子自适应100%
width: 100%
;
height: 200px
;
background-color: yellow
;
}
方法2：（利用flex布局）
.box2 {
display: flex
;
margin-top: 100px
;
}
.box2 .left {
height: 200px
;
width: 200px
;
background-color: pink
;
}
.box2 .right {
height: 200px
;
width: 200px
;
background-color: hotpink
;
}
.box2 .center {
//利用flex布局中间 flex1
flex: 1
;
width: 100%
;
height: 200px
;
background-color: yellow
;
}
.box3 {
position: relative
;
margin-top: 100px
;
}
.box3 .left {
position: absolute
;
top: 0
;
left: 0
;
height: 200px
;
width: 200px
;
background-color: pink
;
}
.box3 .right {
position: absolute
;
top: 0
;
right: 0
;
height: 200px
;
width: 200px
;
background-color: hotpink
;
}
.box3 .center {
margin: 0 200px
;
//在这里要说明一下，档width不设置的时候，
//margin左右设置正值会默认向内的效果
height: 200px
;
background-color: yellow
;
}
未完待续，有更好的方法我会及时更新的，欢迎大家前来评论
