你知道我們平時在CSS中寫的 都是相對於誰嗎?

2021-09-05 12:20:06 字數 989 閱讀 6516

出至:

紅色是相對父盒子,黃色是相對盒子自身

名稱屬性

說明定位類

position:static

不存在在定位功能上的%值

position:absolute

%的參照物是祖先元素中存在定位的元素

position:relative

%的參照物是自身的寬高

position:fixed

%的參照物便是視窗

position:sticky

盒子模型

width,height

%的參照物是父盒子

margin,padding

%的參照物是父元素

border-width

不允許輸入%值

border-radius

%的參照物是自身的寬高

背景background-size

%的參照物盒子自身的寬高

background-position

不是參照原盒子的寬高值,而是原盒子的寬高值減去背景的寬高值所得到的剩餘值

transform

translate translate3d()

照物是自身的寬高

translatez()

賦予百分比的值是無意義的

transform-origin

%的參照物是父元素

scale()

傳入的引數是一般是浮點數,指的是相對於元素本身放大或縮小的比例

zoom

既可以是浮點數,也可以是%,指的是相對於元素本身放大或縮小的比例

字型font-size

參照父盒子的字型大小

line-height

它的屬性值是乙個無單位的數字,那麼最後的結果便是這個數字與該元素字型大小的乘積。

如果我們的值是%,最後的結果是給定的百分比值乘以元素最後計算出的字型大小。

text-indent

如果設定的是%,則參照的是父元素的width

這些Spring中的設計模式,你都知道嗎?

設計模式作為工作學習中的枕邊書,卻時常處於勤說不用的尷尬境地,也不是我們時常忘記,只是一直沒有記憶。spring作為業界的經典框架,無論是在架構設計方面,還是在 編寫方面,都堪稱行內典範。好了,話不多說,開始今天的內容。spring中常用的設計模式達到九種,我們舉例說明 又叫做靜態工廠方法 stat...

你可能不知道的BFC在實際中的應用

bfc是塊級格式化上下文,它的乙個令人熟知的運用是雙飛翼布局或者兩列布局。但其實它在其它地方也有很巧妙的運用。我把研究的心得記錄下來,供以後開發時參考,相信對其他人也有用。參考資料 mdn塊格式化上下文 為什麼bfc可以解決margin疊加問題?bfc 乙個我們容易忽視掉的布局神器 觸發bfc的元素...

你不一定知道的CSS中字型的相關知識

字型族 serif,sans serif,monospance,cursive 網頁中使用較少 fantasy 花體 字型族是一類字型,而不是特定字型,如 monaco字型屬於monospace 等寬字型族 simsun字型屬於serif 襯線字型 對於網頁中具體的字型,這裡是microsoft y...