1-面試題-html+css(前端常見面試題帶答案 )
HTML+CSS常見面試題目
1. 對WEB標準以及W3C的理解與認識?
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性;
定製這些標準主要是為了提高網頁載入速度，便於開發。同時這也是一種商業手法，目的是讓製造商重視並重新定位規範，在新的瀏覽器和網路裝置中完全地支援那些規範，有利於整個行業的發展。
2. xhtml和html有什麼區別?
HTML
3. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範(html/Xhtml)一般為嚴格過度基於框架的html文件。
加入XMl宣告可觸發，解析方式更改為IE5.5擁有IE5.5的bug。
4. 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div ph1 h2 h3 h4 form ul
行內元素:a b br i span input select
Css盒模型:內容，border,margin，padding
5. CSS引入的方式有哪些? link和@import的區別是?
內聯內嵌外鏈匯入
區別：同時載入
前者無相容性，後者CSS2.1以下瀏覽器不支援
Link 支援使用javascript改變樣式，後者不支援。
6. CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標籤選擇符類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先順序高
7. 前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html（作用：）表示層
8. css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9. 你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?
Ie(Ie核心) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10. 說出幾種IE6BUG的解決方法
1.雙邊距BUG float引起的使用display
2.3畫素問題使用float引起的使用dislpay:inline-3px
3.超連結hover點選後失效使用正確的書寫順序link visited hover active
4.Iez-index問題給父級新增position:relative
5.Png 透明使用js程式碼改
6.Min-height最小高度!Important 解決’
7.select 在ie6下遮蓋使用iframe巢狀
8.為什麼沒有辦法定義1px左右的寬度容器(IE6預設的行高造成的，使用over:hidden,zoom:0.08line-height:1px)
9.ie 6 不支援!important
11. img標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是用文字代表。
Title 為該屬性提供資訊
12. 描述cssreset的作用和用途。
Reset重置瀏覽器的css預設屬性瀏覽器的品種不同，樣式不同，然後重置，讓他們統一
13. 解釋csssprites，如何使用，他的優點是什麼？
Css 精靈把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
14. 瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型渲染模式的不同
使用window.top.document.compatMode 可顯示為什麼模式
15. 你如何對網站的檔案和資源進行優化?期待的解決方案包括：
檔案合併
檔案最小化/檔案壓縮
使用CDN託管
快取的使用
16. 什麼是語義化的HTML?
直觀的認識標籤對於搜尋引擎的抓取有好處
17. 清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both(理論上能清楚任何標籤，，，增加無意義的標籤)
2.使用overflow:auto(空標籤元素清除浮動而不得不增加無意程式碼的弊端,,使用zoom:1用於相容IE)
3.是用afert偽元素清除浮動(用於非IE瀏覽器)先來簡單講講after，所謂after，就是指標籤的最後一個子元素的後面。於是呢，我們可以用CSS程式碼生成一個具有clear屬性的元素，其中的關鍵樣式就是content了。或許您從網上看到的content裡面的內容是”.”一個點，我了很多次，貌似隨便寫什麼東西都沒有問題。
18. css hack
<!--[if IE 6]--><![end if]-->
_marging\\IE 6
+margin\\IE 7
Marging:0auto \9 所有Ie
Margin \0\\IE 8
19. 超連結訪問過後hover樣式就不出現的問題?
解決方法是改變CSS屬性的排列順序:L-V-H-A。
例子：<style>
a:link{ background:red;}
a:hover{background:blue;}
a:visited{background:green;}
a:action{background:white;}
</style>
20. IE6的雙倍邊距BUG
給當前元素新增樣式，使當前元素不為塊，如：display:inline;display:list-item這樣在元素浮動的時候就不會在ie6下面產生雙倍邊距的問題了.
拓展：這個bug是如何出現的？
當塊級元素有浮動樣式的時候，給元素新增margin-left和margin-right樣式，在ie6下就會出現雙倍邊距。
21. 為什麼FF下文字無法撐開容器的高度?
因為標準瀏覽器中固定高度值的容器是不會象IE6裡那樣被撐開的。
想固定高度，又想能被撐開需要怎樣設定呢？
辦法就是去掉height設定min-height:200px;
這裡為了照顧不認識min-height的IE6
可以這樣定義：
{
height:auto!important;
height:200px;
min-height:200px;
}
22. 為什麼web標準中IE無法設定滾動條顏色了?
滾動條的顏色一直以來就只支援IE的瀏覽器，就是IE瀏覽器的專有屬性，火狐等都是不支援的。
解決辦法是將body換成html。
注：原來樣式<style type="text/css">
body { scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff; }
</style>
23. 為什麼無法定義1px左右高度的容器?
IE6下這個問題是因為預設的行高（大概10px）造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px。
24. 怎麼樣才能讓層顯示在FLASH之上呢?
解決的辦法是給FLASH設定透明。
25. 怎樣使一個層垂直居中於瀏覽器中?
針對於已知大小元素。首先使用百分比的絕對定位，此時只是層的左上角頂點居於瀏覽器中間，要想使層的中心位於瀏覽器中間就要使層的左上角頂點向上、向左移動高度、寬度的一半（與外補丁負值的方法，負值的大小為其自身寬度高度除以二）。
例子：
<styletype="text/css">
.center{ background:red;
width:200px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -100px;}
</style>
</head>
<body>
<div class="center">層垂直居中於瀏覽器</div>
</body>
26. firefox巢狀div標籤的居中問題的解決方法
假定有如下情況：
<div id="a"style="width:200px;border:1px solid red;text-align:center;">
<div id="b"style="background-color:blue;width:30px;"> </div>
</div>
如果要實現b在a中居中放置，一般只需用CSS設定a的text-align屬性為center。這樣的方法在IE裡看起來一切正常；但是在Firefox中b卻會是居左的。
解決辦法就是除了需要在a中設定text-align屬性為center之後，還需要設定b的橫向margin為auto。例如設定b的CSS樣式為：margin: 0auto;
所以，設定如下就可以實現居中：
<div id="a"style="width:200px;border:1px solid red;text-align:center;">
<div id="b"style="background-color:blue;width:30px;margin:0auto"> </div>
</div>
27. 網頁製作中有哪幾種樣式設定方法？各有何特點？
28. 使用者自定義的類和ID在定義和使用時有什麼區別?
定義時，類以英文形式的句點“.”為起始標誌，ID以“#”為起始標誌;使用時，類可以在一個頁面中被多個不同的元素引用，而ID在一個頁面中只能被引用一次。
29. float元素的父元素不能指定clear屬性？
如果對float的元素的父元素使用clear屬性，周圍的float元素佈局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
30. 簡述一下src與href的區別。
href 表示超文字引用（hypertext reference），在 link和a 等元素上使用。src 表示來源地址，在 img、script、iframe 等元素上。 src 的內容，是頁面必不可少的一部分，是引入。href 的內容，是與該頁面有關聯，是引用。區別就是，引入和引用。
31. 知道的網頁製作會用到的圖片格式有哪些？
主流的用於網頁的影象格式有JPG,PNG,GIF等 JPG：壓縮率高，檔案小，最常用。 PNG：支援無失真壓縮，色彩損失小，保真度高，檔案稍大。 GIF：支援動畫顯示，但只支援256色顯示，目前已經被FLASH大量取代。
32. 每個HTML檔案裡開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器的解析器，用什麼文件型別，規範來解析這個文件。
33. 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
行內元素有：ab span img input select strong（強調的語氣） 塊級元素有：div ul olli dl dt dd h1 h2 h3 h4…p。內容(content)、填充(內邊距padding)、邊框(border)、邊界(外邊距margin)。
拓展：知名的空元素：<br><hr><img><input><link><meta>
34. css層疊是什麼？介紹一下。
CSS是Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用於（增強）控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。
35. position值都有哪些，css3都有哪些新內容…
absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 relative 生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。 static預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者宣告）。inherit規定應該從父元素繼承 position 屬性的值。
Css3屬性：
第 1 選擇器第 2 RGBA和透明度第 3 多欄佈局第 4 多背景圖第 5 Word Wrap第 6 文字陰影第 7 @font-face屬性第 8 圓角(邊框半徑)第 9 邊框圖片第 10 盒陰影第 11 盒子大小第 12 媒體查詢第 13 語音
36. 在新視窗開啟連結的方法是？
target=_bank
拓展：為什麼要清除浮動？
CSS的float屬性，作用就是改變塊元素物件的預設顯示方式，HTML標籤設定了float屬性之後，它將不再獨自佔據一行，從而可以實現多個元素同處一行的效果，所以需要在樣式定義的後面進行清除浮動。
通過指定CSS屬性float的值,從而使元素向左或向右浮動,然後由後繼元素向上移動以填補前面元素的浮動而空出的可用空間。CSS的float屬性，作用就是改變塊元素物件的預設顯示方式，HTML標籤設定了float屬性之後，它將不再獨自佔據一行，從而可以實現多個元素同處一行的效果。Float的功能很強大，但是如果沒有好好掌握而使用很可能會成為你除錯樣式的噩夢。
使用Float樣式，如果沒有清除浮動，那麼有浮動元素的父元素容器將無法自動撐開。如果沒有清除內部浮動，此時會導致浮動的父元素無法自動撐開到本身應有的高度。也就是說：當一個元素是浮動的，如果沒有關閉浮動時，其父元素不會包含這個浮動元素，因為此時浮動元素從文件流中脫離。