前端自适应布局方法总结

点击上方蓝色字体【学习web前端】可【快速关注

640?wx_fmt=jpeg

【讲座】大咖说-前端大型免费公开讲座

【福利】2018自学者的web前端系统学习福利

【教程】精品教程在这里


一栏固定一栏自适应

640?wx_fmt=jpeg

实现代码:

640?wx_fmt=jpeg

右两栏固定,中间自适应

640?wx_fmt=jpeg

方法一 :使用float浮动

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。

640?wx_fmt=jpeg

方法二:使用绝对定位

绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。

640?wx_fmt=jpeg

方法三:使用负margin(圣杯布局)

圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。

640?wx_fmt=jpeg

方法四:使用flex(css3新特性)

640?wx_fmt=jpeg

640?wx_fmt=jpeg

声明 | 文章著作权归作者所有,如有侵权,请联系小编删除。


如果大家对特效或者小游戏开发学习感兴趣的话,可以加入小编学习交流QQ群(462411750),点击【阅读原文】即可加入.每晚8点我都会在公开讲座上免费为大家分享一些特效及小游戏开发案例。带你从零开始,学习制作特效或小游戏。让我们相互陪伴,共同成长!

640?wx_fmt=gif猜你喜欢的文章

老司机程序员用到的各种网站整理

► 程序员2万工资很高?金融从业者工资曝光,网友感慨程序员被秒杀

► 程序员那些牛逼闪闪的禁术,看到第二条我就忍不住哈哈哈哈哈哈哈哈

► 【代码收藏】爬取妹子签名和日志并邮件发送

► 浅谈canvas绘画王者荣耀-雷达图

640?wx_fmt=gif 640?wx_fmt=jpeg 640?wx_fmt=gif 640?wx_fmt=gif 点击“阅读原文”即可加入免费学习做游戏/项目。


猜你喜欢

转载自blog.csdn.net/bg70pvnybv1/article/details/80850906