CSS配置偵錯利器–Firefox Page Inspector 3D檢視
0 |
對CSS幼幼班學生(敝人在下小弟我)而言,"為什麼這團CSS設定會產生這樣的效果"常常是個謎,尤其在處理大小、位置議題,面對層層相套的容器,外加不同margin與padding,混搭height、inline-hight跟font-size相輝映,最後還得考量CSS繼承闗係,結果往往叫人目炫神迷不知所以。
基本上IE的Dev Tools及Chrome的開發者工具都能剖析各元素的CSS設定、繼承套用計算,但Firefox的Page Inspector有個神奇的3D檢視功能,解構容器階層關係時尤其火力強大,廢話不多說,有圖有真相:
Comments
Be the first to post a comment