出至:
紅色是相對父盒子,黃色是相對盒子自身
名稱屬性
說明定位類
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...