HTML块级元素与行内元素

块级元素和行内元素的区别主要体现为二者在文档流中的特点不同

文档流

文档流就是元素在页面按照从上到下，从左到右顺序的流式排列。
当使用浮动(float)，绝对定位(abosolute)，固定定位(fixed)三种方式定位会使元素脱离文档流，脱离文档流之后元素将不再在文档流占用空间，可以自由的放在页面上的任一位置。

块级元素(block)：

• 块级元素在文档流中总是在新的一行上开始，即每个块级元素独占一行，从上到下依次排列。
• 宽度(width)，高度(height)，行高(line-height)，外边距(margin)，边框(border)，内边距(padding)都是可以设置的，宽度默认为父元素的100%，默认高度被子元素内容撑开。
• 块级元素可以容纳其他块级元素和内联元素。

html中常见的块级元素

标签	描述
<adress>	描述地址
<caption>	表格标题
<div>	定义一个区域
<dl>	"定义"列表
<dt>	"定义"列表中的项目
<h1>-<h6>	文本标题
<hr>	水平线
<form>	表单
<fieldset>	定义一个框架集
<p>	段落
<ul>	无序列表
<ol>	有序列表
<li>	无序列表中的项目
<table>	html中的表格
<tr>	表格中一行
<th>	表头单元格
<td>	表格中的标准单元格
<nav>	导航栏
<pre>	格式化文本

行内元素(inline)

• 行内元素只占自身大小的空间，不会独占一行，在文档流中几个行内元素从左到右依次排列。
• 行内元素无法设置宽高和内外边距，只能容纳文本或其他行内元素
• 行内元素的宽高的默认值都是被内容撑开

html常见行内元素

标签	描述
img	图片
a	定义超链接
span	用于组合文档中的行内元素
label	为input元素定义标注
select	下拉列表
input	输入框
button	按钮
strong	文字加粗表强调
i	斜体文本
big	大号字体
small	小号字体
sup	上标
sub	下标
kbd	定义键盘文本

一些特性

1.将行内元素设置float(浮动)后将变为块级元素，即display将会变成block
2.行内元素设置position为absolute或fixed时会使得原先的行内元素变为块级元素。