块级元素特性:
- 宽高可控(可以设置宽高)
- 元素独占一行
行内元素特性:
- 宽高不可控
- 与其他元素共享一行
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元素设置的宽高无效