行内元素和块元素都有哪些,及双方的区别

本文深入解析HTML中的行内元素、块级元素及可变元素的特点与应用,详细介绍了每种元素的显示行为、尺寸控制及边距设定,是前端开发者不可多得的参考资料。

行内元素

  • 设置宽度width 无效。
  • 设置高度height 无效,可以通过line-height来设置。
  • 设置margin 只有左右margin有效,上下无效。
  • 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的

行内元素列表

<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>		定义变量

块级元素

  • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  • 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

块级元素

<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>		定义表格中的行

可变元素素列表

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

<button>	按钮
<del>		定义文档中已被删除的文本
<iframe>	创建包含另外一个文档的内联框架(即行内框架)
<ins>		标签定义已经被插入文档中的文本
<map>		客户端图像映射(即热区)
<object>	object对象
<script>	客户端脚本
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值