1、前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？

結(jié)構(gòu)層（由 HTML 或 XHTML 之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建）、表現(xiàn)層（由CSS控制）、行為層（Javascript 語言和 DOM 主宰的領(lǐng)域）

2、啥子是css內(nèi)聯(lián)式，外聯(lián)式，嵌入式?

內(nèi)聯(lián)式就是樣式的屬性內(nèi)容直接跟在將要修飾的html標(biāo)記里，如：
<div style=”height:30px;font-size:12px;”></div>
外聯(lián)式就是通過<link href=”my.css” type=”text/css” rel=”stylesheet”/> 或者 @import url(my.css); 方式引入css
嵌入式就是用<style type=”text/css”></style>方式把CSS直接寫在網(wǎng)頁中

3、去掉鏈接的虛線框方法

a{blr:expression(this.onFocus=this.blur());}/*只支持IE，過多使用效率低 */
a:focus{outline:none;}//FF下
其實(shí)這里還不算全部的解決方法，另篇文章里我COPY來了一份網(wǎng)上別人總結(jié)出來的方法，可以點(diǎn)這里查看

4、a鏈接的順序

l-v-f-h-a 既：link-visited-focus-hover-active 這里可能大家很少用到的就是focus，這個(gè)其實(shí)也是一種鏈接狀態(tài)，就是當(dāng)你在鍵盤上按Tab鍵時(shí)獲得焦點(diǎn)的那個(gè)鏈接的即時(shí)狀態(tài)，遺憾的是ie并不支持（ie中按Tab鍵顯示的效果為a:active時(shí)的狀態(tài)），只有在FF,Opera等瀏覽器下才能看到效果。就經(jīng)常性我們就會(huì)用成L-V-H-A，這個(gè)東西其實(shí)還真有點(diǎn)不好記，好多人覺得老是混淆特別是那個(gè)A，這里有高人把它比如成“由愛生恨” Love Hate（LV-HA），哈哈 好記了吧！

5、css hack

*: IE6-7
_: IE6
\0: IE8-9
\9: IE6-9
!important: FF、IE7-9

CSS HACK書寫順序:先寫FF等非IE瀏覽器所需樣式，其次寫IE8所需樣式，接著是IE7的，再接著才是IE6的！

6、list-style-type 在ie6、ie7中不顯示的解決

解決方法是給項(xiàng)目符號(hào)騰空間，代碼：li{margin-left:25px;}

7、在IE9和FF中如何改變選擇文本顏色和背景色

::selection { background:色值;color:色值; } /*Ie9+,Webkit,Opera9.5+*/
::-moz-selection { background:色值;color:色值; } /*Mozilla Firefox*/

8、如何關(guān)閉iOS中鍵盤自動(dòng)大寫

在iOS中，當(dāng)虛擬鍵盤彈出時(shí)，默認(rèn)情況下鍵盤是開啟首字母大寫的功能的，移動(dòng)版本webkit為input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關(guān)閉鍵盤默認(rèn)首字母大寫

9、table中word-wrap:break-word;失效怎么解決

在table加上
word-wrap:break-word;
;

10、IE6雙邊距

display:inline;

11、如何解決IE6及更早瀏覽器下當(dāng)li內(nèi)部元素是定義了display:block的內(nèi)聯(lián)元素時(shí)底部產(chǎn)生空白的問題？

BUG重現(xiàn)：
a,span{display:block;background:#ddd;}

如上代碼，IE6及更早瀏覽器每個(gè)li內(nèi)部的內(nèi)聯(lián)元素底部都會(huì)產(chǎn)生空白。解決方案是給li內(nèi)部的內(nèi)聯(lián)元素再加上zoom:1

12、如何解決IE7及更早瀏覽器下子元素相對(duì)定位時(shí)父元素overflow屬性的auto|hidden失效的問題？

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

如上代碼，在IE7及更早瀏覽器下你會(huì)看到div的滾動(dòng)條將無法工作。解決方案是給div也設(shè)置相對(duì)定位position:relative

13、如何清除圖片下方出現(xiàn)幾像素的空白間隙？

方法1：
img{display:block;}

方法2：
img{vertical-align:top;}除了top值，還可以設(shè)置為text-top | middle | bottom | text-bottom，甚至特定的和 值都可以

方法3：
#img{font-size:0;line-height:0;}#img為img的父元素

14、如何讓文本垂直對(duì)齊文本輸入框？

input{vertical-align:middle;}

15、為什么Standard mode下IE無法設(shè)置滾動(dòng)條的顏色？

將原來設(shè)置在body上的滾動(dòng)條顏色樣式定義到html標(biāo)簽選擇符上即可

16、如何使文本溢出邊界不換行強(qiáng)制在一行內(nèi)顯示？

設(shè)置容器的寬度和white-space為nowrap即可，其效果類似<nobr>標(biāo)簽

17、如何使文本溢出邊界顯示為省略號(hào)？

（此方法Firefox5.0尚不支持）：

首先需設(shè)置將文本強(qiáng)制在一行內(nèi)顯示，然后將溢出的文本通過overflow:hidden截?cái)?，并以text-overflow:ellipsis方式將截?cái)嗟奈谋撅@示為省略號(hào)。

