常用块状元素、行内元素和可变元素及其区别

来源：互联网发布：怎么样注册农村淘宝编辑：程序博客网时间：2024/06/05 10:46

块状元素和行内元素的概念是在css页面布局这个地方出现。主要是将html标签按照一定的特性分成2类：块状元素和行内元素（内联元素）。

一块状元素

1.1 概念理解

块状元素（Block element），字面理解就是一个方块嘛，它一般是其它元素的容器元素，可以容纳块状元素和行内元素，它默认是不会和其它元素同一行的，即相当于两个块状元素写一块是垂直布局的。

小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<style>

.box01 {

width:100px;

height:50px;

background-color:#FF0;

}

.box02 {

width:150px;

height:50px;

background-color:#0F0;

}

.box03 {

width:200px;

height:50px;

background-color:#F00;

}

</style>

<body>

</body>

</html>

1.2 常用块状元素

定义地址

定义表格标题

<dd>

定义列表中定义条目

<div>

定义文档中的分区或节

<dl>

定义列表

<dt>

定义列表中的项目

定义一个框架集

<form>

创建 HTML 表单

<h1>

定义最大的标题

<h2>

定义副标题

<h3>

定义标题

<h4>

定义标题

<h5>

定义标题

<h6>

定义最小的标题

<hr>

创建一条水平线

元素为 fieldset 元素定义标题

<li>

标签定义列表项目

为那些不支持框架的浏览器显示文本，于 frameset 元素内部

定义在脚本未被执行时的替代内容

<ol>

定义有序列表

<ul>

定义无序列表

<p>

标签定义段落

<pre>

定义预格式化的文本

<table>

标签定义 HTML 表格

<tbody>

标签表格主体（正文）

<td>

表格中的标准单元格

<tfoot>

定义表格的页脚（脚注或表注）

<th>

定义表头单元格

<thead>

标签定义表格的表头

<tr>

定义表格中的行

二行内元素

2.1概念理解

行内元素（Inline element）又称内联元素，个人觉得行内元素能让人更通俗一些去理解。行内元素一般基于语义元素，它只能够容纳文本以及其它的行内元素。常见的行内元素有超链接a、span、图片元素img（图片是行内元素，img是属于行内替换元素(Replace inline element)，属于inline element类的）。

行内元素跟块状元素的差异基本是，行内元素并不从新的一行开始，水平方向会一个个接着。每个块状元素会从新的一行开始。

强调一下：当css对内联元素定义这两属性中的一种之后，这些行内元素会具有块状元素属性！例如会重新的一行开始，就像后面跟了一个换行符一样。

1、display：block;

2、float:left/right;

小例子：

<style>

img {

display: block;

width: 200px;

height:200px;

}

a {

display: block;

border:2px solid red;

width: 200px;

height:50px;

}

</style>

</head><body>

<a href="http://www.baidu.com">www.baidu.com</a>

</body>

有display: block;

没有display: block;

当对img还有a添加display: block;之后，它们就像块状元素一样，从新的一行开始了，而且具有了width,heigh属性！如果仅仅是行内元素，不去设置它为display: block; 是没有办法设置它的宽高的，它显示的宽度和告诉就是图片被保存的高度和宽度，就像对于img来说是比较不方便的。

2.2常用行内元素

<a>

标签可定义锚

<abbr>

表示一个缩写形式

定义只取首字母缩写

< b >

字体加粗

<bdo>

可覆盖默认的文本方向

<big>

大号字体加粗

<br>

换行

<cite>

引用进行定义

<code>

定义计算机代码文本

<dfn>

定义一个定义项目

<em>

定义为强调的内容

<i>

斜体文本效果

<img>

向网页中嵌入一幅图像

<input>

输入框

<kbd>

定义键盘文本

<label>

标签为 input 元素定义标注（标记）

<q>

定义短的引用

<samp>

定义样本文本

创建单选或多选菜单

<small>

呈现小号字体效果

<span>

组合文档中的行内元素

语气更强的强调的内容

<sub>

定义下标文本

<sup>

定义上标文本

多行的文本输入控件

<tt>

打字机或者等宽的文本效果

<var>

定义变量

三可变元素

3.1概念理解

可变元素为根据上下文语境决定该元素为块元素或者内联元素

3.2常用可变元素

按钮

<del>

定义文档中已被删除的文本

创建包含另外一个文档的内联框架（即行内框架）

<ins>

标签定义已经被插入文档中的文本

<map>

客户端图像映射（即热区）

object对象

客户端脚本

1 0