网页布局的核心，就是用 CSS 来摆放盒子。
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是标准流、浮动和定位，这里先介绍标准流。
标准流中，HTML 元素一般分为块元素和行内元素两种类型。
一、块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素，它们具有以下特点：
- 自己独占一行，宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
- 高度，宽度、外边距以及内边距都可以控制
- 文字类块级标签，里面不能放其它块级元素，例如<p>、<h1>
二、行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素，它们具有以下特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的，默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接里面不能再放链接
三、行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。 也可以称它们为行内块元素。它们具有以下特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）
四、元素模式的转换
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块元素：display: inline-block;
