whyboy站长用实例代码讲述行内元素和块级元素最直观的区别,而他们还拥有很多各自的特性。我们在实习运用中会经常遇见问题,但是如果我们搞清楚了他们的关系和特性,问题就迎刃而解了。
以图例来表述行内元素和块级元素的区别会更加直观:
注:行内元素会再一条直线上,是在同一行的。我是行内元素SPAN标签 我是行内元素strong标签
注:块级元素各占一行。是垂直方向的!
我是块级元素div标签
我是块级元素P标签
如果你要将行内元素变成块级元素,那么就只需要在该标签上加上样式 display:block; 这里已经牵涉到了CSS内容。块级元素可以用样式控制其高、宽的值。
行内元素不可以控制宽和高,除非你想将它转变成为块级元素。它的宽和高,是随标签里的内容而变化。
然后whyboy站长罗列了,所有行内元素和块级元素标签,做好笔记哦!
块级元素列表
<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> |
定义变量 |
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
<button> |
按钮 |
<del> |
定义文档中已被删除的文本 |
<iframe> |
创建包含另外一个文档的内联框架(即行内框架) |
<ins> |
标签定义已经被插入文档中的文本 |
<map> |
客户端图像映射(即热区) |
<object> |
object对象 |
<script> |
客户端脚本 |
因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,
1. 块元素。 特性:有物理属性,width,height写值起作用,而且要占据一行。
2. 内联元素。 特性:没有物理属性。但是margin,padding值有用。不占据一行,后边可以有兄弟元素。
3. 即是块又是内联,根据兄弟元素决定。
为什么是float之后才会有物理属性,这就是块与内联元素相互转化的问题。
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;
|