css 調(diào)試方法與經(jīng)驗總結(jié)
發(fā)布時間:2014-06-15 11:59:22 作者:佚名
我要評論

主要記錄本人調(diào)試過程中所終結(jié)的經(jīng)驗與方法,css關(guān)系到界面的美觀,有時候功能實現(xiàn)了。界面確丑到?jīng)]人用,終歸還是一件失敗的產(chǎn)品
本總結(jié)不斷更新,主要記錄本人調(diào)試過程中所終結(jié)的經(jīng)驗與方法。
畢竟本人不是做瀏覽器前端的,所以如有不詳敬請見諒。
css關(guān)系到界面的美觀,有時候功能實現(xiàn)了。界面確丑到?jīng)]人用,終歸還是一件失敗的產(chǎn)品,所有好的產(chǎn)品不僅需要實用的功能,更加需要貼心美觀的外觀。
1.如果遇到整體布局工整,個別布局偏移的。
可以使用瀏覽器取道偏移的組件(放大鏡),然后得到應(yīng)用到這個組件的css文件中的css效果進(jìn)行修改即可,如下圖所示:
可以再右邊獲取到css樣式,以及css詳細(xì)信息:
查看到樣式后,還可以看到對應(yīng)樣式所屬于的文件,找到這個文件再進(jìn)行樣式修改即可。
以及css詳細(xì)信息:
如上右圖所示:
這里可以觀測到這個組件的大?。簩挘?77+10+10,高:18+8+8
組件的內(nèi)邊距:padding:10
組件的邊界:border:組件的邊界表示這里外邊就不是這個組件的組成部分了。
如上左圖:
在邊界外邊還可以有外邊界:margin:表示這個組件空出的長和寬
畢竟本人不是做瀏覽器前端的,所以如有不詳敬請見諒。
css關(guān)系到界面的美觀,有時候功能實現(xiàn)了。界面確丑到?jīng)]人用,終歸還是一件失敗的產(chǎn)品,所有好的產(chǎn)品不僅需要實用的功能,更加需要貼心美觀的外觀。
1.如果遇到整體布局工整,個別布局偏移的。
可以使用瀏覽器取道偏移的組件(放大鏡),然后得到應(yīng)用到這個組件的css文件中的css效果進(jìn)行修改即可,如下圖所示:

可以再右邊獲取到css樣式,以及css詳細(xì)信息:
查看到樣式后,還可以看到對應(yīng)樣式所屬于的文件,找到這個文件再進(jìn)行樣式修改即可。

以及css詳細(xì)信息:

如上右圖所示:
這里可以觀測到這個組件的大?。簩挘?77+10+10,高:18+8+8
組件的內(nèi)邊距:padding:10
組件的邊界:border:組件的邊界表示這里外邊就不是這個組件的組成部分了。
如上左圖:
在邊界外邊還可以有外邊界:margin:表示這個組件空出的長和寬
相關(guān)文章
簡要總結(jié)CSS編程中的響應(yīng)式設(shè)計
這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-03- 這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開發(fā)者的共識,樹立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下2015-07-09
- 這篇文章主要介紹了10個必備的CSS技巧總結(jié),隨看隨記,敬請收藏~需要的朋友可以參考下2015-06-29
- 在阿里云首頁看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請問這樣的意義是什么呢?研究了一番,原來是清除浮動用的,下面來總結(jié)下清除浮動2014-06-17
- 多瀏覽器兼容一直都是前端開發(fā)者需要考慮的重要問題之一,由于一直困擾著大家,因此本文整理了一些個人的實戰(zhàn)經(jīng)驗與大家分享下,看過之后感覺不錯的可以收藏哦2013-10-30
CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)
進(jìn)行css布局的同時,沒有足夠的基礎(chǔ)知識是不可能的,本文為初學(xué)者整理了一些,經(jīng)常使用的css屬性,感興趣的朋友可以參考下,或許有所幫助2013-10-05- 本篇文章是對,CSS3中的動畫效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-09
- 本文整理了ie中div的垂直居中問題、margin加倍的問題、ie6下頁面min-width/height與max-width/height問題、ie6 3px bug及ie6捉迷藏的問題等等,感興趣的朋友可以參考下哈2013-04-01
CSS(Cascading Style Sheet)級聯(lián)樣式表常用術(shù)語總結(jié)
CSS(Cascading Style Sheet )級聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來詳細(xì)為您介紹,需要了解的朋友可以參考下2013-01-03- 本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識,本文介紹的非常詳細(xì),具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2022-09-29