css中的块元素、行内元素和行内块元素的区别

最新推荐文章于 2024-04-09 23:16:29 发布

code_mo

最新推荐文章于 2024-04-09 23:16:29 发布

阅读量733

点赞数 4

分类专栏：前端文章标签： css 行内元素块元素行内块元素

本文链接：https://blog.csdn.net/weixin_43441790/article/details/96770820

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.HTML中的块元素、行内元素的说明

根据CSS规范的规定，网页的每一个元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div、form、h1-h6、ol、ul、p、menu等块元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span、img、a、b、i、select、strong、u、var、br元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

2. 块元素、行内元素的区别

块元素的特性：

能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下

行内元素的特性：

设置宽高无效
对margin仅设置margin-left和margin-right有效，margin-top和margin-bottom无效；padding设置top、left、bottom、right都有效，即会撑大空间
不会自动进行换行

行内块元素的特性：

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

不自动换行
能够识别宽高
默认排列方式为从左到右

3.块元素和行内元素的转换

display:inline; 将块元素转换为行内元素。
display:block; 将行内元素装换为块元素。
display:inline-block; 将行内元素转变为行内块元素
···································································································
上代码分析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;margin: 0;
			}
			span{
				width: 200px;
				background: red;
				display: block;  /*将行内元素转为块元素*/
			}
			.box1{
				width: 200px;
				height: 30px;
				background: skyblue;
				display: inline;  /*将块元素1,转为行内元素*/
			}
			.box2{
				width: 200px;
				height: 30px;
				background: blueviolet;
			}
			i{
				background: green;
			}
		</style>
	</head>
	<body>
		<span>行内元素1，转块元素</span>
		<i>行内元素2</i>
		<div class="box1">块元素1,转行内元素</div>
		<div class="box2">块元素2</div>
	</body>
</html>

打开浏览器查看到元素的排版，给行内元素1加了display: block;之后，发现行内元素自己占了一行，变成了块元素，而块元素1加了display: inline;，变成了行内元素。
在这里插入图片描述
在不给任何元素加display的情况下，元素的排列应该是如下面这样的；这就是韩内元素和块元素之间的相互转换

code_mo

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
css中的块元素、行内元素和行内块元素的区别

1.HTML中的块元素、行内元素的说明根据CSS规范的规定，网页的每一个元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div、form、h1-h6、ol、ul、p、menu等块元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span、img、a、b、i、select、strong、u、var、...
复制链接

扫一扫