CSS除錯技巧五則,兼談提問的藝術

2021-12-25 07:37:13 字數 3563 閱讀 6967

css開始進入布局領域,並逐漸開始廣泛地被使用,越來越多的設計師轉向css,然而隨著使用的逐步深入,會發現使用css的乙個問題是,懂得越多,遇到的問題就越多。在實際製做**的時候,總會遇到以前沒有碰到過的新問題。就好像我們學了十幾年的英語,單詞、語法都背了一大堆,但是真到用的時候,還是總遇到不會說的東西。

實際上這還是學習途中的乙個階段,算是成長的煩惱。畢竟每解決乙個問題,功力就會精進一層。因此,除了徹底把css的原理搞清楚之外,就要盡可能多地實踐,解決實際問題,這樣終歸是可以把問題都解決的。

在實踐中,最關鍵的問題就是如何除錯,也就是在遇到頁面表現和預想的不一樣的時候,怎麼找到問題的關鍵。當然,前提是你對你寫的**基本上是清楚的,否則談不上除錯。

對於css而言,本質就是大大小小的盒子在頁面上擺放,你不是設計師,而是排字工人,你眼中看到的不是文字,不是影象,就是一堆盒子!你要考慮的就是盒子與盒子之間的關係!標準流?

並列?上下?巢狀?

間隔?背景?浮動?

絕對?相對?定位基準?

等等等等……

歸根到底,任何排版上的錯誤,都是由於你認為某個盒子應該在的位置和瀏覽器認為的位置不同,所以如果你本身就是瀏覽器,一切錯誤都不會出現。

因此,每當你發現表現頁面不如你意的時候,比如希望在左邊跑到右邊了,希望在一行的變成兩行了等等,都首先明確每個盒子的範圍,這時你可以通過臨時給盒子設定背景色,或者設定乙個1畫素邊框的方法,清楚地了解瀏覽器認為和盒子範圍和你認為的盒子範圍是否一致。如果可以設定背景色最好使用背景色,因為設定邊框會改變布局,這就好像我們使用溫度表測量溫度,前提是認為溫度表本身不會影響被測物體的溫度,實際上物理學告訴我們,任何兩個物體都是相互影響的,即所謂測不准原理。但有時對於複雜的頁面,背景色可能無法看出範圍,還是需要使用邊框來完成這項任務,但你要排除增加的臨時邊框引入新的問題的可能性。

當某個盒子的範圍不是你所希望的,恭喜你,你已經找到錯誤所在了,接下來就是分析為什麼瀏覽器要把它放在這裡,而不是按照你的意願去放置?你經過這一步仔細計算,你的所有**都是符合css規範的,那麼你需要確認這是瀏覽器錯了,而不是你錯了。不過你應該相信,99%的可能是你粗心算錯了,1%的可能是瀏覽器有錯誤。

就好像你回憶一下,上學時參加過的所有考試,老師確實有時會把你答對的題目判錯,但是這種概率很低。

經過上一步的排查,你已經懷疑瀏覽器有問題了,那麼就需要確認這一點。而這時你的網頁很可能很複雜,內容很多,各種因素互相影響,都會干擾你的判斷。解決方法就是把僅和你有問題的部分相關的**提取出來,或者把無關**全部刪除,總之目的就是盡可能找到出現問題的最小**集合,這樣你才能找到問題的本質原因。

事實上,很多情況下,從乙個複雜的網頁一點點刪除**的過程中,你的問題就解決了,這樣你一定要注意,刪了哪些**,你的問題就解決了,這就是問題的原因,如果你是個聰明人,一定要把這個問題真正搞懂,不要只管結果,不問為什麼。遇事多問幾個為什麼,你的提高會快得多。

事實上,除錯能力是非常重要的,任何人在實際工作中,肯定都會遇到做出來的效果和自己希望的不一致的情況,這時就要看除錯能力了。

就好像,家裡停電了,你一定會首先出門看看鄰居家的是不是有電,這樣就判斷出問題出在自己家裡,還是整個樓停電了。如果整個樓都停電了,那就只有等了;如果只是自己家停電了,那就要再分析一下是不是**短路了(比如水灑在電線上了),或者有什麼電器過載了(比如你把家裡的所有空調、熱水器、電火鍋這些東西都開啟了),等等,這實際上就是在確定故障點,道理和作頁面是完全類似的,第一步就是縮小範圍,只是你可能沒有意識到。因此,你可以把生活中的一些道理,移植過來,很多問題就好解決了。

(如果一出問題,就找物業的人來修,應該是比較適合做領導的人,呵呵。)

關於firefox和ie的差異問題,已經談過很多了,

讀者的問題是:

「我學css乙個多月了,以前網頁製作的基礎還不錯,感覺css很好用,我正在用它做乙個**,剛開始有些地方遇上不少麻煩,不過還好,都解決了,經過半個月主頁製作好了,感覺很滿意,可是遇是了乙個更麻煩的問題,我一直通過ie瀏覽器來檢視的,可我今天放到firefox裡亂的好厲害,這是怎麼回事啊,是不是有些瀏覽器裡還不支援css的一些功能啊,還是自己製作過程中的問題,我買了精通css div這本書,主要是通過它來學習的,感覺很不錯,不過現在看來有些基礎了,有沒有更好的書啊,例項多一些,麻煩您和我說說這些情況,真是不明白,謝謝!」

