[html5入门-18]浅谈html5布局中的overflow和display的用法

作为页面布局中两个常用的标签，overflow和display在我的学习中经常用到，本文总结了两者各自的用法。

一．Overflow的用法

在W3C标准中，overflow表示当内容溢出元素框时的处理，它具有hidden，scroll，auto，visible和inherit四个属性值，默认值为visible，各属性值描述分别如下

Hidden：内容会被修剪，并且其余内容是不可见的。

Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

Visible：默认值。内容不会被修剪，会呈现在元素框之外。

Inherit：规定应该从父元素继承 overflow属性的值。

举例说明：

	
		
		
		
	
	
		
北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。

		
北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。

		
北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。

		
北风卷地白草折，胡天八月即飞雪。 忽如一夜春风来，千树万树梨花开。 散入珠帘湿罗幕，狐裘不暖锦衾薄。 将军角弓不得控，都护铁衣冷难着。
	

分别给div1到div4的overflow设置了hidden，scroll，auto，visible四个属性值得到了不同的结果，在实际应用中可以利用这些值来显示需要展示给读者的内容。

一．Display的用法

在W3C标准中，display规定元素应该生成的框的类型，它具有多个属性值，常用的有none，block，inline，inline-block等，默认值为inline。

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。

举例说明：

	
		
		
		
	
	
		
div1
		
div2
		
div3
		
div4
		span5
	

从结果可以看出设置display值为none的div1不显示，值为inline的div2变成行内（内联）标签，设置宽高不再显示，而是有内容撑开，且设置值为inline-block的div3紧跟div2后面，而同样设置值为inline-block的div4也跟div3成了一行，设置display值为block的span5却成了块级标签独占一行，宽度和高度显示出来了。