在常规的项目开发中,很多时候不使用响应式框架的前提下,都需要开发人员手动实现自适应,这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套,以及CSS样式的使用,就能实现简单的自适应布局。
常见的实现方式有2种:
- 使用简单的盒子模型的特性, 子盒子使用{ width:百分比; }实现比例缩放。
- 使用CSS的属性{ display:flex; },注意要定义在父盒子上,子盒子使用{ flex:数字; }实现比例。
举个例子: 现在需要实现如图1-1所示的自适应布局
- 父盒子中有两个子盒子
- 两个盒子的宽度比是2:1
- 支持响应式缩放
1.使用盒子模型实现
首先实现页面的结构,父盒子中嵌套两个子盒子。然后所有div设置高度以便观察效果,根据要求的比例,计算两个盒子的百分比,子盒子设置不同的背景颜色。最后使用float属性,让两个子盒子处于一行。盒子模型的缺点是需要进行计算盒子的百分比,而且数值不会很精确(如果是大量的计算工作,开发效率会很低下)。
页面结构
<div class="big">
<div class="one"></div>
<div class="two"></div>
</div>
页面样式
div{
height:100px;
}
.big{
border:1px solid yellow;
}
.one{
width:66.666%;
background-color: red;
float:left;
}
.two{
width:33.333%;
background-color: blue;
float:left;
}
2.使用弹性盒子实现
不需要修改上面的页面结构,现在只需要将父盒子定义为{ display:flex; }弹性盒子,在子盒子中使用{ flex:数字; }定义各自的宽度比例即可,弹性盒子的优点是不需要进行计算盒子的百分比。
页面样式
div{
height:100px;
}
.big{
display:flex;
border:1px solid yellow;
}
.one{
flex:2;
background-color: red;
float:left;
}
.two{
flex:1;
background-color: blue;
float:left;
}
弹性盒子的实现方式明显优于盒子模型,不需要计算百分比,结果也更加精准。