html之行内元素和块级元素的区别? 分别有哪些?

梦中有辰

已于 2023-12-19 16:01:54 修改

阅读量479

点赞数 12

文章标签： html javascript 前端

于 2023-12-08 09:39:32 首次发布

本文链接：https://blog.csdn.net/weixin_72473547/article/details/134869946

版权

文章目录

前言
一、什么是行内元素和块级元素
二、它们之间的区别特点
- 行内元素的区别特点
- 块级元素的区别特点

前言

本章学习的是常见的行内元素和块级元素，以及它们的区别和特点

一、什么是行内元素和块级元素

简单概述

行内元素：行内元素是指在HTML中默认没有换行的元素，它们的显示方式是按行排列的，只占据内容所需的宽度空间。

块级元素：块级元素是指在HTML中默认独占一行的元素，它们会自动在其前后创建新的行，并且会占据整个可用的宽度空间。

通过将元素设置为行内元素或块级元素，可以决定元素在页面中的显示方式和布局。可以使用CSS的display属性来控制元素的显示类型。

1、常见的行内元素

行内元素有：a b span img input select strong

2、常见的块级元素

块级元素有：div ul ol li dl dt dd h1 p table th tr td 等等

代码演示

代码演示1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-color: red;width: 300px;height: 300px">
	<span style="background-color: aqua">
		这是行内元素span我在块级元素div里面
	</span>
</div>
</body>
</html>

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

代码演示2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--未设置宽则默认为父类元素的宽-->
<div style="background-color: blue;height: 50px">
    div块级元素
</div>
<span style="background-color: aqua">span行内元素</span>
</body>
</html>