×

行内(内联)元素和块级元素的区别

作者:Terry2013.03.27来源:Web前端之家浏览:14984评论:0

页面中元素一般分为两种:块级元素,行内元素(内联元素),即然分为两种元素,那么他们之间必然有区别:

1.块级元素总是独自占一行,前面和后面就好像有个换行符,内联元素总是和其它的内联兄弟占一行

2.块级元素可以设置宽和高度值,内联元素就不行了,他们的宽和高总是随着自身的内容自动扩大和缩小

3.块级元素的margin和padding都正常,内联元素左右maring和左右padding正常,上下不正常不识别,也就是说不能通过margin-top和padding-top来改变行高

关于第3点补充下:

行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了

总结:想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...),想让元素和其它元素在一行就用行内元素(span,a,img),他们之间可以通过样式来转换disply:block;display:inline;

还有一个属性:

display:inline-block;

将对象呈递为内联元素,与其它的元素同处一行,但是内部又呈现出块级元素,也就是可以设置宽和度,打破了块级元素和内联元素的区别,此属性,IE8,FF3,其它的标准浏览器都识别,IE6,IE7,FF2不识别此属性,但是在IE6,7下面使用又好像识别了,是因为他触发了IE的haslayout,(类似于zoom:1),所以从表现上来说他们支持这个属性.(可以拿块级元素来试验,块级元素使用了这个属性就没有相应的功能了),FF2{display:moz-inline-box}//有可能会导致文本对齐问题

如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失效了

好吧,就谈这里把,下面列举下普通的行内元素和块元素:

块级元素列表

<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为 fieldset 元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体(正文)
<td>表格中的标准单元格
<tfoot>定义表格的页脚(脚注或表注)
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行

行内元素列表

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/hang-kuai.html

网友评论文明上网理性发言已有0人参与

发表评论: