HTML和CSS是構建網頁的兩個重要語言,而網頁的定位則是如何控制元素在頁面中的位置。在HTML和CSS中,要想控制元素的位置,我們需要使用特定的語法和屬性。
CSS中最基本的定位屬性是position。position有以下幾個取值:static、relative、absolute、fixed。
div{ position: static; }
static是默認值,即沒有任何定位效果。如果想控制元素的位置,需要使用其他取值。
div{ position: relative; left: 20px; top: 50px; }
relative會根據當前位置進行相對移動,使用left和top屬性可以分別向左和向上移動元素。
div{ position: absolute; left: 20px; top: 50px; }
absolute是按照絕對位置進行定位,left和top屬性和relative是一樣的用法,只是相對的基準點變成了父元素。
div{ position: fixed; left: 20px; top: 50px; }
fixed是不會隨著頁面滾動而移動的絕對位置,使用left和top屬性可以控制元素的絕對位置。
在HTML中,元素的位置也可以用表格來控制,可以使用table、tr、td等元素來實現橫向、縱向的位置控制。
第一行第一列 | 第一行第二列 |
第二行第一列 | 第二行第二列 |
表格可以設置邊框大小、背景色、行列合并等屬性,可以靈活控制元素的位置和樣式。
下一篇html css3濾鏡