HTML中display属性

最新推荐文章于 2024-02-16 19:45:23 发布

圆脸脸lxj

最新推荐文章于 2024-02-16 19:45:23 发布

阅读量1.4k

点赞数

分类专栏： HTML 网页设计

本文链接：https://blog.csdn.net/yuan_xiangjun/article/details/115391292

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

网页设计

11 篇文章 0 订阅

订阅专栏

块级元素特性：

宽高可控（可以设置宽高）
元素独占一行

行内元素特性：

宽高不可控
与其他元素共享一行

display属性：

控制元素的显示和隐藏。
块级元素和行内元素的转变。

属性：属性值
none:设置元素不会被显示
inline:元素会被显示为内联元素
block:元素会被显示为块级元素
inline-block:行内块元素

案例1：将音乐播放的控件通过display属性进行隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			audio{ display: none;}/* 隐藏播放控件*/
		</style>
	</head>
	<body>
		<!-- controls是播放控件，autoplay设置自动播放，loop设置循环播放-->
		<audio src="1.mp3" controls="controls" autoplay="autoplay" loop="loop">该浏览器不支持audio标签</audio>
	</body>
</html>

案例2：通过display进行元素之间的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* audio{ display: none;}
			/* 块状元素转行内元素 */ 
			div{ border: 2px red solid;
			     display: inline;
				 width: 400px;
				 height: 400px;
				 }
			/* 行内元素转块状元素 */
			span{ border: 2px double blue;
			     display: block;
				 width: 400px;
				 height: 400px;}
		</style>
	</head>
	<body>
		<!-- <audio src="1.mp3" controls="controls" autoplay="autoplay" loop="loop">该浏览器不支持audio标签</audio> -->
		
		<!-- 块状元素div转换为行内元素-->
		<div>我是div元素，是块状元素</div>
		<hr/>
		<!-- 行内元素span转换为块状元素 -->
		<span>我是span元素，是行内元素</span>
	</body>
</html>

运行如下：可以看到span元素设置的宽高有效，div元素设置的宽高无效
在这里插入图片描述

圆脸脸lxj

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
HTML中display属性

display属性：控制元素的显示和隐藏。块级元素和行内元素的转变。属性：属性值none:设置元素不会被显示inline:元素会被显示为内联元素block:元素会被显示为块级元素inline-block:行内块元素案例1：将音乐播放的控件通过display属性进行隐藏该浏览器不支持audio标签案例2：通过display进行元素之间的转换 <!-- 块状元素div转换为行内元素--&gt
复制链接

扫一扫