演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background: green;
width: 200px;
height: 80px;
display: none; /* div块级元素隐藏 */
}
.one{
display: block; /* 显示div块级元素 */
}
span{
background: red;
display: none; /* 隐藏span行级元素 */
}
.two{
display: inline; /* 显示span行级元素 */
}
</style>
</head>
<body>
元素显示隐藏
1,元素隐藏display: none;
页面结构任然存在
元素所占空间会被隐藏
2,元素显示
display:block 显示块级
display:inline 显示行级
display:inline-block 显示行内块级
<div class="one">我要自学1</div>
<span class="two">我要自学2</span>
</body>
</html>