最近很多小伙伴在学习基础布局的时候很纠结布局方法, 那么就要就来给大家总结几个常用的页面架构布局方案, 看完可以随收收藏起来, 以后都能用到
今天讲解的布局大致可以分成两种布局, 分别是居中布局和多列布局. 这两种布局又有好几种小布局方案, 一起来看看吧!
居中布局
</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, 即可免费获取, 学习不怕从零开始, 就怕从不开始.
来源: http://www.jianshu.com/p/ec8f184ed578