web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置

1.CSS元素的显示（display）、可见性（visibility）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

1.1 隐藏元素：display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

①visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

②display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

小实例1： 

	
		
		
		
	
	
	
		
这是一个可见标题
		
这是一个隐藏标题
		
注意，该实例中的隐藏标题不占用空间。
	

小实例2：

	
		
		
		
	
	
	
		
这是一个可见标题
		
这是一个隐藏标题
		
注意，该实例中的隐藏标题仍然占用空间。
	

1.2 更改块元素和内联元素的显示

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

通过display: inline; 可以将块元素的显示更改为内联元素的显示。

通过display: block; 可以将内联元素的显示更改为块元素的显示。

小实例： 

	
		
		
		
	
	
	
		
列表中链接依次水平显示：
		

			
			
百度
			
腾讯
			
阿里巴巴
			
华为
			
京东
		

		
AD Carry
		
		圣枪游侠、战争女神、探险家
		深渊巨口
		
辅助
		
		熔岩巨兽、牛头酋长、魂锁典狱长
		弗雷尔卓德之心
	

1.3 使用表格中的collapse属性隐藏相应的元素

即 visibility: collapse;

小实例： 

	
		
		
		
	
	
	
		

			

				
英文
				
中文
			
			

				
Cat
				
猫
			
			

				
Dog
				
狗
			
			

				
Pig
				
猪
			
		
	

---

2.CSS元素的溢出（overflow）

CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值： （注意：overflow 属性只工作于指定高度的块元素上。）

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2.1 overflow: visible;

	
		
		
		
	
	
	
		

			
这里的文本内容会溢出元素框！！！
			
这里的文本内容会溢出元素框！！！
			
这里的文本内容会溢出元素框！！！
		
	

2.2 overflow: scroll; 和 overflow: hidden;

	
		
		
		
	
	
	
		

			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
		


		

			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。
			
这里的文本内容是可以滚动的，滚动条方向是垂直方向。