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