使用CSS最容易出錯的兩大地方！

css大家都很熟悉了，這裡就不多介紹了。

主要介紹一下兩個在日常操作css最容易出錯的地方。

margin-top 與 padding-top

這兩個屬性大家都很熟悉了，margin-top表示外部的上邊距，padding-top表示內部的上邊距。

取值可以是一個具體的值或者一個百分比，如：

margin-top: 10px;
margin-top: 10%;
padding-top: 20px;
margin-top: 20%;

當取值為具體的值時，沒有什麼好說的。當取值為百分比時，需要特別注意：百分比不是相對於父元素的高度的，而是相對於父元素的寬度的。

直接看例子：

用處：可以用來在頁面中顯示  固定寬高比的圖片 。

注意： height 、 top 的百分比取值，總是相對於父元素的 高度 。

這裡提一下，w3cSchool中文站中，關於 margtin-top 的描述是錯誤的。地址在這裡： http://www.w3school.com.cn/css/pr_margin-top.asp

position: fixed
一提到position:fixed，自然而然就會想到：相對於瀏覽器視窗進行定位。

但其實這是不準確的。如果說父元素設定了transform，那麼設定了position:fixed的元素將相對於父元素定位，否則，相對於瀏覽器視窗進行定位。

看例子：

給.parent加上transform:translateY(0)以後，

總結

padding-top、margin-top、padding-bottom、margin-bottom取值為百分比時，是相對於父元素的寬度。

position:fixed，相對於瀏覽器視窗定位。例外：父代元素中，有元素設定了transform，則postion:fixed相對於設定了transform的父元素定位。

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的朋友。

如果有想一起學習web前端，想製作酷炫的網頁，可以來一下我的前端群：731771211，從最基礎的HTML+CSS+JavaScript【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的專案實戰

點選： 加入

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2636178/，如需轉載，請註明出處，否則將追究法律責任。