CSS定位之 什麼是包含塊?

2021-07-26 15:18:18 字數 852 閱讀 8537

一、包含塊簡單說就是定位參考框或者定位座標參考係,元素一旦定義了定位顯示(相對、絕對、固定)都具有包含塊性質,它所包含的定位元素都將以該包含塊為座標系進行定位和調整。

二、包含塊是視覺格式化模型的乙個重要概念,它與框模型類似,也可以理解為乙個矩形,而這個矩形的作用是為它裡面包含的元素提供乙個參考,元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。

三、原理:乙個元素盒子的位置和大小有時是通過相對於乙個特定的長方形來計算的,這個長方形就被稱之為元素的 containing block。乙個元素的 containing block 按以下方式定義:

1、使用者**選擇根元素作為包含塊(稱之為初始 containing block)。

2、對於其它元素,除非元素使用的是絕對位置,包含塊由最近的塊級祖先元素盒子的內容邊界組成。

3、如果元素有屬性 'position:fixed',包含塊由視口建立。

4、如果元素有屬性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步驟:

a、如果祖先是塊級元素,由祖先的 padding edge 形成。

b、如果祖先是內聯元素,取決於祖先的 direction 屬性。

⑴如果 direction 是 ltr(左到右),祖先產生的第乙個盒子的上、左內容邊界是包含塊的上方和左方,祖先的最後乙個盒子的下、右內容邊界是包含塊的下方和右方。

⑵如果 direction 是 rtl(右到左),祖先產生的第乙個盒子的上、右內容邊界是包含塊的上方和右方,祖先的最後乙個盒子的下、左內容邊界是包含塊的下方和左方。

如果沒有祖先,根元素盒子的內容邊界確定為包含塊。

定位之包含塊

在前端開發中,經常會碰到使用定位的情況,常見的一種情況是將定位的元素的父級也開啟定位,通過參照父級元素來對元素進行定位,然而在實際開發中,情況遠遠不止一種,總的來說,定位元素參照的都是其包含塊,但是情況不同,包含塊也不一樣。首先,解釋一下包含塊,一般來說,根元素 的包含塊 也稱為初始包含塊 由使用者...

css定位 為什麼需要定位

1.浮動可以讓多個盒子一行沒有縫隙排列顯示,經常用於橫向排列盒子。2.定位則是可以讓盒子自由的在某個盒子內移動位置或固定螢幕中的某個位置,並且可以壓住其他盒子。定位組成 定位 將盒子定在某乙個位置,所以定位也是在擺盒子,按照定位的方式移動盒子。定位 定位模式 變偏移 定位模式用於指定乙個元素在文件中...

什麼是重定位

6 1 儲存器的基本概念 主儲存器管理仍然是今天作業系統十分重要的內容 能否合理而有效的使用主存,在很大成度上反映了作業系統的效能,並直接影響到整個計算機系統作用的發揮。6.1.1 儲存器的層次 目前在許多計算機系統中,採用 儲存器結構,即高速緩衝儲存器 主儲存器和外部儲存器。儲存器的比較 從快取記...