css盒子模型,絕對定位和相對定位

2021-10-05 03:05:28 字數 674 閱讀 9515

position:absolute | relative | fixed | static | inherit

absolute:絕對定位;相對於除了static定位以外的第乙個父元素進行定位;

relative:相對定位;生成相對定位的元素,相對於其正常位置進行定位。

fixed:固定定位;生成絕對定位的元素,相對於瀏覽器視窗進行定位。

static:預設值;

inherit:繼承

絕對定位:

相對於元素最近的已經定位的祖先元素定位,如果沒有,則相對於body進行定位;

已經脫離文件流,可以通過z-index控制元素的覆蓋關係;

絕對定位會隱式改變元素的display型別,同元素設定float:left | right;時一樣,都會隱式將元素的display設定為inline-block;

但是float在ie6下的雙邊距bug就是用display:inline; 來解決的。

相對定位:

相對定位是相對於元素在文件中的初始位置

在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間,移動元素會導致它覆蓋其它框。

position:relative不會隱式改變display的型別。

CSS 盒子模型,絕對定位和相對定位

一 盒子模型 標準模式和混雜模式 ie 在標準模式下瀏覽器按照規範呈現頁面 在混雜模式下,頁面以一種比較寬鬆的向後相容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。css盒子模型具有內容 content 填充 padding 邊框 border 邊界 margin 這些屬性。我們...

CSS 盒子模型,絕對定位和相對定位

一 盒子模型 標準模式和混雜模式 ie 在標準模式下瀏覽器按照規範呈現頁面 在混雜模式下,頁面以一種比較寬鬆的向後相容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。css盒子模型具有內容 content 填充 padding 邊框 border 邊界 margin 這些屬性。我們...

HTMLCSS小白 盒子模型,絕對定位和相對定位

doctype html title text css width 100px height 100px background color red border 10px solid green padding 100px 150px padding top 200px 乙個值是正方形 兩個值 是 ...