详细说明css display属性中经常见的4个属性值用法（代码案例）
[摘要]我们在进行网页前端开发的时候，为了使网站在视觉上显得更加美观，效果更加丰富，css的强大属性自然是功不可没。那么这里就要提到 一个我们在网页前端开发的时候常常使用的属性，css display属性。...
我们在进行网页前端开发的时候，为了使网站在视觉上显得更加美观，效果更加丰富，css的强大属性自然是功不可没。那么这里就要提到 一个我们在网页前端开发的时候常常使用的属性，css display属性。所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。而在css display属性中经常被用到，也是最常见的几种属性值：none、block、inline、inline-blockt。接下来我们就通过具体的代码实例来一一详解css display属性中最常见的属性值用法。
一：display ：none，设置元素不会显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 200px;
height: 200px;
margin:50px auto;
}
ul li {
float: left;
}
span {
width: 30px;
height: 30px;
color: #fff;
background: red;
margin: 5px;
text-align: center;
line-height: 30px;
}
.a1{
display: none;
}
</style>
</head>
<body>
<div class="demo">
<p>数字2不会显示出来</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span class="a1">2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>以上代码的效果图如下：
display ：none，设置元素不会显示，而且会使元素现实的空间也不会保留下来。但有另外一个 visibility: hidden， 是保留元素的空间的。详细了解，看阅读 css visibility属性。
二：display:block， 将元素显示为块级元素
将元素显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 500px;
height: 200px;
margin:50px auto;
}
ul li {
float: left;
}
span {
display:block;
width: 30px;
height: 30px;
color: #fff;
background: red;
margin: 5px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="demo">
<p>span元素定义了宽与高，宽与高都显示为30px</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>
