css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)
發(fā)布時(shí)間：2014-06-15 11:59:22 作者：佚名 
我要評(píng)論
我要評(píng)論主要記錄本人調(diào)試過(guò)程中所終結(jié)的經(jīng)驗(yàn)與方法，css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品
本總結(jié)不斷更新，主要記錄本人調(diào)試過(guò)程中所終結(jié)的經(jīng)驗(yàn)與方法。
畢竟本人不是做瀏覽器前端的，所以如有不詳敬請(qǐng)見(jiàn)諒。
css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品，所有好的產(chǎn)品不僅需要實(shí)用的功能，更加需要貼心美觀的外觀。
1.如果遇到整體布局工整，個(gè)別布局偏移的。
可以使用瀏覽器取道偏移的組件（放大鏡），然后得到應(yīng)用到這個(gè)組件的css文件中的css效果進(jìn)行修改即可，如下圖所示：
可以再右邊獲取到css樣式，以及css詳細(xì)信息：
查看到樣式后，還可以看到對(duì)應(yīng)樣式所屬于的文件，找到這個(gè)文件再進(jìn)行樣式修改即可。
以及css詳細(xì)信息：
如上右圖所示：
這里可以觀測(cè)到這個(gè)組件的大?。簩挘?77+10＋10，高：18+8+8
組件的內(nèi)邊距：padding：10
組件的邊界：border：組件的邊界表示這里外邊就不是這個(gè)組件的組成部分了。
如上左圖：
在邊界外邊還可以有外邊界：margin：表示這個(gè)組件空出的長(zhǎng)和寬
畢竟本人不是做瀏覽器前端的，所以如有不詳敬請(qǐng)見(jiàn)諒。
css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品，所有好的產(chǎn)品不僅需要實(shí)用的功能，更加需要貼心美觀的外觀。
1.如果遇到整體布局工整，個(gè)別布局偏移的。
可以使用瀏覽器取道偏移的組件（放大鏡），然后得到應(yīng)用到這個(gè)組件的css文件中的css效果進(jìn)行修改即可，如下圖所示：
可以再右邊獲取到css樣式，以及css詳細(xì)信息：
查看到樣式后，還可以看到對(duì)應(yīng)樣式所屬于的文件，找到這個(gè)文件再進(jìn)行樣式修改即可。
以及css詳細(xì)信息：
如上右圖所示：
這里可以觀測(cè)到這個(gè)組件的大?。簩挘?77+10＋10，高：18+8+8
組件的內(nèi)邊距：padding：10
組件的邊界：border：組件的邊界表示這里外邊就不是這個(gè)組件的組成部分了。
如上左圖：
在邊界外邊還可以有外邊界：margin：表示這個(gè)組件空出的長(zhǎng)和寬
相關(guān)文章
簡(jiǎn)要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)
這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計(jì),是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-03- 這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開(kāi)發(fā)者的共識(shí),樹(shù)立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下2015-07-09
- 這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下2015-06-29
- 在阿里云首頁(yè)看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請(qǐng)問(wèn)這樣的意義是什么呢?研究了一番，原來(lái)是清除浮動(dòng)用的，下面來(lái)總結(jié)下清除浮動(dòng)2014-06-17
CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))
多瀏覽器兼容一直都是前端開(kāi)發(fā)者需要考慮的重要問(wèn)題之一，由于一直困擾著大家，因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下，看過(guò)之后感覺(jué)不錯(cuò)的可以收藏哦2013-10-30CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)
進(jìn)行css布局的同時(shí)，沒(méi)有足夠的基礎(chǔ)知識(shí)是不可能的，本文為初學(xué)者整理了一些，經(jīng)常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助2013-10-05深入CSS3 動(dòng)畫(huà)效果的總結(jié)詳解
本篇文章是對(duì),CSS3中的動(dòng)畫(huà)效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-09IE下css常見(jiàn)問(wèn)題總結(jié)及解決
本文整理了ie中div的垂直居中問(wèn)題、margin加倍的問(wèn)題、ie6下頁(yè)面min-width/height與max-width/height問(wèn)題、ie6 3px bug及ie6捉迷藏的問(wèn)題等等，感興趣的朋友可以參考下哈2013-04-01CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語(yǔ)總結(jié)
CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫(xiě)DOCTYPE等文檔類型定義,接下來(lái)詳細(xì)為您介紹，需要了解的朋友可以參考下2013-01-03- 本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2022-09-29