使用fire?

Tags: 網頁, 元素,

對於一般的網頁設計師來說,firebug是一個很強大的插件,今天小漁又發現了它的一個新的功能,可以查看元素的定位方式和具體值大小,今天小漁就來告訴大家

方法/步驟

首先,我們需要下載好firebug插件。一般我是在fire fox瀏覽器中直接下載插件的。安裝好後,會在瀏覽器的右上角出現一個小蟲的標記。

使用fire bug查看網頁元素的定位方式和具體值

我們隨意打開一個網頁,按下鍵盤上的F12鍵,或者是點擊小蟲使其顏色變亮

使用fire bug查看網頁元素的定位方式和具體值

變亮之後,我們就會看到瀏覽器的下方出現關於網頁的一些選項,這些都是fire bug為我們呈現的。

使用fire bug查看網頁元素的定位方式和具體值

接下來,我們需要在fire bug面板中的html代碼中,找到一個在頁面中顯示出來的元素。

使用fire bug查看網頁元素的定位方式和具體值

我們選中元素之後,可以看到豎線的右半部分由樣式、計算出的樣式、佈局、DOM、事件四個選項,默認顯示的是我們選中元素的樣式。

使用fire bug查看網頁元素的定位方式和具體值

接下來,我們需要將右側的面板切換到佈局選項中,可以看到,佈局選項中將我們選定的元素以盒模型的形式展現出來,左下角寫明瞭定位方式為static。

使用fire bug查看網頁元素的定位方式和具體值

我們在選中其父級元素,可以看到佈局選項中提示定位方式是absolute,並且有距左邊和上邊的距離。

使用fire bug查看網頁元素的定位方式和具體值

注意事項

小漁原創首發,有問題歡迎留言交流哦

相關問題答案