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，这表明让该表格与前、后内容底端对齐。