18、如何使連續(xù)的長字符串自動(dòng)換行？

word-wrap的break-word值允許單詞內(nèi)換行

19、如何讓已知高度的容器在頁面中水平垂直居中？

20、如何讓未知尺寸的圖片在已知寬高的容器內(nèi)水平垂直居中？

#test是img的祖父節(jié)點(diǎn)，p是img的父節(jié)點(diǎn)。Know More：未知尺寸的圖片如何水平垂直居中

21、如何設(shè)置span的寬度和高度（即如何設(shè)置內(nèi)聯(lián)元素的寬高）？

要使內(nèi)聯(lián)元素可以設(shè)置寬高，只需將其定義為塊級(jí)或者內(nèi)聯(lián)塊級(jí)元素即可。所以方法非常多樣，既可以設(shè)置display屬性，也可以設(shè)置float屬性，
或者position屬性等等。

22、如何給一個(gè)元素定義多個(gè)不同的css規(guī)則？

.a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}

<div class=”a b”>測試1</div>
<div class=”a c”>測試2</div>

多個(gè)規(guī)則之間使用空格分開，并且只有class能同時(shí)使用多個(gè)規(guī)則，id不可以

23、如何讓某個(gè)元素充滿整個(gè)頁面？

24、如何讓某個(gè)元素距離窗口上右下左4邊各10像素？

25、如何容器透明，內(nèi)容不透明？

方法1：

原理是容器層與內(nèi)容層并級(jí)，容器層設(shè)置透明度，內(nèi)容層通過負(fù)margin或者position絕對(duì)定位等方式覆蓋到容器層上

方法2：

高級(jí)瀏覽器直接使用rgba顏色值實(shí)現(xiàn)；IE瀏覽器在定義容器透明的同時(shí)，讓子節(jié)點(diǎn)相對(duì)定位，也可達(dá)到效果

26、為什么2個(gè)相鄰div的margin只有1個(gè)生效？

.box1{margin:10px 0;}
.box2{margin:20px 0;}

<div class=”box1″>box1</div>
<div class=”box2″>box2</div>

本例中box1的底部margin為10px，box2的頂部margin為20px，但表現(xiàn)在頁面上2者之間的間隔為20px，
而不是預(yù)想中的10+20px=30px，結(jié)果是選擇2者之間最大的那個(gè)margin，我們把這種機(jī)制稱之為“外邊距合并”；
外邊距合并不僅僅出現(xiàn)在相鄰的元素間，父子間同樣會(huì)出現(xiàn)。

簡單列舉幾點(diǎn)注意事項(xiàng):
外邊距合并只出現(xiàn)在塊級(jí)元素上；
浮動(dòng)元素不會(huì)和相鄰的元素產(chǎn)生外邊距合并；
絕對(duì)定位元素不會(huì)和相鄰的元素產(chǎn)生外邊距合并；
內(nèi)聯(lián)塊級(jí)元素間不會(huì)產(chǎn)生外邊距合并；
根元素間不會(huì)產(chǎn)生外邊距合并（如html與body間）；
設(shè)置了屬性overflow且值不為visible的塊級(jí)元素不會(huì)與它的子元素發(fā)生外邊距合并；

27、如何在文本框中禁用中文輸入法？

input,textarea{ime-mode:disabled;}

ime-mode為非標(biāo)準(zhǔn)屬性，寫該文檔時(shí)只有IE和Firefox支持

來自：www.