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；是为了消除空白符

转载于:https://www.cnblogs.com/1500418882qqcom/p/9884268.html