使用css時，可能會出錯的兩個地方

本文首發於公衆號：符合預期的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
這裏只有乾貨，符合你的預期