首页 > 代码库 > 7月18号=》226页-230页

7月18号=》226页-230页

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