display:block和float对行内元素支持宽高的区别

最新推荐文章于 2023-02-18 14:22:02 发布

李小白cc

最新推荐文章于 2023-02-18 14:22:02 发布

阅读量497

点赞数

分类专栏： web前端文章标签： html css 行内元素宽高 block float

本文链接：https://blog.csdn.net/qq_43390061/article/details/87965731

版权

web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

写这篇文章的原因是由于笔者在写一个小demo的实例布局时，关注到了一个之前没有关注到的问题。display和float浮动都可以将行内元素转换为块级元素，但是他们又有点区别。
display:block修饰行内元素是将其转换为独占一行的块级元素，也就是说给一个"span"标签设置了display:block后，它会占据父元素的整个宽度：下面来看一下实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个display:block实例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}/* css初始化 */
			.father{
				width: 400px;
				height: 100px;
				background-color: pink;
			}
			.father span{
				height: 50px;
				display: block;
				background: orange;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<span>我是span标签的内容</span>
		</div>
	</body>
</html>

在这里插入图片描述
可以看到是可以给span设置高度的，并且不设置宽度，它将独占一行。
接下来我们看看float浮动对它宽高的支持。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个float实例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}/* css初始化 */
			.father{
				width: 400px;
				height: 100px;
				background-color: pink;
			}
			.father span{
				height: 50px;
				float: left;/* 此处换成了浮动 */
				background: orange;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<span>我是span标签的内容</span>
		</div>
	</body>
</html>

在这里插入图片描述这里不难发现浮动后，span元素高度依然存在，但较display:blcok而言，它没有独占一行，即不给它设置宽度，它的宽度将由内容撑开，这是两个修饰对行内元素宽高支持的一个重要的区别。float对元素宽高的支持更像是display:inline-block，关于这个修饰，有兴趣的朋友可以了解一下。
它是一个将元素转换为另一种块级元素的修饰（我这里称行内块级元素），即给行内样式支持宽高，但却不独占一行，左右两边都是可以有其他元素的。
当你想用某个行内元素的宽高，又不想影响布局，不妨试试这个属性。
当然重点还是float与display:block
如果想给行内元素上下布局可以用display:block，左右布局既可以用float，方便。当然display:inline-block也可以实现左右布局（支持宽高的行内元素），但是有点小Bug（当两个行内元素标签中间有空格或者回车符时，显示在网页上会是一个小间隙，细心的朋友可以发现。没印象的朋友也可以自己试验一下）

李小白cc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
display:block和float对行内元素支持宽高的区别

display:block和float对行内元素支持宽高的区别写这篇文章的原因是由于笔者在写一个小demo的实例布局时，关注到了一个之前没有关注到的问题。display和float浮动都可以将行内元素转换为块级元素，但是他们又有点区别。display:block修饰行内元素是将其转换为独占一行的块级元素，也就是说给一个&quot;span&quot;标签设置了display:block后，它会占据父元素的整个宽度...
复制链接

扫一扫