【Web 前端】元素分类>>

最新推荐文章于 2025-08-11 22:32:45 发布

转载最新推荐文章于 2025-08-11 22:32:45 发布 · 716 阅读

Web自学专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了块级元素和内联元素的区别与特点，包括如何通过CSS样式将其转换，以及常见问题与解决方法。

元素分类

块状元素

内联元素

内联块状元素

详解：

>>块级元素

设置display:block将元素显示为块级元素

举个例子 a{display:block;} 将行内元素a转换为块级元素，使a元素有块级元素的特点

>>>特点：每个块级元素都从新的一行开始，其后元素另起一行；

元素宽度、高度、行宽、底和顶边距都可以设置、

元素宽度在不设置的情况下，是它本身父容器的100%；

例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p,h1{background:pink;}
</style>
</head>
<body>
<h1>hahahha</h1>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
</body>
</html>

显示：

hahahha

div1

div2

段落1段落1段落1段落1段落1

>>行内元素

块状元素可以由代码display:inline设置为行内元素

>>>特点:

1、和其他元素在一行上

2、高度、宽度、行高、顶部底部边距不可以设置

3、元素宽度是它包含的文字和图片的宽度，不可以改变

行内元素之间会产生间隙bug问题的场景：

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

如下代码：

<div>
   <a>1</a>
   <a>2</a>
   <span>33333</span>
   <span>44444</span>
   <em>555555</em>
</div>

解决方法：

1、写在一行，之间不要有空格之类的符号。

<div>
<a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>
</div>

2、使用font-size:0

div{font-size:0;}
a,span,em{font-size:16px;}

内联块状元素

display :inline:block;

>>特点：

1、和其他元素在同一行上

2、元素高度、宽度、行高、顶底间距可以设置

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
    display：inline-block；
	width:20px;/*在默认情况下宽度不起作用*/
	height:20px;/*在默认情况下高度不起作用*/
	background:pink;/*设置背景颜色为粉色*/
	text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>