10.2 盒模型和display属性
10.2.1 两种最基本的盒模型
block类型：这种盒模型的组件默认占据一行，允许通过CSS设置宽度、高度、例如<div>、<p>元素。
inline类型：这种盒模型的组件不会占据一行（默认允许在一行放置多个组件），即使通过CSS设置宽度、
高度也不会起作用。例如<span>、<a>元素。
10.2.2 none值
display属性可指定为none值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面控件也会释放。
与此类似的还有visibility属性，该属性也可用于设置目标对象是否显示。与display属性不同，当通过visibility
隐藏某个HTML元素后，该元素占用的页面空间依然会被保留。visibility属性的两个常用值为visible和hidden，
分别用于控制目标对象的显示和隐藏。
10.2.3 inline-block盒模型
CSS还提供了一种inline-block盒模型，通过为display属性设置inline-block即可实现这种盒模型，这种盒模型是
inline模型和block模型的综合体：inline-block盒模型的元素既不会占据一行，同时也支持通过width、height指定
宽度及高度。
在默认情况下，多个inline-block盒模型的组件将会采用底端对齐方式，为了让多个inline-block盒模型的组件在顶端
对齐，为他们增加vertical-align:top样式即可。
10.2.4 inline-table盒模型
在默认情况下，<table>元素属于block盒模型，也就是说，该元素默认占据一行，并且不允许它的左边和右边出现其他内容。
CSS为<table>元素提供了一个inline-table盒模型，这个盒模型允许表格通过width、height设置宽度和高度，而且允许
它的左边、右边出现其他内容。
为了控制表格与前、后内容垂直对齐，可以通过添加vertical-align属性来实现，设置该属性为top，这表明让该表格与前、后
内容顶端对齐；设置该属性为bottom，这表明让该表格与前、后内容底端对齐。
7月18号=》226页-230页,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/duzuoyan/p/3856201.html
