看到CSS利潤率調試

我用下面的CSS樣式調試在我的div和span輪廓的（通常保持註釋）：看到CSS利潤率調試

div { outline: 1px dashed blue } span { outline: 1px dashed green }

雖然顯示的div和跨度和外部邊界給出了與內部對象/文本相關的填充的概念，它無法直觀地顯示分配給相同樣式的邊距在哪裏。我瞭解填充和邊距之間的差異，但我確實需要在構建頁面時能夠看到視覺效果（太多細節，太少關注）。

有沒有什麼辦法可以添加一個外部矩形來顯示樣式的邊距？

來源

2013-03-21 amphibient

爲什麼不使用Firebug或Inspector？ – Blender 2013-03-21 04:53:57

現在檢查tothis並告訴我什麼是problum http://jsfiddle.net/96PjJ/ – 2013-03-21 04:55:35

@RohitAzad他沒有任何問題，他需要方便。 – 2013-03-21 04:57:36

我不知道任何允許保證金邊界外的邊界的屬性，因爲這與邊際的目的不符。 W3's Box Model Explanation

雖然這是早期Web開發中的一項重要技術，但我不能強烈建議您花幾分鐘時間安裝Firebug或熟悉Chrome的開發人員工具或Safari的「檢查」功能等。您只需鼠標通過代碼獲取更多的數據，而不是花費數小時的時間來完成手工調試樣式。

你會愛上它們的！

Firebug特別允許鼠標懸停代碼，它會突出顯示您的主框，顏色編碼的填充和邊距等。一個非常寶貴的工具 - 它甚至比Dreamweaver內置的可視輪廓工具更好。

來源

2013-03-21 04:56:57 BrianHall

我如何看到與Firebug的邊緣？我只是嘗試，但不能 – amphibient 2013-03-21 05:03:28

哦，你只要打開Firebug，點擊HTML選項卡，然後選擇右側的佈局選項卡。它創建了一個漂亮的方框來顯示填充，邊距等，並且支持鼠標懸停突出顯示。點擊或將鼠標懸停在左側的相關html代碼上，它會顯示右側的測量值，並在上面的站點視圖中顯示高亮/顏色代碼。 – BrianHall 2013-03-21 05:07:53

據我所知，沒有。我會建議使用前面提到的Chrome的開發工具或Firebug。用這些工具獲得的一個很好的特性，就是能夠即時操縱DOM。這使得測試放置非常快速和無痛。有時候，如果我試圖放置一個div juuust，我會右鍵單擊該div，選擇檢查此元素，然後查看右側的屬性。您實際上可以調整這些實時並查看頁面中反映的更改。一個很好的訣竅是許多屬性允許你使用向上和向下箭頭鍵來循環它們的值。這使得調整餘裕或餘裕值變得很重要。

來源

2013-03-21 05:05:55

您可以使用我的新工具。將鼠標懸停在頁面中的任何元素上，它會顯示其佈局的所有部分（邊距，邊框，填充等）。

HTML Box Visualizer - GitHub

來源

2016-10-24 06:03:25

看到CSS利潤率調試

回答

相關問題