块级元素和行内元素的区别
标准文档流: 是指在不使用其它的排版和定位相关的特殊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>
块级元素
从页面布局和显示外观的角度看,一个页面的布局就类似一篇报纸的排版,需要分为多个区块,大的区块再细分为小区块,块内为多行逐一排列的文字、图片、超链接等内容。这些区块一般称为块级元素,而区块内的文字、图片或超链接等一般称为行级元素。页面这种布局结构,其本质上是由各种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>