块元素，行内元素以及可替换与不可替换元素

来源：互联网发布：dlp数据防泄密知乎编辑：程序博客网时间：2024/05/22 17:45

显示表现级区分：

块元素有以下这些：

<dt>定义列表中的项目<hr>创建一条水平线<legend>元素为 fieldset 元素定义标题

<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部<noscript>定义在脚本未被执行时的替代内容

<pre>定义预格式化的文本<tfoot>定义表格的页脚（脚注或表注）

行内元素：

<a><textarea><img><input><span><strong>
<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗<br>换行<cite>引用进行定义<code>定义计算机代码文本
<dfn>定义一个定义项目<em>定义为强调的内容<i>斜体文本效果<kbd> 定义键盘文本
<label>标签为 input 元素定义标注（标记） <q>定义短的引用<samp>定义样本文本
<select> 创建单选或多选菜单<small>呈现小号字体效果<sub>定义下标文本<sup>定义上标文本
<tt>打字机或者等宽的文本效果

定义变量可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素：

<del>定义文档中已被删除的文本<iframe>创建包含另外一个文档的内联框架（即行内框架）

<ins> 标签定义已经被插入文档中的文本 <object> object对象等。

区别：

（1）块元素有正常的物理特性（width,height,padding,margrin等特性都可以正常表示）。垂直块元素外边距（margrin）会重合，行内左右元素外边距不重合，浮动左右也不重合。

（2）行内可替换元素有物理特性。eg：

大多数是不可替换的，浏览器可以直接由html代码来识别决定它的大小样子。

<span style="font-size:12px;"><html><head><style type="text/css">.div1 {     height:40px;     width:100%;     background-color:green;  }.div2 {     height:40px;     width:100%;       background-color:pink;}.input1{height:40px;}a{line-height:40px;        background-color:red;     padding-left:100px;     padding-top:50px;}td.test2 {padding: 0.5cm 2.5cm}</style></head><body><div class="div1"> hello</div><div class="div2"><a href="xx">啥玩应儿 </a><a href="xx">啥玩应儿 </a></div><div class="div1"> hello</div><input type="text" class = "input1"/></body></html></span>

渲染区分

1、行内不可替换元素没有物理特性，所以设置width,height没有用。但是padding，margrin的左右有用,而上下不计入行高计算，所以设置padding-top可能会导致视觉上溢出，但是在不溢出情况下还是有效果的。可以用line-height来设置行高后会居中，但是对实际行高没影响。`

如上图文本框可以设置大小。

<html><head><style type="text/css">.div1 {     height:40px;     width:100%;     background-color:green;  }.div2 {     height:40px;     width:100%;       background-color:pink;}a{line-height:40px;        background-color:red;     padding-left:100px;     padding-top:5px;//<span style="font-family: Arial, Helvetica, sans-serif;">padding-top:5px;</span>}td.test2 {padding: 0.5cm 2.5cm}</style></head><body><div class="div1"> hello</div><div class="div2"><a href="xx">啥玩应儿 </a><a href="xx">啥玩应儿 </a></div><div class="div1"> hello<div/></body></html>

由图可知line-height没有作用，但是padding-top有效果。但是当padding-top为50px的时候就明显有问题

由图可知padding，margrin的左右有用,而上下不计入行高计算，所以设置padding-top可能会导致视觉上溢出

（4）可替换元素（一般也是行内元素）：如img input，有物理特性，没有的话也有默认大小等样式。

0 0