HTML 块级元素与行内元素有哪些以及注意、总结

花落残月时

已于 2023-12-19 09:40:08 修改

阅读量553

点赞数 8

文章标签： html 前端

于 2023-12-07 16:00:47 首次发布

本文链接：https://blog.csdn.net/tdx03/article/details/134857831

版权

简介

行内元素和块级元素是HTML中的两种元素类型，它们在页面中的显示方式和行为有所不同。

块级元素与行内元素的区别：

块级元素（Block-level Elements）：	行内元素（Inline Elements）：
常见的块级元素有div、p、h1-h6、ul、ol、li、table、form等。	常见的行内元素有span、a、img、strong、em、input、label等。
块级元素会独占一行，即使没有设置宽度，也会自动填充父容器的宽度。	行内元素不会独占一行，它会在同一行内根据内容的大小自动排列。
块级元素可以设置宽度、高度、内外边距等属性。	行内元素的宽度和高度由内容决定，不能直接设置宽度和高度属性。
块级元素可以包含其他块级元素和行内元素。	行内元素的内外边距只影响元素自身的排列，不会改变其他元素的位置。
	行内元素不能包含块级元素，只能包含其他行内元素或文本内容。

代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     
    </style>
</head>
<body>
<div style="background-color: #b72424">
div行内元素
</div>
<span style="background-color: pink"> span块级元素 </span>
</body>
</html>

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

注意事项：

HTML5中的一些元素可以根据上下文的不同表现出块级元素或行内元素的特性。例如，a标签在默认情况下是行内元素，但如果给a标签设置display: block;属性，它就会变成块级元素。
代码演示：

 <html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       a{
           background-color: red;
           display: block;
       }

    </style>
</head>
<body>
<span> span1234</span>
<a>a标签</a>
</body>
</html>