正常流布局
布局决定了元素的排列方式。如果让浏览器按照默认方式排列，这叫做正常流（normal flow）布局。正常布局是怎么排列元素的呢？各行从上到下，行内从左到右。
那么什么情况下会开始新的一行呢？块元素会产生新行。元素分为块元素和行内元素两类。块元素独占一行，行内元素则是在行中，在前面元素的右边排列。如果一行排满了，行内元素继续从第二行开始排列。
块元素是 display 属性为 block 的元素，独占一行，可以设置高度 height 、宽度 width （默认值 100% ）和内边距、外边距。行内元素是 display 值为 inline 的元素，不产生换行，高度和宽度由元素内容决定，不能设置垂直方向的内边距和外边距。
如果希望为行内元素设置高度、宽度或垂直内外边距要怎么做呢？可以使用行内块元素。行内块元素的 display 是 inline-block ，是一种特殊的行内元素，它像其他行内元素一样，在行内排列，同时像块元素一样可以设置高度、宽度和边距。
| 块元素 | 行内元素 | 行内块元素 | |
|---|---|---|---|
display | block | inline | inline-block |
| 默认宽度 | 占满上级容器宽度 | 由内容决定 | 由内容决定 |
| 默认高度 | 由内容决定 | 由内容决定 | 由内容决定 |
| 换行 | 独占一行 | 不换行 | 不换行 |
| 设置宽高 | 有效 | 无效 | 有效 |
| 内边距 | 全部有效 | 左右有效 | 全部有效 |
| 外边距 | 全部有效 | 左右有效 | 全部有效 |
常用的HTML标签和默认显示类型如下：
| 显示类型 | 元素 | 元素简介 |
|---|---|---|
| 块元素 | <div> | 文档分区 |
<footer> | 页脚 | |
<form> | 表单 | |
<h1>-<h6> | 1-6级标题 | |
<header> | 页眉 | |
<li> | 列表项 | |
<nav> | 导航链接 | |
<ol> | 有序列表 | |
<p> | 段落 | |
<table> | 表格 | |
<ul> | 无序列表 | |
| 行内元素 | <a> | 超链接 |
<span> | 行内节 | |
<sub> | 下标 | |
<sup> | 上标 | |
| 行内块元素 | <button> | 按钮 |
<img> | 图像 | |
<input> | 输入框 | |
<select> | 下拉菜单 | |
<textarea> | 多行文本输入 |