前言:今天总结一下经典的流式布局的几种实现方法,方便以后查看.
流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一。
流式布局的特征:
- 宽度自适应,高度写死,并不是百分百还原设计图。
- 图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。
- 一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。
经典的流式布局结构:
- 左侧固定,右侧自适应
- 右侧固定,左侧自适应
- 两侧固定,中间自适应(圣杯布局,双飞翼布局)
- 等分布局
左侧固定右侧自适应的三种实现方法:
1.利用bfc块级格式化上下文, 实现左侧固定右侧自适应
(1) 让左边的盒子 float: left;
(2) 让右边的盒子 overflow: hidden;
具体css代码
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 400px;
background-color: pink;
}
.left {
height: 300px;
width: 200px;
background-color: orange;
float: left;
}
.right {
height: 350px;
background-color: blue;
/* 触发了bfc的盒子, 不与浮动的元素重叠 */
overflow: hidden;
}
</style>
html结构
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
2.利用定位实现左侧固定右侧自适应
(1) 给父盒子设置padding-left 值
(2) 给左侧子盒子设置width = padding-left ,并定位到父盒子的padding-left上.
(3) 右侧盒子自适应
具体css代码
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 400px;
background-color: pink;
position: relative;
padding-left: 200px;
}
.left {
height: 300px;
width: 200px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
.right {
height: 350px;
background-color: blue;
}
</style>
html结构
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
3.利用flex布局 实现左侧固定右侧自适应
(1) 给父盒子设置display:flex ;
(2) 左侧盒子设置固定宽高 ,右侧盒子设置flex:1 ;
具体css代码
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 400px;
background-color: pink;
display: flex;
}
.left {
height: 300px;
width: 200px;
background-color: orange;
}
.right {
flex: 1;
height: 350px;
background-color: blue;
}
</style>
html结构
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
扩展
BFC 块级格式化上下文
Block Formatting Context: 页面上一个隔离的独立渲染区域
触发成为 BFC 盒子的特点:
- 触发了 BFC 的盒子, 就成为了页面上的一个隔离的独立容器, 容器里面的子元素不会在布局上影响到外面的元素
应用: 解决塌陷问题, 清除浮动 - 触发了BFC的普通盒子, 不会与浮动元素重叠
应用: 圣杯布局, 左侧固定右侧自适应
如何触发 BFC
- float: left; float: right;
- overflow的值不为visible。
- display的值为inline-block、table-cell、table-caption
- position的值absolute, fixed