块级元素和行内元素的区别

标准文档流: 是指在不使用其它的排版和定位相关的特殊CSS规则时,各种元素的排列规则,换语话说CSS规定的网页元素默认的排列方式.



块级元素
  从页面布局和显示外观的角度看,一个页面的布局就类似一篇报纸的排版,需要分为多个区块,大的区块再细分为小区块,块内为多行逐一排列的文字、图片、超链接等内容。这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为行级元素。页面这种布局结构，其本质上是由各种HTML标签组织完成的。


与行级元素相比，块级元素具有如下特点：
(1)、前后换行显示，块级元素比较“霸道”，默认状态下独占一整行。
(2)、块级元素常用作容器，即可以再“容纳”其它块级元素和行级元素，而行级元素一般用于组织内容，即只能用于“容纳”文字、图片、超链接等其他行级元素。
(3)、块级元素具有一定的高度和宽度，可以通过设置块级元素的width、height属性来控制。


从页面布局的角度，块级元素又可细分基本块级元素和常用于页面布局的块级元素。
基本的块级元素有：
  1).标题标签<h1>~<h6>:表示一段文字的主题，并支持多层次的内容结构。
  2).段落标签<p> :表示一段文字的内容。
  3).水平线标签<hr />：表示一条水平线。
常用于布局的块级元素
  1).有序列表<ol>-<li>:表示多个并列的列表项，它们之间有明显的先后顺序。
  2).无序列表<ul>-<li>:表示多个并列的列表项，但它们之间没有先后顺序。
  3).定义列表<dl>-<dt>-<dd>:表示描述某个术语或产品的定义或解释。
  4).表格<table>:表示用于描述一个表格，它使用规整的数据显示。 
  5).表单<form>:表示用于描述需要用户输入的页面内容。
  6).分区<div>:表示用于组织小区块的内容。为了方便管理，数目众多的小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分，它相当于一个大的容器，可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
在实际开发中，<div>常用来进行分区，ul-li或ol-li实现无序或有序的项目列表，dl-dt-dd实现图文混编，table-tr-td实现规整数据的显示，由此，在页面局部布局中，形成了如下四种常用的局部块状布局结构：
   (1)、div-ul(ol)-li:常用于分类导航或菜单等场合
   (2)、div-dl-dt-dd:常用于图文混编场合
   (3)、table-tr-td:常用于规整数据的显示场合
   (4)、form-table-tr-td:常用于表单布局的场合


行级元素
  行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后，往每个小区块添加内容时，就需要使用到行级标签.


  行级标签:类似文本的显示方式，按“行”逐一显示，常用的行级标签有：


  (1)、图像标签<img>:表示用于在网页中显示图片.
  (2)、超链接标签<a>:
  (3)、范围标签<span>:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.
  (4)、换行标签<br />:表示强制换行显示.
  (5)、输入框标签<input>
  (6)、多行文本域标签<textarea>