把这些“可以动的盒子”更和谐优雅的展示——③实际工作中最常用的“布局”

本知识学习用时：2小时，总第70/10000小时

前言：拿到一张设计稿，我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替，以前很多老的布局方式现在也慢慢淡化了，那哪些是我们最基本的布局方式呢？

本篇给出答案，属于必掌握篇。

一、什么是布局？

现有样式不能满足人们的需求：

① 文档流

② 浮动

③ 定位

人们需要：

① 导航栏+内容

② 导航栏+内容+广告栏

③ 从上到下、从左到右、定宽、自适应...

二、最常用的布局有哪些？

① 单列布局：

现方式——定宽 + 水平居中。

-- （1）非通栏

html

css

-- （2）通栏

html

css

② 双列布局：

一列固定宽度，另外一列自适应宽度。

实现方式——浮动元素 + 普通元素 margin 。

-- （1）侧边栏在左

html

css

-- （2）侧边栏在右

时刻记着页面元素的渲染顺序！

html

css

③ 三列布局

两侧两列固定宽度，中间列自适应宽度。

注意顺序！

html

css

④ 水平等距排列

主要关注“负 margin ”的运用！

html

css

后记：对于“布局”，我们还有一些其他方式：弹性布局 flex、grid 布局等等。我们随后会一一探讨，这篇我们先掌握基础。

前端知识日新月异，迭代很快，但最基本的知识永远都不会变的。所以，夯实好基础，以不变应万变！

欢迎继续关注下文 ：

（16）让这些“展示”有更好的扩展性——媒体查询

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）