CSS 布局概述
🌙
手机阅读
本文目录结构
CSS 布局非常重要！
布局是整个页面的骨架，如果这个架子搭建的不合理，会导致基于骨架的更小模块的各种怪异情况，让你焦头烂额，按下葫芦浮起瓢；
真实项目种写页面，并不会从上到下的逐一写，而是像画素描一样，先定型，定下骨架图，然后慢慢的填充涂鸦等。
掌握布局技巧，可以让你的页面更容易扩展和维护。
介绍
最后总结的链接
- https://www.yuque.com/doubaozia/qtacay
- 普通流式布局
- 浮动布局
- 顶部固定布局
- 左侧菜单
- 两侧固定
- 吸底布局
- 等间距自适应
https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/assets/Visual-formatting-model.jpg
https://www.imooc.com/article/300513
核心代码
- 水平居中
- 垂直居中
- 水平垂直居中
- 一行一列
- 一行两列
- 一行三列
- 两行一列
- 两行两列
- 两行三列
- 顶部和底部定高，中间自适应
- 顶部定高和左侧定宽，右侧自适应
- 顶部、底部定高，左右两侧定宽，中间自适应
- Flex 常用布局
- 三列布局
- 三行一列布局代码
- 三行三列布局
- 三行两列布局
- 两列布局
- 单列布局
- 双飞翼布局
- 右侧固定，左侧自适应
- 圣杯布局
- 多栏布局
- 将垂直元素变成水平
- 左中右布局
- 左侧、中侧定宽，右侧自适应
- 左侧和右侧定宽，中间自适应
- 左侧固定，右侧自适应
- 左右布局
- 清浮动
- 等分等高
- 等宽布局
- 等高布局
- 网格布局
- 顶栏底栏固定，中间高度自适应
例子
原理
++++++++++++++++++++++
介绍
核心代码
例子
原理
|||||||||||||||||||||
