CSS 元素类型

网页布局的核心，就是用 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;