css 調試方法總結

標籤：style   blog   http   使用   檔案   2014   

本總結不斷更新，主要記錄本人調試過程中所終結的經驗與方法。

畢竟本人不是做瀏覽器前端的，所以如有不詳敬請見諒。

css關係到介面的美觀，有時候功能實現了。介面確醜到沒人用，終歸還是一件失敗的產品，所有好的產品不僅需要實用的功能，更加需要貼心美觀的外觀。

1.如果遇到整體布局工整，個別布局位移的。

可以使用瀏覽器取道位移的組件（放大鏡），然後得到應用到這個組件的css檔案中的css效果進行修改即可，如所示： 

可以再右邊擷取到css樣式，以及css詳細資料：

查看到樣式後，還可以看到對應樣式所屬於的檔案，找到這個檔案再進行樣式修改即可。

以及css詳細資料：

如上右圖所示：

這裡可以觀測到這個組件的大小：寬：177+10＋10，高：18+8+8

組件的內邊距：padding：10

組件的邊界：border：組件的邊界表示這裡外邊就不是這個組件的組成部分了。

如上左圖：

在邊界外邊還可以有外邊界：margin：表示這個組件空出的長和寬