全国热线

400-080-3312

全国监督投诉热线:9:00-23:00

前端开发基础:网页布局方法你知多少

这段时间,有很多小伙伴都紫爱文前端开发布局的方法有哪些?不知如何布局,今天南京学码思web培训机构就为大家分享一下关于前端开发布局的方法,前端开发有两种布局分别为多列布局还有居中布局,现在我们就一起来他们的详

  这段时间,有很多小伙伴都紫爱文前端开发布局的方法有哪些?不知如何布局,今天南京学码思web培训机构就为大家分享一下关于前端开发布局的方法,前端开发有两种布局分别为多列布局还有居中布局,现在我们就一起来他们的详细布局方案!


  居中布局


  HTML代码

1.jpg

  水平居中


  在水平居中里,可以用5种布局方案。


  1.inline-block+text-align

2.jpg

  2.table+margin

3.jpg

  3.absolute+transform

4.jpg

  4.flex+justify-content/margin

5.jpg

  5.flex+margin

6.jpg

  垂直居中


  在水平居中里,可以用5种布局方案。


  1.table-cell+vertical-align

7.jpg

  2.absolute+transform

8.jpg

  3.flex+align-items

9.jpg

  水平垂直居中


  1.inline-block+text-align+table-cell+vertical-algin

10.jpg

  2.absolute+transform

11.jpg

  3.flex+justify-content+align-items

12.jpg

  多列布局


  自适应布局


  1.定宽+自适应


  1.float+margin

1.jpg

  2.float+overflow BFC

2.jpg

  3.table

3.jpg

  4.flex

4.jpg

  5.三列:两列定宽+一列自适应

5.jpg

  2.不定宽+自适应


  1.float+overflow:hidden BFC

1.jpg

  2.table

2.jpg

  3.flex

3.jpg

  4.三列

4.jpg

  等宽布局


  1.float

1.jpg

  2.table

2.jpg

  3.flex

3.jpg

  等高布局

  这次前端开发的两种布局方法,就为大家介绍到这里了,当然如果您对前端开发还有什么疑问,或者是想对前端开发有更多的了解,欢迎和我们南京学码思web培训机构老师交流沟通一下!


上一篇:分享做Web前端开发需要了解的几个知识点
下一篇:WEB前端是做什么的?大家不要再迷茫了

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00