7月18號=》226頁-230頁

標籤：width   html   c   div   line   htm   

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，這表明讓該表格與前、後內容底端對齊。