CSS之-----display属性的常用属性值

最新推荐文章于 2024-04-19 20:41:06 发布

chenlu4447

最新推荐文章于 2024-04-19 20:41:06 发布

阅读量406

点赞数

原文链接：https://my.oschina.net/zhaomin/blog/893785

版权

一、display属性值讲解

none：此元素不会被显示。
block：将元素显示为块级元素，此元素前后会带有换行符。
inline：将元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素，使内联元素具有行内元素的特性。
inherit：规定应该从父元素继承 display 属性的值。

二、代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>display常用属性值测试</title>
		<style>
			body div,body span{
				margin: 10px 0;
			}
			._inline{
				display: inline;
				border:1px solid red;
			}
			._block{
				display: block;
				border: 1px solid blue;
			}
			._inline-block{
				display: inline-block;
				
				border: 1px solid green;
			}
			._none{
				display: none;
			}
			._inherit{
				display: inherit;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		
		<div class="_inline">
			display: inline;将元素会被显示为内联元素，元素前后没有换行符。		
		</div>
		<div class="_inline">
			display: inline;将元素会被显示为内联元素，元素前后没有换行符。		
		</div>
		<span class="_inline-block">
			display: inline-block;行内块元素，使内联元素具有行内元素的特性。
		</span>
		<span class="_block">
			display: block;将元素显示为块级元素，此元素前后会带有换行符。
			<span class="_inherit">规定应该从父元素继承 display 属性的值。</span>
		</span>
		
		<div class="_none">
			此元素不会被显示。			
		</div>
		
		
		
		
	</body>
</html>

转载于:https://my.oschina.net/zhaomin/blog/893785

chenlu4447

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之-----display属性的常用属性值

一、display属性值讲解 none：此元素不会被显示。 block：将元素显示为块级元素，此元素前后会带有换行符。 inline：将元素会被显示为内联元素，元素前后没有换行符。 inline-block：行内块元素，使内联元素具有行内元素的特性。 i...
复制链接

扫一扫