专题 | 块级元素行内元素行内块元素

快乐的高兴的学习代码中

已于 2022-05-06 21:04:31 修改

阅读量1.1k

点赞数

分类专栏：详细知识文章标签： html5 html css

于 2021-08-27 11:27:20 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/119948911

版权

详细知识专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML中的块级元素、行内元素和行内块元素的特性。包括它们的宽高计算、换行规则、内外边距、嵌套及排列方式。重点讨论了块级元素如何独占一行、行内元素的宽高由内容决定以及行内块元素的混合特性。通过示例代码展示了各种元素在不同场景下的表现，帮助理解这些基本概念。

摘要由CSDN通过智能技术生成

它们本身的宽度如何计算高度如何计算----当时的想法是？

以后补他们三个能否嵌套块级元素行内元素

还有特殊的a标签

块级元素

块级元素高由内容撑起，宽默认100%，可以自己设置元素宽高。

块级元素独占一行，特点就是只要块级元素出现了，就得清场，有它的空间其他的东西别想出现。

块级元素内边距外边距上下左右都有效。

块级元素可以嵌套

块级元素的默认排列方式为竖着。

1.宽高

块级元素的高是由内容撑起，宽度默认100%，网页有多大，宽度就有多大。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

宽高设置有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
		}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

高度对比--是否有内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<!-- 无内容 -->
		<!-- <div></div> -->
		<!-- 有内容 -->
		<div>1111</div>
	</body>

2.换行

块级元素独占一行，即使一行有剩余空间，自己不需要，也不让别人用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
		}
		</style>
	</head>
	<body>
		<div>1111</div>
		<div>2222</div>
	</body>
</html>

只有元素浮动/定位或把自己设为行内元素/行内块元素才会一行有多个div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
			float: left;
		}
		</style>
	</head>
	<body>
		<div></div><div></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
		}
		.xx{
			position: absolute;
			top:8px;
			left:120px;
		}
		</style>
	</head>
	<body>
		<div></div>
		<div class="xx"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
			/* 设为行内元素 行内元素宽高由内容决定 */
			display: inline;
		}
		
		</style>
	</head>
	<body>
		<div>111</div>
		<div class="xx">222</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
			/* 行内块 */
			display: inline-block;
		}
		</style>
	</head>
	<body>
		<div></div><div></div>
	</body>
</html>

3.内外边距

注意:这里的外边距会出现一个外边距塌陷问题。

外边距塌陷

已知div的上下外边距都是10px，那么一个div高为52px,两个div高为104px,加上div中间的外边距总和20px,那么总高为124px, 但是图上高为114px。--------这就是外边距塌陷

面对这种情况，解决办法如下，在一个margin-top/bottom上就直接设置好自己想要的外边距。

比如直接在第一个div上设置margin-top为20px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 消除页面的内外边距 */
		body,html{
			padding: 0;
			margin: 0;
		}
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
			/* 上外边距为10px */
			margin-top: 10px;
			/* 下外边距为10px */
			margin-bottom: 10px;
		}
		</style>
	</head>
	<body>
		<div></div><div></div>
	</body>
</html>

外边距

块级元素可以设置上下左右外边距，上下左右外边距都生效。不过设置上下左右边距时，页面效果上边距和左边距更强势些，先依从它们。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 消除页面的内外边距 */
		body,html{
			padding: 0;
			 margin: 0; 
		}
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
			/* 上外边距为10px */
			margin-top: 10px;
			/* 下外边距为10px */
			margin-bottom: 10px;
			margin-left:10px;
			margin-right:10px;
		}
		</style>
	</head>
	<body>
		<div></div><div></div>
	</body>
</html>

内边距

块级元素设置可以设置内边距，上下左右内边距都有效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 消除页面的内外边距 */
		body,html{
			padding: 0;
			 margin: 0; 
		}
		div{
			border:1px solid #008000;
			width:100px;
			height: 50px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}
		</style>
	</head>
	<body>
		<div>1111</div><div>2222</div>
	</body>
</html>

4.嵌套

块级元素可以嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 消除页面的内外边距 */
		body,html{
			padding: 0;
			 margin: 0; 
		}
		.cc{
			width:300px;
			height: 100px;
			border: 1px solid #000000;
		}
		.dd{
			width:100px;
			height: 50px;
			border: 1px solid #FFC0CB;
		}
		</style>
	</head>
	<body>
		<div class="cc">
			<div class="dd"></div>
		</div>
	</body>
</html>

5.默认排列方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:100px;
			height:100px;
			border: 1px solid #1E90FF;
		}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

行内元素

行内元素没有宽高，设置宽高也无效，它的宽高由内容撑起

行内元素共用一行，空间不够才换行。就跟大家平时挤公交地铁一样，只要挤的进去，就绝不等下一辆。

行内元素内边距上下左右都有效，外边距左右有效，上下无效。

