display中文为显示的意识，显而易见它的功能就是为了控制页面元素显示方式

display中为我们提供了很多属性，其中最常见的有：

• none
• block
• inline
• inline-block

none属性

none属性代表着元素不会被显示

比如很多网站的顶部导航栏都会有二级菜单，只有当我们的鼠标移动或点击时二级菜单才会显示出来。这是就可以使用到display:none这个属性。

一个简单的例子：

HTML代码：

	
		
		
		
	
	
		

			

				

					一级菜单
					
                 			
						
1
						
2
						
3
						
4
						
5
					
				
				
			
		
	
	

CSS代码：

.button ul>li{
	border: 1px solid cadetblue;	
}

.button ul>li>ul{
	display: none;/*二级菜单默认隐藏*/
}

.button ul>li:hover>ul{
	display: block;/*当鼠标移动到一级菜单时，二级菜单出现/
}

block属性

block的意思为“阻塞”，它的功能是使元素变为块级元素

所谓块级元素就是指每个元素的类容单独占据一行，我们常见的

、

、

、

等都是块级元素

inline属性

inline属性的功能是把元素变为行内元素

所谓行内元素就是指元素不会单独占据一行，它只会占据自己规定的高和宽。我们在网站中常见的瀑布流样式就是使用的行内元素。、等都属于行内元素。
但是行内元素的大小是固定的，我们无法设置其大小，这时我们还需要使用display:block将其变为块级元素后才可以改变它的大小。这是元素既有行类元素的特性又可以为其设定大小。

inline-block属性

inline-block属性就是同时有块级元素和行内元素的属性

inline-block就与上面的为inline属性设置为block属性的功能一样，就是使元素就可以为其设置大小又可以具有行内元素的特征。

网页设计CSS行内元素块级元素