對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

Post a comment