首页 前端知识 HTML 块级元素、行内元素、行内块元素详解

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

2024-05-10 08:05:23 前端知识 前端哥 2 657 我要收藏

块级元素 和行内元素

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>块级元素包含一些文本。在那段文本中包含了一个<span>元素,它是行内元素。因为<span>是行内元素,所以段落正确渲染为单一的,未被打破的一段文本流。

在这里插入图片描述

块级元素

<span>元素修改为块级元素,例如段落元素<p>,代码如下所示

<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;
}

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

在这里插入图片描述

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>

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

总结

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7929.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!