HTML代碼中的表示位置是通過元素的CSS樣式屬性進行設置的。通過CSS樣式屬性,我們可以控制元素在瀏覽器界面中的位置和大小。
/*使用CSS樣式屬性定位元素*/ /*設置元素距離左側位置為150px*/ left: 150px; /*設置元素距離頂部位置為50px*/ top: 50px; /*設置元素距離右側位置為100px*/ right: 100px; /*設置元素距離底部位置為20px*/ bottom: 20px;
在使用CSS樣式屬性時,我們還可以通過設置元素的position屬性來決定元素的定位方式。position屬性有以下幾種取值:
- static:默認值,元素在文檔流中靜態地位置,跟其他元素緊密排列。
- relative:相對定位,根據自身所在位置來進行定位調整。
- absolute:絕對定位,相相對于父級元素進行調整。
- fixed:固定定位,相對于瀏覽器窗口進行調整,不會隨頁面滾動而變化位置。
/*使用position屬性定位元素*/ /*相對于文檔左上角位置偏移150px向右,50px向下*/ position: relative; left: 150px; top: 50px; /*相對于父級元素的位置偏移150px向右,50px向下*/ position: absolute; left: 150px; top: 50px; /*相對于瀏覽器窗口位置偏移150px向右,50px向下*/ position: fixed; left: 150px; top: 50px;
通過以上CSS樣式屬性的設置,我們可以輕松掌控元素在HTML中的位置和大小,實現各種布局效果。
上一篇鏈接點擊前點擊后 css
下一篇針對ie6css