HTML 块级元素、行内元素、行内块元素详解

块级元素和行内元素

1、基本概念

在HTML5之前，HTML元素被分为两类：块级元素(block-level elements)和行内元素(inline-level elements)，或称为内联元素。

不过，因为这是一种表现特征，在HTML5时，在标准流中通过CSS属性display指定。（注释：表现特征，例如文字颜色，背景色等等和HTML的内容、JS的行为形成对比。以前，也许通过元素的类别决定元素的这种表现特征，不过现在可以通过CSS display属性进行控制。）

1、行内元素是那些只占用定义元素的标签所限定的空间的元素，而不是打破内容流。
2、块级元素占用其父元素(容器)的整个水平空间，以及与其内容高度相等的垂直空间，因此创建了一个“块”。

区别一：行内元素不从新行开始，只占用必要宽度；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。

区别二：块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。a元素例外，它可以包含块级元素，例如div。

2、行内元素和块级元素案例演示

行内元素

<div>
  The following span is an <span class="highlight">inline element</span>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
</div>

.highlight {
  background-color: #ee3;
}

在这个案例中，<div>块级元素包含一些文本。在那段文本中包含了一个元素，它是行内元素。因为是行内元素，所以段落正确渲染为单一的，未被打破的一段文本流。

在这里插入图片描述

块级元素

将元素修改为块级元素，例如段落元素，代码如下所示

<div>
  The following paragraph is a
  <p class="highlight">block-level element;</p>
  its background has been colored to display both the beginning and end of the
  block-level element's influence.
</div>

.highlight {
  background-color: #ee3;
}

可以看到差异，元素完全地改变了文本的布局，将其分割为三部分：元素前的文本，元素本身包含的文本，元素后的文本。

在这里插入图片描述

3、改变元素的等级

你可以通过CSS display属性改变一个元素的视觉表现，例如，通过把display的值从”inline“修改为”block"，你可以指示浏览器以为块盒（block box）而不是行内盒（inline box）的方式渲染元素，反之亦然。然而，修改元素的display属性，例如把display属性值从“inline”修改为“block”或者从“block”修改为“inline"，并不会改变元素的类别和内容模型。例如，即使把span元素的display属性修改为”block“，它仍然属于行内元素并且不能内嵌div元素。内容模型概念接下来会介绍。

块级元素、行内元素、行内块元素的特点

1、块级元素（block）

块级元素，顾名思义，该元素呈现“块”状，所谓块状就是元素显示为矩形区域，主要用于网页布局和网页结构的搭建。它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。以下元素均为块级元素：

<address>  	// 定义地址 
<caption>  // 定义表格标题  
<div>     	// 定义文档中的分区或节 
<dl>    	// 定义列表 
<dt>     	// 定义列表中的项目 
<dd>      	// 定义列表中定义条目
<form>  	// 创建 HTML 表单 
<h1>    	// 定义最大的标题
<h2>    	// 定义副标题
<h3>    	// 定义标题
<h4>     	// 定义标题
<h5>     	// 定义标题
<h6>     	// 定义最小的标题
<hr>     	// 创建一条水平线
<li>     	// 标签定义列表项目
<ol>     	// 定义有序列表
<ul>    	//定义无序列表
<p>     	// 标签定义段落
<table>    //标签定义 HTML 表格
<tbody>    //定义标签表格主体（正文）
<td>    	//表格中的标准单元格
<tfoot>    //定义表格的页脚（脚注或表注）
<th>    	//定义表头单元格
<thead>    // 标签定义表格的表头
<tr>     	// 定义表格中的行

块级元素代表性的就是 div，其他入p、header等等都可以用 div 来实现，不过为了方便解读代码，一般会使用特定的语义化标签，使代码可读性强

块级元素具有以下特点：

每个块级元素都是独自占一行；
高度，宽度，行高，外边距（margin）以及内边距（padding）都可以控制；
元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）；
多个块状元素标签写在一起，默认排列方式为从上至下；

2、行内元素（inline）

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。行内元素常用于控制页面中文本的样式。以下元素均为行内元素：

<a>     	// 标签可定义锚  
<acronym>   // 定义只取首字母缩写 
<b>     	// 字体加粗   
<br>     	// 换行  
<em>     	// 定义为强调的内容
<i>     	// 斜体文本效果
<kbd>     	// 定义键盘文本
<label>     // 标签为 input 元素定义标注（标记）
<q>     	// 定义短的引用
<select>	// 创建单选或多选菜单
<span>     	// 组合文档中的行内元素
<strong> 	// 加粗
<sub>     	// 定义下标文本
<sup>     	// 定义上标文本
<textarea>  // 多行的文本输入控件

行内元素具有以下特点：

不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
高宽、行高无效，对外边距（margin）和内边距（padding）仅设置左右方向有效，上下无效；
设置行高有效，等同于给父级元素设置行高；
元素的宽度就是它包含的文字或图片的宽度，不可改变；
行内元素中不能放块级元素，a 链接里面不能再放链接；

行内元素最常使用的就是 span，其他的只在特定功能下使用。与之间只能包含文本和各种文本的修饰标签，如加粗标签、倾斜标签等，中还可以嵌套多层。

3、行内块元素（inline-block）

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。以下元素为行内块元素：

<button>  	// 普通按钮
<input>   	// 创建表单元素
<textarea>  // 创建表单文本域
<img>		// 插入图片

行内块元素的特点：

高度、行高、外边距以及内边距都可以控制；
默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

元素显示模式转换

1、转换为块级元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body *{
      border: red 2px solid;
      background-color: #00f8ff;
    }
    a{
      display: block;
    }
    div
  </style>
</head>
<body>
<a href="">a标签</a>
<div>div标签</div>
</body>
</html>

效果如下：
在这里插入图片描述

2、转换为行内元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body *{
      border: red 2px solid;
      background-color: #00f8ff;
    }
    div{
      display: inline;
    }
    div
  </style>
</head>
<body>
<a href="">a标签</a>
<div>div标签</div>
</body>
</html>

效果如下：
在这里插入图片描述

3、转换为行内块元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body *{
      border: red 2px solid;
      background-color: #00f8ff;
    }
    div{
      display: inline-block;
    }
  </style>
</head>
<body>
<a href="">a标签</a>
<span>span标签</span>
</body>
</html>

效果如下：
在这里插入图片描述

总结

不管块级元素还是行内元素，区别:一是排列方式，二是宽高边距设置，三是默认宽度。

块级元素会独占一行，而行内元素和行内块元素则会在一行内显示；
块级元素和行内块元素可设置 width、height 属性，而行内元素设置无效；
块级元素的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度；

而行内块级元素又同时拥有块级元素和行内元素的特点。

HTML 块级元素、行内元素、行内块元素详解

块级元素 和行内元素

1、 基本概念

2、行内元素和块级元素案例演示

行内元素

块级元素

3、改变元素的等级

块级元素、行内元素、行内块元素的特点

1、块级元素（block）

2、行内元素（inline）

3、行内块元素（inline-block）

元素显示模式转换

总结

块级元素和行内元素

1、基本概念