定位和布局流丶錨點

2021-10-04 13:44:30 字數 1579 閱讀 6365

定位屬性:

position

屬性值:

static

absolute

relative

包含塊的設定:

給父元素新增position:relative; 形成參照物

給子元素新增position:absolute 進行位置的移動。

定位的層次關係:

z-index

絕對定位與相對定位區別:

1:參照物:

絕對定位參照物:已經新增定位的父元素

相對定位參照物:自身預設的位置

2:布局流:

絕對定位不佔據空間,破壞布局流

相對定位佔據空間,不破壞布局流

position:

static

absolute

relative

position:fixed;  固定定位

a: 參照物:瀏覽器視窗。

b: 不佔據空間,脫離布局流。

讓乙個元素在瀏覽器視窗左右上下居中?

第一種方法:

position:fixed;

left:50%;top:50%;

margin-left:-元素寬度一半;

margin-top:-元素高度的一半;

第二種方法:

position:fixed;

left:0;right:0;

top:0;bottom:0;

margin:auto;

粘性定位:

position:sticky;

執行邏輯:

預設情況下:當瀏覽器視窗滾動條不滾動,當前元素沒有超出整個瀏覽器視窗的時候

執行的position:relative;如果元素超出當前視窗則應用的position:fixed;

position:

static 靜態定位

relative  相對定位

absolute  絕對定位

fixed     固定定位

sticky    粘性定位

脫離布局流:

position:absolute

position:fixed;

注:如果塊狀元素沒有設定寬度的時候,新增position:absolute || position:fixed

出現寬度被內容撐開

錨點:超連結的一種。

作用:能實現在同乙個頁面內實現不同位置的跳轉。

描述:讓錨點繫結id名稱的元素回到瀏覽器視窗的最頂端。

《標籤 id="">

預設情況下塊狀元素:

當width不設定的時候,或者width:100%;當前元素的寬跟隨父元素的變化。

高度自適應第一種情況:

當元素height不去設定或者是設定成height:auto;

元素的高度是被內容撐開的。

需求1:當內容增加的時候,內容能把容器撐開。

需求2:當內容極少或者沒有內容的時候,讓容器保持乙個最小高度。

最小高度的設定:

min-height:;

能滿足1:當內容增加的時候,內容能把容器撐開。

能滿足2:當內容極少或者沒有內容的時候,讓容器保持乙個最小高度。

定位與錨點

只能用定位來實現層疊的效果 absolute預設為瀏覽器視窗 position static absolute relative fixed inherit 1.static 預設定位方式 2.absolute 絕對定位,將物件從文件流中完全脫離出來,使用left right top bottom進...

定位錨點透明

position定位屬性和屬性值 定位元素的層級屬性 包含塊的概念和應用 錨點連線的語法和應用場景 透明屬性的應用 擴充套件 marquee 滾動字幕 position定位屬性 告訴瀏覽器這是定位屬性 語法 position static absolute relative fixed 取值 1 s...

垂直對齊和定位 錨點

1.垂直對齊 vertical align 預設值baseline 居中middle 行高的頂端top 文字的頂線 text top 行高的底部bottom 文字的底線 text bottom 必須是行內塊元素或設定了display inline block2.定位position 1 absolu...