css之旅（二）css display属性

一天一丢丢

已于 2022-04-05 17:22:18 修改

阅读量243

点赞数

分类专栏： css 文章标签： css

于 2020-07-12 00:54:54 首次发布

本文链接：https://blog.csdn.net/letianxf/article/details/107292920

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文主要介绍css的display属性以及常用的属性值。

一、inline

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<style>
		.test{
			display: inline;
			width: 200px;
			height: 200px;
			background: yellow;
			padding: 50px;
			border: solid 1px black;
			margin: 50px;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div style="height: 100px;width: 100%;border: solid 1px black"></div>
	<div>
		我是<div class="test" >inline</div>值
	</div>
	
</body>
</html>

在这里插入图片描述

使元素变为行内元素，与其它行内元素共享一行，不会换行。可以看到，设置了line-hight属性后对一整行都起作用
width和height属性不会起作用
padding属性可以正常生效
margin-left和margin-right可以正常生效，但是margin-top和margin-bottom是不起作用的

发现inline属性会存在一点小问题：如果两个inline出现换行，会导致inline元素之间产生间隔，这是由于换行符这种空白字符也会被浏览器识别到。

<!DOCTYPE html>
<html>
<head>
	<style>
		.test{
			display: inline;
		}
	</style>
</head>
<body>
	<div style="height: 100px;width: 100%;border: solid 1px black"></div>
	<div>
		我
		<div class="test" >是</div>
		<div class="test" >inline</div>
		值
		<br/>
		我是inline值
	</div>
	
</body>
</html>

在这里插入图片描述
解决方法有两种：

不用回车等空白字符
设置父属性font-size: 0px；这样的话就可以把空白字符设置为0px，当然，子元素要重新设置font-size属性

<!DOCTYPE html>
<html>
<head>
	<style>
		.test{
			display: inline;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div style="height: 100px;width: 100%;border: solid 1px black"></div>
	<div style="font-size: 0px;">
		我
		<div class="test" >是</div>
		<div class="test" >inline</div>
		值
		<br/>
		我是inline值
	</div>
	
</body>
</html>

在这里插入图片描述

二、block

此元素将显示为块级元素，此元素前后会带有换行符。block元素width，height，padding，margin属性都会起作用，

<!DOCTYPE html>
<html>
<head>
	<style>
		.test{
			display: block;
			width: 200px;
			height: 200px;
			padding: 20px;
			margin: 20px;
			border: solid 1px black;
			line-height: 250px;
		}
	</style>
</head>
<body>
	<div style="height: 100px;width: 100%;border: solid 1px black"></div>
	<div>
		我是<div class="test" >inline</div>值
	</div>
	
</body>
</html>

在这里插入图片描述

三、inline-block

inline-block结合了inline和block的特点：

使元素变为行内元素，与其它行内元素共享一行，不会换行。可以看到，设置了line-hight属性后对一整行都起作用
width和height属性都会起作用
padding属性可以正常生效
margin属性正常生效

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<style>
		.test{
			display: inline-block;
			width: 200px;
			height: 200px;
			background: yellow;
			padding: 50px;
			border: solid 1px black;
			margin: 50px;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div style="height: 100px;width: 100%;border: solid 1px black"></div>
	<div>
		我是<div class="test" >inline</div>值
	</div>
	
</body>
</html>