行内元素可以嵌套

行内元素的默认排列方式为横着。

行内元素不会随着网页缩放。

1.宽高

行内元素设置宽高无效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;
		}
		</style>
	</head>
	<body>
		<span></span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;
			width:10px;
			height: 10px;
		}
		</style>
	</head>
	<body>
		<span></span>
	</body>
</html>

宽高由内容撑起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;
			width:10px;
			height: 10px;
		}
		</style>
	</head>
	<body>
		<span>1111</span><span>22</span>
	</body>
</html>

2.换行

行内元素不会独占一行，在同一行内会有多个行内元素，当一行占满，才会换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;
			width:10px;
			height: 10px;
		}
		</style>
	</head>
	<body>
		<span>1111</span><span>22</span><span>33333333333333333333333333</span>
	</body>
</html>

一行占满问题？浏览器一行是指宽度，网页宽度由滑动条控制，理论上来说就是无限的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;
			width:10px;
			height: 10px;
		}
		</style>
	</head>
	<body>
		<span>1111</span><span>22</span><span>33333333333333333333333333</span><span>4444444444444444444444444444444444444444444444444444444444444444</span><span>555555555555555555555555555555555555555555555555555555555555</span><span>666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</span><span>77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777666666666666777777777777777777777777777777777777777777777777777777777777777777777777777</span><span>888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</span>
	</body>
</html>

希望它换行可以把把转换为块级元素。

3.内边距

上下左右内边距设置都有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
				padding: 100px;
		}
		span{
			border:1px solid orangered;	
			padding-top:10px;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}
		</style>
	</head>
	<body>
		<span>1111</span>
	</body>
</html>

注意：如果不在body里加内边距，上边框线就看不见。

4. 外边距

左右有效上下无效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin:0;
			padding:0;
		}
		span{
			border:1px solid orangered;	
			margin-top:40px;
			margin-bottom: 40px;
			margin-left: 40px;
			margin-right: 40px;
		}
		</style>
	</head>
	<body>
		<span>1111</span>
	</body>
</html>

5.不会随着网页变化，保持原样

6.嵌套

行内元素能嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;	
			margin-top:40px;
			margin-bottom: 40px;
			margin-left: 40px;
			margin-right: 40px;
		}
		.cc{
			border:1px solid cornflowerblue;
		}
		</style>
	</head>
	<body>
		<span>1111<span class="cc">22222</span></span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;	
			margin-top:40px;
			margin-bottom: 40px;
			margin-left: 40px;
			margin-right: 40px;
		}
		.cc{
			border:1px solid cornflowerblue;
			width:300px;
			height: 300px;
		}
		</style>
	</head>
	<body>
		<span>1111<div class="cc">22222</div></span>
	</body>
</html>

7.默认排列方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			border:1px solid orangered;	
		}
		</style>
	</head>
	<body>
		<span>1111</span><span>2222</span><span>333</span><span>4444</span>
	</body>
</html>

行内块元素

行内块元素没有宽高，宽高可由内容撑起，元素设置宽高有效

行内块元素共用一行，空间不够才换行。就跟大家平时挤公交地铁一样，只要挤的进去，就绝不等下一辆

行内块元素内边距上下左右都有效，外边距左右有效，上下无效

行内块元素可以嵌套

行内块元素的默认排列方式为横着

行内块元素不会随着网页缩放

1.宽高

行内块自身没有宽高，宽高由内容撑起来，设置宽高有效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			display: inline-block;
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			display: inline-block;
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		div{
			display: inline-block;
			border:1px solid #008000;
			color:orangered;
			width:100px;
			height:100px;
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

2.换行

行内块元素也是不会独占一行，在同一行内会有多个行内元素，当一行占满，才会换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			display: inline-block;
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

3.内边距

上下左右内边距设置有效

注意：奇怪今天的浏览器自带空隙了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			display: inline-block;
			border:1px solid #008000;
			padding-top:10px;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

4.外边距

行内块元素上下左右外边距都有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		div{
			display: inline-block;
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		div{
			display: inline-block;
			border:1px solid #008000;
			margin-top: 10px;
			margin-bottom: 10px;
			margin-left:10px;
			margin-right: 10px; 
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

5.是否会随网页自动缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		div{
			display: inline-block;
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div>111</div>
	</body>
</html>

6.能否嵌套

可以嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		div{
			display: inline-block;
			border:1px solid #008000;
		}
		</style>
	</head>
	<body>
		<div>111
		<div>22222</div>
		</div>
	</body>
</html>

7.多个排列一起默认方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			margin: 0;
			padding: 0;
		}
		div{
			display: inline-block;
			border:1px solid #008000;
			color:orangered;
		}
		</style>
	</head>
	<body>
		<div>111</div><div>22222</div><div>3333</div>
	</body>
</html>