IT兄弟連 HTML5教程 和頁面布局有關的CSS屬性

• 2019 年 12 月 10 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103452129

使用DIV+CSS對網頁進行標準化布局前，除了要掌握盒子模型，還要掌握定位和浮動兩個比較重要的概念，它們可以控制在頁面上排列和顯示元素的方式。一個盒子是裝內容的區塊，如果多個盒子組合在一起使用，再通過定位和浮動的設置，就可以對整個頁面進行布局。如圖1所示為由多個盒子布局的頁面，每個虛線框代表一個盒子模型。

圖1 多個盒子定義頁面布局

雖然CSS的樣式屬性非常多，但實際參與頁面布局的屬性其實很少。CSS的定位屬性應用得非常廣泛，可以控制元素的平面或空間位置，以及高度、寬度和可見性。也可以使用CSS的display屬性改變生成區塊的類型，例如將display屬性設置為none，則這個區塊框及其所有內容就不再顯示。通過將display屬性設置為block，可以讓行內元素表現得像塊級元素一樣。常見的參與頁面布局的CSS屬性如表1所示。

表1 常見的參與頁面布局的CSS屬性

在CSS中提供了相對和絕對兩種定位方法。所謂相對定位是指讓操作的元素在相對其他元素的位置上進行偏移，而絕對定位是指讓操作的元素參照原始文檔進行偏移。使用表2-2中部分定位屬性的例句程式碼如下所示：