本文首發於公衆號:符合預期的CoyPan
寫在前面
css大家都很熟悉了,這裏就不多介紹了。本文主要介紹一下兩個在日常的工作中可能會出錯的地方。
margin-top 與 padding-top
這兩個屬性大家都很熟悉了,margin-top
表示外部的上邊距,padding-top
表示內部的上邊距。
取值可以是一個具體的值或者一個百分比,如:
margin-top: 10px;
margin-top: 10%;
padding-top: 20px;
margin-top: 20%;
當取值爲具體的值時,沒有什麼好說的。當取值爲百分比時,需要特別注意:百分比不是相對於父元素的高度的,而是相對於父元素的寬度的。
w3c標準如下:
直接看例子:
用處:可以用來在頁面中顯示 固定寬高比的圖片。
注意:height
、top
的百分比取值,總是相對於父元素的高度。
這裏提一下,w3cSchool中文站中,關於margtin-top
的描述是錯誤的。地址在這裏:http://www.w3school.com.cn/css/pr_margin-top.asp
position: fixed
一提到position:fixed
,自然而然就會想到:相對於瀏覽器窗口進行定位。
但其實這是不準確的。如果說父元素設置了transform
,那麼設置了position:fixed
的元素將相對於父元素定位,否則,相對於瀏覽器窗口進行定位。
w3c的官方標準如下:
看例子:
給.parent
加上transform:translateY(0)
以後,
總結
-
padding-top
、margin-top
、padding-bottom
、margin-bottom
取值爲百分比時,是相對於父元素的寬度。 -
position:fixed
,相對於瀏覽器窗口定位。例外:父代元素中,有元素設置了transform
,則postion:fixed
相對於設置了transform
的父元素定位。
寫在後面
本文總結了平時css
開發中需要稍微注意一下的,可能會出錯的兩個問題。符合預期。
歡迎關注我的公衆號: 符合預期的CoyPan
這裏只有乾貨,符合你的預期