第2天 - Web UI 布局（一） 流式布局

上一节我们学习了 Web 开发中的用到的工具和一些官方资料。Web 开发中，很重要的一部分的工作就是设计好看的页面。Web页面由文字、图片、视频等元素组成，想要设计出漂亮的网页，还需要一些动画的辅助，做这一切的前提是我们能够对网页中的元素有完全的控制权，比如让一张图始终停留到左上角，让文字环绕在某张图的旁边。

Web发展了这么长时间，随着移动端的出现，Web 也需要支持在移动端可以完美地展示。因此，web 的布局方式也在不断优化。目前支持 7 种布局方式 「流式、position、float、flexbox、grid、table、muti-column」。相比移动端来说更胜一筹。

Web 的布局是通过 CSS 来控制的，一个 Web 页面是由一堆 HTML 标签组成，比如 div、p、span。今天我们先看看 Web 支持的默认布局方式「流式布局」。

流式布局

HTML 中有 block 和 inline-block 两种标签，它们在流式布局中具有不同的表现：

1. inline-block 标签可以嵌套在 block 标签中，反之则不可；

2.可以通过 display 修改标签属于 block 或者 inline-block 类型；

3.block 类型的标签布局是每一个标