A. web前端的點擊更換樣式問題
jQuery——將點擊變換的樣式類寫好，點擊的時候用addClass()添加上去，然後用siblings()查找它的兄弟元素，removeClass()將類去掉...有思路了嗎？
B. 如何解決前端開發中遇到的這些問題
前端開發在做項目過程中，要主要規范w3c書寫和各個瀏覽器的兼容性。
C. web前端開發常遇到的問題有哪些
前端和後端沒有可比性
前端的開發，如果沒有總體的設計思路，會成為一種碎片似地程序，一個效果一坨代碼，一個功能一灘腳本，一個需求片邏輯，我曾經遇到過，因為ue調整，把整個前端的代碼除了核心數據處理函數保留，其餘的全部修改的情況。基本上前端的開發，處於dom操作，數據處理，數據交互三部分，如果合理的分配這三部分的功能，那麼前端的代碼就很容易擴展和調整。可惜現在優秀的前端開發者很少，因為前端門檻很低。
那麼接下來我回答挑戰所在：真正的前端開發的挑戰，還在於開發者的思路，兼容性，布局，css js都不是問題，問題在於如何合理的組織語言邏輯，如果正確抽象出需求中的模塊，在如何用代碼處理。清楚的用代碼表達出思路，清楚的寫好注釋，給後續維護者一個可閱讀的思路。
前端的改動量，是後端的數倍，前端沒有絕對，只有跟隨需求不停的修改。
D. 網頁製作樣式問題
常見瀏覽器兼容性問題與解決方案
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什麼瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。
在學習瀏覽器兼容性之前，我想把前端開發人員劃分為兩類：
第一類是精確按照設計圖開發的前端開發人員，可以說是精確到1px的，他們很容易就會發現設計圖的不足，並且在很少的情況下會碰到瀏覽器的兼容性問題，而這些問題往往都死瀏覽器的bug，並且他們製作的頁面後期易維護，代碼重用問題少，可以說是比較牢固放心的代碼。
第二類是基本按照設計圖來開發的前端開發人員，很多細枝末節差距很大，不如間距，行高，圖片位置等等經常會差幾px。某種效果的實現也是反復調試得到，具體為什麼出現這種效果還模模糊糊，整體布局十分脆弱。稍有改動就亂七八糟。代碼為什麼這么寫還不知所以然。這類開發人員往往經常為兼容性問題所困。修改好了這個瀏覽器又亂了另一個瀏覽器。改來改去也毫無頭緒。其實他們碰到的兼容性問題大部分不應該歸咎於瀏覽器，而是他們的技術本身了。
文章主要針對的是第一類，嚴謹型的開發人員，因此這里主要從瀏覽器解析差異的角度來分析兼容性問題。
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 *
備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
瀏覽器兼容問題二：塊屬性標簽float後，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備註：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標簽（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
問題症狀：IE6、7和遨遊里這個標簽的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標簽，設置display:block後採用float布局，又有橫行的margin的情況，IE6間距bug
問題症狀：IE6里的間距比超過設置的間距
碰到幾率：20%
解決方案：在display:block;後面加入display:inline;display:table;
備註：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
瀏覽器兼容問題五：圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備註：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題症狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
瀏覽器兼容問題七：透明度的兼容CSS設置
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什麼會出現兼容問題以及怎麼去解決這些兼容問題。
/* CSS hack*/
我很少使用hacker的，可能是個人習慣吧，我不喜歡寫的代碼IE不兼容，然後用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨遊；其他（IE8 chrome ff safari opera等）
◆IE6認識的hacker 是下劃線_ 和星號 *
◆IE7 遨遊認識的hacker是星號 *
比如這樣一個CSS設置：
height:300px;*height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px；
IE7和遨遊也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先順序相同且想沖突的屬性設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的。
E. 前端項目上線出現bug可以打斷點調試嗎
可以 按住F12 進入Sources 找到你需要調試的頁面 在左側點一下 就可以打斷點 如下圖
F. 做了一份網頁前端，載入的時候，如果是第一次訪問，樣式都會載入錯誤，刷新一次或者以後再訪問都沒問題
這個是空間伺服器的問題，一般這種情況說明你的空間商非常不給力，速度太慢了，呵呵，建議你換個好點空間商，買好一點的空間啊，便宜沒好貨
G. web前端工程師工作中遇到難以解決的問題
1）.margin-top,margin-bottom不能正常顯示時
一.有時會遇到外層中的子層使用margin-top不管用的情況；這里我們需要在子層的前後加上一個
div{height:0;overflow:hidden;}
例
CSS樣式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解決方法：在P標簽前後各加2個空的div：<divstyle="height:0;overflow:hidden"></div>
二.網頁中頭部，中部，底部的居底部有時給個margin-bottom:10px;不管用也是要給個清除屬性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加個<div></div>
2）.div層中高度自適應問題
網頁前端科技人員在設計網頁時不可能知道客戶在要他們自己的網站內容頁里加多少文字或圖片內容
這時我們就不能規定div層的高度，為此應寫成min-height:200px;height:auto!important;height:
200px;overflow:visible;這樣ie7,ff,ie6瀏覽器的高度自適應問題就解決了，這些在
http://www.xueshengshu.com/網站中用到最多了。
3）.div層中子層的居底部對齊問題
div中的定位問題有很多也很麻煩，但弄懂了就OK了，在一個大的div層中如何讓子層的內容居底部
對齊就涉及到了position定位問題；
例
div層#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子層#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近寫的網站中http://www.msgc.net.cn/就用到了
4）.div層中清除clear屬性的一小部分應用
在div中一個大的層裡面有很多子層，若是加上邊框在ie7、ie6中或許會正常顯示，但是在ff中可能
只會成一條線了，此時在最外層的後面加上<div style="clear:both"></div>或者設 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}後在每個浮動外框調用wrapfix；http://www.xueshengshu.com學生書網里用到最多了。
5）.解決IE8下div移位、錯位等兼容性問題
在<head>標簽後面的第一句話加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.單行文字居中與字體樣式問題
在div中一個層中只有一行文字，要讓這層中的文字居中，可設line-height的高度和層的高度一樣，注意這一層中的文字不能換行，此外，設了line-height時再給定字體樣式font:bold 14px "宋體";這時要把font:bold 14px "宋體";放在line-height的前面，否則字體樣式不顯示文字也不居中；或者將font:bold 14px "宋體";改成font-size:16px;font-weight:bold;font-family:"宋體";就OK了。
7）.滑鼠滑上去的特殊效果
往往為了達到顯眼的效果，我們會寫到一些好看的效果，方法一在樣式表中寫：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul標簽中調用即可方法二：在樣式表中寫上：.hover img{filter:alpha(opacity=40);}在div中調用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不對問題
今天在div中給定了高度為1px,其它瀏覽器顯示正常，可是ie6中顯示的高度就不對了，這時我給樣式表中加了個font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的問題
在div大框子里用了ul作導航的時候為了合ul層居中顯示，設ul的樣式表為margin-top:-15px不起作用了，此時應該將div大框設定高度後給個line-height與height一樣的高度，ul層就自動居中了。
例如http://www.hopes-home.cn/main.aspx
10）.ff中margin-top有時不起作用的問題
今天頭暈腦漲的把這問題給解決了，這幾天寫標網都有累似問題，可是一直都是換個寫法解決的，今天的這個辦法也不只可行試試還是可以的，在一個div外框層中給個寬度例如，#div_wrap{width:280px;height:100%;}
其次在這個框子里設一個.div_top{widh:100%;font:bold12px "宋體";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最後在這個div_center里套個ul li時經常會在ff中出問題，也就是在div_top與div_center中莫名的多了幾個像素的空格，這時給ul樣式表設個display:inline-table即可；
H. 前端頁面的樣式寫的很亂，會給後台交接時帶來麻煩嗎還有，後台套頁面的意思是不是就是交接還是另有
看你公司開發流程，如果你只寫 靜態頁面 （html + css）,寫完了就交接給後台了。過程中需要修改要看你們文件有無同步備份（svn , git）,有你就更新自己本地文件修改再上傳，沒有就去別人電腦改，寫樣式最好還是要有條理性，寫好注釋，如果怕影響可和後台說明不要在源文件修改樣式，只覆蓋樣式。
I. mvc 調用前端頁css樣式不好使
可以在前端查看你的頁面對應路徑，然後對應後台看看有沒有css文件
J. 前端開發過程中遇到過什麼困難
前端開發過程中遇到的困難還是很多
1、面試中前端開發過程中遇到的困難這個問題主要是相看面試者是不是有獨立解決問題的能力及解決問題的方案以及工作中的的一些兩點
2、遇到這樣的問題可以說出一個自己解決的比較完美的問題，如：vue不適合做cms，因為單頁面應用對seo很不友好，解決的方法就是：我們使用nuxt技術，在保證使用vue語法開發的同時，也使用了服務端渲染技術保證了seo效果，這個過程突出了自己的學習nuxt等新技術的能力
3、另外也是有很多實際的開發問題不好解決，的但是那些自己解決不好的問題不適合 在面試的過程中說的