最近很多小伙伴在学习基础布局的时候很纠结布局方法，那么就要就来给大家总结几个常用的页面架构布局方案，看完可以随收收藏起来，以后都能用到
今天讲解的布局大致可以分成两种布局，分别是居中布局和多列布局。这两种布局又有好几种小布局方案，一起来看看吧！
居中布局
</article>
HTML代码
image
水平居中
在水平居中里，可以用5种布局方案。
1. inline-block + text-align
image
**2. table + margin **
image
3. absolute + transform
image
4. flex + justify-content/margin
image
5.flex + margin
image
垂直居中
在水平居中里，可以用5种布局方案。
1. table-cell + vertical-align
image
2. absolute + transform
image
3. flex + align-items
image
水平垂直居中
1.inline-block + text-align + table-cell + vertical-algin
image
****2.absolute + transform****
image
3. flex + justify-content + align-items
image
多列布局
自适应布局
1. 定宽 + 自适应
**1. float + margin **
image
** 2. float + overflow BFC **
image
**3.table **
image
** 4. flex **
image
5. 三列: 两列定宽 + 一列自适应
image
2. 不定宽 + 自适应
1.float + overflow:hidden BFC
image
2. table
image
3.flex
image
4.三列
image
等宽布局
1.float
image
**2. table **
image
3.flex
image
等高布局
image
image
image
本文转自web前端网页设计。
多年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun：296，212，562，即可免费获取，学习不怕从零开始，就怕从不开始。
网友评论