display屬性常用屬性值的理解

1、display：none

　　表示此元素不會被顯示

css;
.first{
　　display: none;
　　width:200px;
　　height:100px;
　　background:yellow;

	}

　　

<div class="first">
         我有display：none屬性，我不會顯示
</div>

　　以上頁面會顯示空白，

2、display：block

　　該屬性會把元素轉換為塊級元素，此元素前后會帶有換行符，因此就可以設置元素的寬高和上下的margin和padding

css：
a{
	display: block;
	width: 100%;
	height: 40px;
	background: yellow;
	}

　　

html：
<a href="">我是行內元素，我不能直接設置寬高</a>

　　頁面顯示：

3、display：inline

　　此元素會被顯示為內聯元素，元素前后沒有換行符，即display:inline的作用即可以將一個塊級元素轉換成行內元素，那么這個塊級元素將不能再設置寬和高以及上下方向的margin和padding。

html：
<div class="second">
	我是塊級元素，我有display：inline屬性，所以我不能設置寬高
</div>

　　

css：
.second{
		display: inline;
		width: 400px;
		height: 100px;
		background: yellow;
	}

　　頁面顯示：

 

 

4、display：inline-block

　　設置了inline-block屬性的元素既具有block元素可以設置width和height屬性的特性，又保持了inline元素不換行的特性

例如ul li a 標簽組合float：left做成的橫向導航用display：inline-block屬性就可以完成：

ul,li,a,*{
		
		list-style: none;
		text-decoration:none;
	}
	li{
		display: inline-block;
		border: thin solid red;
	}

　　

html：
<div>
	<ul>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li><a href="">3</a></li>
		<li><a href="">4</a></li>
	</ul>
</div>
		

　　頁面顯示：

發現元素之間有空白，當給元素添加margin：0；padding：0；時，元素之間的空白還存在，

這時可以將ul中的字符的大小設置位０，那么空白符也就不會存在了，但是這時a的字體大小也會繼承ul的字體大小，就不見了，只需要將a中再設置一個字體不為0的大小覆蓋，就會顯示

css：
ul,li,a,*{
		font-size：0；
		list-style: none;
		text-decoration:none;
	}
	li{
		display: inline-block;
		border: thin solid red;
	}
    a｛
                font-size:15px;
       ｝

　　

html:
<div>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">4</a></li>
		</ul>
	</div>

　　元素之間的空白就會消除

5、display：inherit

　　規定應該從父元素繼承 display 屬性的值

　　例如：

        <div class="parent">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>

　　

css：
.parent{
		display: inline-block;
		font-size: 0; 
		background: #cadafa;
		width: 400px;
		height: 300px;
	}
	.son1{
		display: inherit; 
		background: #eaedac;
		width: 200px;
		height: 100px;
	}
	.son2{
		display: inherit; 
		background: #da5dd8;
		width: 200px;
		height: 100px;
	}

　　頁面顯示：

這里的.parent元素中font-size：0px；是為了消除空白符