千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:大连千锋IT培训  >  技术干货  >  没有弹性盒,如何玩转移动端?

没有弹性盒,如何玩转移动端?

来源:千锋教育
发布人:bjq
时间: 2023-02-13 15:38:00

  一说到移动端布局,大部分同学会想到用rem,不错rem确实可以解决各种问题,哪怕宽度你都写固定值都没有问题,但是宽度的适配使用大量的数值,是不是算起来有点头疼呢?还有一部分同学会大面积使用弹性盒,宽度的适配用弹性盒真的是太香了,可是弹性盒它并不能兼容所有的设备,那没有弹性盒是不是就没有办法了呢?其实并不是的,我这里提供几个常用布局方式,就算是没有弹性盒,也可以轻松玩转移动端!

  1、上下固定,中间弹性

  

 

  上下固定中间弹性的布局在移动端随处可见,因为手机端大多数都会存在上下两个导航栏。用弹性盒的方法我在此就不多说了,我们看看使用定位的方式如何进行布局?我们可以把头部和脚部的板块都固定定位在内容区的内边距上面,因为固定定位不占位,所以内容区占满了整个屏幕。这里需要注意的是,头部和脚部一定记得给宽度,因为固定定位的盒子宽度是自适应内容状态,如果没有内容他就是零了。

  2、左固定,右弹性

  左固定右弹性在移动端展示内容部分也会经常遇到,如下图均是。我们可以使用浮动或者定位来实现:

  

 

  浮动:

  左边固定只需要把固定宽度写好就好,右边弹性宽度一定不要写,然后加上溢出隐藏,利用BFC的原理可以实现弹性效果,而且不被左边的盒子覆盖,简直不要太完美。

  定位:

  利用定位的方式也是不错的可以把左边定位到右边的内边距上面,

  右边的盒子可以不写宽度,添加左内边距,

  如果右边的盒子书写宽度百分百,那你一定要记得转换怪异盒模型。

  3、左右固定,中间弹性

  左右固定中间弹性的布局方式,一般会在头部使用的比较多一点。

  

 

  浮动:

  左右固定,如果选用浮动的方法,一定要注意html结构的书写顺序,需要先写左右,后写中间,如果把中间写在了右的前面,那你右面的盒子就浮不上去了,因为中间的盒子还在标准流里,他是独占一行的,所以一定要记得把右放在前面。

  定位:

  用定位的方法实现左右固定,中间弹性就比较简单了,思路是一样的,把他俩分别定位到中间盒子的左右内边距上面就可以了,记得添加坐标哦,不然他们会脱标留原位的!

  怎么样?是不是经过我的讲解有一种恍然大明白的感觉!那还不赶快用这个方法去自己试一试!

 

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

什么是Java循环?

2023-03-30

switch语句的case和default有顺序吗?

2023-03-30

SpringBoot中使用redis 新手入门

2023-03-29

最新文章NEW

10分钟学会阿里OSS对象存储

2023-03-07

没有弹性盒,如何玩转移动端?

2023-02-13

浮动布局详解

2023-02-10

相关推荐HOT

更多>>