行内元素、块级元素和行内块级元素的区别和联系

HTML，也叫“超文本标记语言”，其元素无非就是行内元素、块级元素和行内块级元素。

​

行内元素：

行内元素只占据它对应边框所包含的空间，行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用。

但是 padding 内边距可以起作用， margin 上下边距不起效，左右边距可以起作用。

行内元素最常用的就是 span ， br 和 a ，之前 b ， i 和 small 标签也比较常见，分别用来设置加粗，斜体和缩小字体。但这种特殊的样式，最好还是用 CSS 来实现。

行内元素还有很多，如：big ， tt ， abbr ， acronym ， cite ， code ， label， dfn ， em ， kbd ， strong ， samp ， var ， bdo ， map ， object ， q ， script ， sub ， sup 。

块级元素：

块级元素会占据其父元素（容器）一整行的空间，默认情况下块级元素会新起一行。

块级元素的 padding 和 margin 内外边距都可以起作用，但是不管宽度设定为多少，都会占据一整行的空间。

常用的块级元素有 div ， ul ， ol ， li ， form ， h1 - h6 ， hr ， table 。

HTML新增的一些语义化标签，也是块级元素：

<article> 文章内容。

<aside> 伴随内容。

<audio> 音频播放。

<video> 视频。

<canvas> 绘制图形。

<header> 区段头或页头。

<hgroup> 标题组。

<section> 一个页面区段。

<footer> 区段尾或页尾。

<figcaption> 图文信息组标题。

<figure>  图文信息组。

<output> 表单输出。

还有一些不常用但很有意思的块级元素：

<noscript> 不支持脚本或禁用脚本时显示的内容。

<pre> 预格式化文本。

<address> 联系方式信息。

<blockquote> 块引用。

<dd> 定义列表中定义条目描述。

<dl> 定义列表。

<fieldset> 表单元素分组。

<tfoot> 表脚注。

行内块级元素：

行内块级元素也被称为可置换元素，它们既可以设置宽高又不会占据一整行的空间。

常见的行内块级元素有 img ， button ， input ， select ， textarea 。

当然，可以使用 CSS 的 display 属性给元素设置行内、块和行内块。

/*行内*/
display: inline;

/*块*/
display: block;

/*行内块*/
display: inline-block;

未经允许不得转载：w3h5-Web前端开发资源网 » 行内元素、块级元素和行内块级元素的区别和联系