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

最近所接手的一个项目是一个前后端分离的项目,因为公司暂时抽调不出前端支援这个项目,所以我被临时抽调在这个项目中充当一个前端开发的一个角色.由于之前做过一年多的J2EE开发,所以对于前端开发还是很快能上手的.只是因为之前的html、css常用标签与用法在脑海里面已经很模糊了,所以导致在开发的过程中经常是不明其所以然,一个标签一个标签的、一个属性一个属性的试,导致开发效率极低,所以我打算趁国庆假期开始好好的复习巩固下,废话不多说,开始正文.

 

一.块级元素与行内元素的区别

1.1 在标准文档流里面,块级元素具有以下特点:

(1).块级元素总是在新行上开始,占据一整行,其宽度自动填满其父元素宽度,垂直向下排列.(注:若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列.)

 

(2).块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制.(注:块级元素即使设置了宽度,仍然是独占一行的)

(3).块级元素可以包含行内元素和其他块级元素.

1.2 在标准文档流里面,行内元素具有以下特点:

(1).行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的

(2).行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding可以随意控制;

(3).行内元素不能包含块级元素,只能容纳文本或者其他行内元素.

 

二.块级元素与行内元素的相互转换

行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.1 块级元素转换为行级元素:

2.2 行级元素转换为块级元素:

 

三.块级元素与行内元素的分类

3.1 常见块级元素与行内元素的分类:

3.2 基本块级元素与行内元素的分类:

 html中的块级元素:

标签描述
<address>定义地址。
<article>定义文章。
<aside>定义页面内容之外的内容。
<audio>定义声音内容。
<blockquote>定义长的引用。
<canvas>定义图形。
<caption>定义表格标题。
<dd>定义定义列表中项目的描述。
<div>定义文档中的节。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<details>定义元素的细节。
<fieldset>定义围绕表单中元素的边框。
<figcaption>定义 figure 元素的标题。
<figure>定义媒介内容的分组,以及它们的标题。
<footer>定义 section 或 page 的页脚。
<form>定义供用户输入的 HTML 表单。
<h1> to <h6>定义 HTML 标题。
<header>定义 section 或 page 的页眉。
<hr>定义水平线。
<legend>定义 fieldset 元素的标题。
<li>定义列表的项目。
<menu>定义命令的列表或菜单。
<meter>定义预定义范围内的度量。
<nav>定义导航链接。
<noframes>定义针对不支持框架的用户的替代内容。
<noscript>定义针对不支持客户端脚本的用户的替代内容。
<ol>定义有序列表。
<output>定义输出的一些类型。
<p>定义段落。
<pre>定义预格式文本。
<section>定义 section。
<table>定义表格。
<tbody>定义表格中的主体内容。
<td>定义表格中的单元。
<tfoot>定义表格中的表注内容(脚注)。
<th>定义表格中的表头单元格。
<thead>定义表格中的表头内容。
<time>定义日期/时间。
<tr>定义表格中的行。
<ul>定义无序列表。

 html中的行内元素:

标签描述
<a>定义锚。
<abbr>定义缩写。
<acronym>定义只取首字母的缩写。
<b>定义粗体字
<bdo>定义文字方向。
<big>定义大号文本。
<br>定义简单的折行。
<button>定义按钮 (push button)。
<cite>定义引用(citation)。
<code>定义计算机代码文本。
<command>定义命令按钮。
<dfn>定义定义项目。
<del>定义被删除文本。
<em>定义强调文本。
<embed>定义外部交互内容或插件。
<i>定义斜体字。
<img>定义图像。
<input>定义输入控件。
<kbd>定义键盘文本。
<label>定义 input 元素的标注。
<map>定义图像映射。
<mark>定义有记号的文本。
<objec>定义内嵌对象。
<progress>定义任何类型的任务的进度。
<q>定义短的引用。
<samp>定义计算机代码样本。
<select>定义选择列表(下拉列表)。
<small>定义小号文本。
<span>定义文档中的节。
<strong>定义强调文本。
<sub>定义下标文本。
<sup>定义上标文本。
<textarea>定义多行的文本输入控件。
<time>定义日期/时间。
<tt>定义打字机文本。
<var>定义文本的变量部分。
<video>定义视频。
<wbr>定义可能的换行符。

 

四.结束语

在创作这边文章的时候有借鉴一下文章,在此表示感谢:

HTML中行内元素与块级元素的区别

  • 8
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值