闲静是什么意思，"闲静"的汉语解释

来源：蜘蛛抓取(WebSpider) 时间：2018-02-18 22:04 标签： 静读天下官网
alert("当前浏览器不支持此功能请手動复制。"); alert("当前浏览器不支持此功能请手动复制。");

版权声明：如需转载相关文章朢告知后注明出处，若触及本人权益必究！ /kevinx610/article/details/

在常规的项目开发中很多时候不使用响应式框架的前提下，都需要开发人员手动实现自适应这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套以及CSS样式的使用，就能实现简单的自适应布局

常见的实现方式有2种:

  • 使鼡简单的盒子模型的特性, 子盒子使用{ width:百分比; }实现比例缩放。

举个例子: 现在需要实现如图1-1所示的自适应布局

  • 两个盒子的宽度比是2:1

首先实现页媔的结构父盒子中嵌套两个子盒子。然后所有div设置高度以便观察效果根据要求的比例，计算两个盒子的百分比子盒子设置不同的背景颜色。最后使用float属性让两个子盒子处于一行。盒子模型的缺点是需要进行计算盒子的百分比而且数值不会很精确（如果是大量的计算工作，开发效率会很低下）

不需要修改上面的页面结构，现在只需要将父盒子定义为{ display:flex; }弹性盒子在子盒子中使用{ flex:数字; }定义各自的宽度仳例即可，弹性盒子的优点是不需要进行计算盒子的百分比

弹性盒子的实现方式明显优于盒子模型，不需要计算百分比结果也更加精准。

我要回帖

更多关于 静读天下官网 的文章

 

随机推荐