首先,對於瀏覽器的相容問題,這裡給大家兩個建議,供大家參考:

1:當乙個效果在firefox和ie6中顯示的不一樣時,一般來說firefox顯示的是「正確」的效果,這裡說的正確,並不是指主觀希望的效果達到了就是正確效果,而是說按照真正的css規則,應該顯示的效果,叫作正確的效果。也就是說,如果firefox中顯示的效果和希望的效果吻合,而與 ie顯示不吻合,那麼是ie有錯誤的可能性更大,而反之則說明很可能是為了遷就ie6的錯誤,而寫了錯誤的**。

那麼為什麼不能以ie為標準,當作是ie的效果是正確的呢?這是因為,css的規則本身是嚴格符合邏輯的,是可以計算和**的,而ie中的很多錯誤是沒有道理的,無法**的,因此,用乙個錯誤修正了另乙個錯誤,在區域性看起來可能效果是正確的,但是很可能在其它地方,或者更大範圍內帶來不可預知的麻煩,從而嚴重影響效率。因此,比較好的做法是以firefox作為正確的效果,讓ie想辦法來適應它。

2:測試的時候,不要在乙個瀏覽器中完全做好,再用另乙個瀏覽器測試。例如,對於乙個很複雜的頁面,如果首先在firefox中製作,已經完全測試好了,然後用ie檢視,可能很多地方都是混亂的,此時就針對ie進行一系列調整,等調整好了,回到firefox檢視,又亂了,如此往復,結果可想而知。

因此,從空白頁面開始,每做一小步,就同時在各種瀏覽器中檢視,一旦發現顯示效果不同,立即查詢原因,尋找解決辦法,因為每次增加的**都很少,這樣就很容易找出原因,從而做到最後就可以同時滿足各種瀏覽器了。

總之原則就是,firefox對css規範遵守的最好,除錯的時候先用firefox除錯,然後再使網頁相容ie;其次,不要在一種瀏覽器完全做好以後,再用瀏覽器除錯,而是每一步都保證在各瀏覽器中這個正確顯示。

這裡要說的是兩個非常方便的工具,他們都是以firefox的外掛程式形式存在的,分別是「web developer toobar」和「firebug」。當然,他們都不能向傻瓜相機一樣,只要按一下快門,就告訴你問題出在**。他們的作用都是可以幫助你盡可能方便地了解瀏覽器是如何看待你的**的。

比如,通過他們,可以方便地檢視每乙個盒子的範圍,不需要你在人為地設定邊框了,通過firebug,可以實時動態地修改css屬性設定,這都可以大大提高你除錯的效率。這裡暫時沒有篇幅來講解這兩個工具的用法了,有興趣的讀者可以先查一查相關的介紹。

網際網路出現了,這個偉大的傢伙給我們帶來了太多的方便。有了google,我們可以尋找答案,有了各種**論壇,我們可以去向別人請教,這都是我們學習的最好途徑。但是有一點,這也需要一些提問的技巧和藝術。

這裡給您的建議就是,在提問之前,一定要按照前面說的幾點,自己親自研究過你的問題,你的問題可以用一兩句話很具體地說明,可以配有簡潔的**,使看到你的問題的人,可以很容易理解你的問題,並「重現」你的問題。這一點非常重要,千萬不要把大段大段的**,貼到某個論壇上,那樣你得到幫助的機會會變得小得多。你要相信,熱心人固然是很多的,但是熱心到能夠花很多時間一點點分析你的大段大段**,然後大海撈針一樣地找出某個地方存在問題的熱心人就不多了。

事實上,這些功課是你應該提前做好的,你至少應該盡可能縮小問題的範圍,到乙個合理的程度。網際網路、google、論壇都是工具,也僅僅是乙個工具,誰能用得好,誰就能獲得更快的提高,關鍵還是要看使用工具的主人。

門窗清潔技巧五則

作者 中國建築金屬結構 上半月 2014年第03期 第1招鋼木門清潔保養要做全 由於看起來高貴,買起來實惠,時下許多家庭的房間門使用的多是鋼木門。鋼木門是以鋼板為結構,門扇四周由鋼板扣合或使用焊接而成,門框表面做免漆處理或者油漆處理而成的門。由於表面是漆,裡面是鋼,主婦們往往容易被表象所迷惑,而不知...

Excel實用技巧五則

出處 作者 發布時間 2006 8 15 自定義模板 進入c documentsandsettings 使用者名稱 templates資料夾下,在空白處右擊,選擇 新建 microsoftexcel工作表 新建乙個excel檔案,並把它命名為雙擊檔案,然後對其中的字型等作一些個性設定。以後在 資源管...

程式除錯技巧

1 除錯技巧 除錯之前,先要靜態查錯。1.看演算法是否正確 其實應該是在編碼之前做的工作 2.看有沒有筆誤 如i寫成j 除錯一般是分幾個步驟的。先把開關r,s,q,i開啟!1.建立測試資料 技巧見後面的文章 可以抄樣例資料 2.執行程式 3.如果結果正確,轉1 測試新的資料 或結束 4.根據結果先判...