css html 黑馬

時間  2019-11-17
標籤 css html 黑馬 欄目 CSS 简体版
原文   原文鏈接

一、你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
IE: trident 內核
Firefox：gecko 內核
Safari:webkit 內核
Opera:之前是 presto 內核，Opera 現已改用 Google Chrome 的 Blink 內核
Chrome:Blink(基於 webkit，Google 與 Opera Software 共同開發)
二、每一個 HTML 文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏
覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
三、Quirks 模式是什麼？它和 Standards 模式有什麼區別
從 IE6 開始，引入了 Standards 模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上
的正確處理達到在指定瀏覽器中的程度。
在 IE6 以前 CSS 還不夠成熟，因此 IE5 等以前的瀏覽器對 CSS 的支持不好， IE6 將對 CSS
提供更好的支持，然而這時的問題就來了，由於有不少頁面是基於舊的佈局方式寫的，而如
果 IE6 支持 CSS 則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的
渲染機制呢？
在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，
尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支，即當某
個參數爲真時，咱們就使用新功能，而若是這個參數 不爲真時，就使用舊功能，這樣就能
不破壞原有的程序，又提供新功能。IE6 也是相似這樣作的，它將 DTD 當成了這個「參數」，
由於之前的頁面你們都不會去寫 DTD，因此 IE6 就假定 若是寫了 DTD，就意味着這個頁面
將採用對 CSS 支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是 Quirks
模式（怪癖模式，詭異模式，怪異模式）。
區別：
整體會有佈局、樣式解析和腳本執行三個方面的區別。
盒模型：在 W3C 標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，
而在 Quirks 模式下，IE 的寬度和高度還包含了 padding 和 border。
設置行內元素的高寬：在 Standards 模式下，給<span>等行內元素設置 wdith 和 height 都
不會生效，而在 quirks 模式下，則會生效。
設置百分比的高度：在 standards 模式下，一個元素的高度是由其包含的內容來決定的，如
果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
margin:0 auto 設置水平居中：使用 margin:0 auto 在 standards 模式下可使元素水平
居中，但在 quirks 模式下卻會失效。
（還有不少，答出什麼不重要，關鍵是看他答出的這些是否是本身經驗遇到的，仍是說都是
看文章看的，甚至徹底不知道。）
四、div+css 的佈局較 table 佈局有什麼優勢？
改版的時候更方便 只要改 css 文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化
「優雅降級」觀點
「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲
「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限
定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無
妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏
覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被
直接忽略。
「漸進加強」觀點
「漸進加強」觀點則認爲應關注於內容自己。
內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有
的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲
一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器
支持 (Graded Browser Support)」策略的緣由所在。
那麼問題來了。如今產品經理看到 IE6,7,8 網頁效果相對高版本現代瀏覽器少了不少圓角，
陰影（CSS3），要求兼容（使用圖片背景，放棄 CSS3），你會如何說服他？
七、爲何利用多個域名來存儲網站資源會更有效？
CDN 緩存更方便
突破瀏覽器併發限制
節約 cookie 帶寬
節約主域名的鏈接數，優化頁面響應速度
防止沒必要要的安全問題
八、請談一下你對網頁標準和標準制定機構重要性的理解。
網頁標準和標準制定機構都是爲了能讓 web 發展的更‘健康’，開發者遵循統一的標準，降
低開發難度，開發成本，SEO 也會更好作，也不會由於濫用代碼致使各類 BUG、安全問題，
最終提升網站易用性。
九、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
sessionStorage （session）中的數據，這些數據只有在同一個會話中的頁面才能訪問
而且當會話結束後數據也隨之銷燬。所以 sessionStorage 不是一種持久化的本地存儲，僅
僅是會話級別的存儲。而 localStorage 用於持久化的本地存儲，除非主動刪除數據，不然
數據是永遠不會過時的。
web storage 和 cookie 的區別
Web Storage 的概念和 cookie 類似，區別是它是爲了更大容量存儲設計的。Cookie 的大小
是受限的，而且每次你請求一個新的頁面的時候 Cookie 都會被髮送過去，這樣無形中浪費
了帶寬，另外 cookie 還須要指定做用域，不能夠跨域調用。
除此以外，Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像 cookie
須要前端開發者本身封裝 setCookie，getCookie。可是 Cookie 也是不能夠或缺的：Cookie
的做用是與服務器進行交互，做爲 HTTP 規範的一部分而存在 ，而 Web Storage 僅僅是爲
了在本地「存儲」數據而生。
十、簡述一下 src 與 href 的區別。
src 用於替換當前元素，href 用於在當前文檔和引用資源之間確立聯繫。
src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在
位置；在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片
和 frame 等元素。
<script src =」js.js」></script>
當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行
完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將
js 腳本放在底部而不是頭部。
href 是 Hypertext Reference 的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）
或當前文檔（連接）之間的連接，若是咱們在文檔中添加
<link href=」common.css」 rel=」stylesheet」/>
那麼瀏覽器會識別該文檔爲 css 文件，就會並行下載資源而且不會中止對當前文檔的處理。
這也是爲何建議使用 link 方式來加載 css，而不是使用@import 方式。
十一、知道的網頁製做會用到的圖片格式有哪些？
png-8，png-24，jpeg，gif，svg。
可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是 Webp。（是否有關注新
技術，新鮮事物）
科普一下 Webp：WebP 格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。
圖片壓縮體積大約只有 JPEG 的 2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook
Ebay 等知名網站已經開始測試並使用 WebP 格式。
在質量相同的狀況下，WebP 格式圖像的體積要比 JPEG 格式圖像小 40%
十二、知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？
微格式（Microformats）是一種讓機器可讀的語義化 XHTML 詞彙的集合，是結構化數據的開
放標準。是爲特殊應用而制定的特殊格式。
優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。（應
用範例：豆瓣，有興趣自行 google）
1三、在 css/js 代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，
一次 js 請求通常狀況下有哪些地方會有緩存處理？
答案：dns 緩存，cdn 緩存，瀏覽器緩存，服務器緩存。
1四、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優
化這些圖片的加載，給用戶更好的體驗。
圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端
的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先
下載。
若是圖片爲 css 圖片，可使用 CSSsprite，SVGsprite，Iconfont、Base64 等技術。
若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，
以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，
圖片壓縮後大小與展現一致。
1五、你如何理解 HTML 結構的語義化？
去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
html 自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小 2em，加粗；<strong>是加粗
的，不要認爲這是 html 的表現，這些其實 html 默認的 css 樣式在起做用，因此去掉或樣式
丟失的時候能讓頁面呈現清晰的結構不是語義化的 HTML 結構的優勢，可是瀏覽器都有有默
認樣式，默認樣式的目的也是爲了更好的表達 html 的語義，能夠說瀏覽器的默認樣式和語
義化的 HTML 結構是不可分割的。
屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁. 例如,若是你使用的含語義的標記,屏幕閱讀器就會「逐個拼出」你的單詞,而不是試着去對
它完整發音.
PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對 CSS
的支持較弱）
使用語義標記能夠確保這些設備以一種有意義的方式來渲染網頁.理想狀況下,觀看設備的
任務是符合設備自己的條件來渲染網頁. 語義標記爲設備提供了所需的相關信息,就省去了你本身去考慮全部可能的顯示狀況（包括
現有的或者未來新的設備）.例如,一部手機能夠選擇使一段標記了標題的文字以粗體顯示. 而掌上電腦可能會以比較大的字體來顯示.不管哪一種方式一旦你對文本標記爲標題,您就可
以確信讀取設備將根據其自身的條件來合適地顯示頁面. 搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重
過去你可能尚未考慮搜索引擎的爬蟲也是網站的「訪客」,但如今它們他們其實是極其
寶貴的用戶.沒有他們的話,搜索引擎將沒法索引你的網站,而後通常用戶將很難過來訪問. 你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只
注重語義標記. 所以,若是頁面文件的標題被標記,而不是,那麼這個頁面在搜索結果的位置可能會比較靠後. 除了提高易用性外,語義標記有利於正確使用 CSS 和 JavaScript,由於其自己提供了許多「鉤
鉤」來應用頁面的樣式與行爲.
SEO 主要仍是靠你網站的內容和外部連接的。
便於團隊開發和維護
W3C 給咱們定了一個很好的標準，在團隊中你們都遵循這個標準，能夠減小不少差別化的東
西，方便開發和維護，提升開發效率，甚至實現模塊化開發。
1六、談談之前端角度出發作好 SEO 須要考慮什麼？
瞭解搜索引擎如何抓取網頁和如何索引網頁
你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人
（SE robot 或叫 web crawler）如何進行工做，搜索引擎如何對搜索結果進行排序等
等。
Meta 標籤優化
主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它
的隱藏文字好比 Author（做者），Category（目錄），Language（編碼語種）等。
如何選取關鍵詞並在網頁中放置關鍵詞
搜索就得用關鍵詞。關鍵詞分析和選擇是 SEO 最重要的工做之一。首先要給網站肯定主關鍵
詞（通常在 5 個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相
關度（Relavancy），突出性（Prominency）等等。
瞭解主要的搜索引擎
雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有
Google，Yahoo，Bing 等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和
索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比 AOL 網頁搜
索用的是 Google 的搜索技術，MSN 用的是 Bing 的技術。
主要的互聯網目錄
Open Directory 自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別
是網站內容的收集方式不一樣。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集
的，除了主頁外還抓取大量的內容頁面。
按點擊付費的搜索引擎
搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最
典型的有 Overture 和百度，固然也包括 Google 的廣告項目 Google Adwords。愈來愈多的
人經過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用
最少的廣告投入得到最多的點擊。
搜索引擎登陸
網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網
站提交（submit）到搜索引擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付
費來得到收錄（好比 Yahoo 要 299 美圓），可是好消息是（至少到目前爲止）最大的搜索引
擎 Google 目前仍是免費，並且它主宰着 60％以上的搜索市場。
連接交換和連接普遍度（Link Popularity）
網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索
引擎之外，人們也天天經過不一樣網站之間的連接來 Surfing（「衝浪」）。其它網站到你的
網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，
會被搜索引擎認爲它的重要性越大，從而給你更高的排名。
合理的標籤使用
1七、有哪項方式能夠對一個 DOM 設置它的 CSS 樣式？
外部樣式表，引入一個外部 css 文件
內部樣式表，將 css 代碼放在 <head> 標籤內部
內聯樣式，將 css 樣式直接定義在 HTML 元素內部
1八、CSS 都有哪些選擇器？
派生選擇器（用 HTML 標籤申明）
id 選擇器（用 DOM 的 ID 申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用 DOM 的屬性申明，屬於 CSS2，IE6 不支持，不經常使用，不知道就算了）
除了前 3 種基本選擇器，還有一些擴展選擇器，包括
後代選擇器（利用空格間隔，好比 div .a{ }）
羣組選擇器（利用逗號間隔，好比 p,div,#a{ }）
那麼問題來了，CSS 選擇器的優先級是怎麼樣定義的？
基本原則：
通常而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越
高。
複雜的計算方法：
用 1 表示派生選擇器的優先級
用 10 表示類選擇器的優先級
用 100 標示 ID 選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級 1+100 + 10 + 1
#xxx li 優先級 100 +1
那麼問題來了，看下列代碼，<p>標籤內的文字是什麼顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的前後順序有關，便是後面的覆蓋前面的，與在<p class=’
classB classA’>中的前後關係無關。
1九、CSS 中能夠經過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍
內？
最基本的：
設置 display 屬性爲 none，或者設置 visibility 屬性爲 hidden
技巧性：
設置寬高爲 0，設置透明度爲 0，設置 z-index 位置在-1000
20、超連接訪問事後 hover 樣式就不出現的問題是什麼？如何解決？
答案：被點擊訪問過的超連接樣式不在具備 hover 和 active 了,解決方法是改變 CSS 屬性的
排列順序: L-V-H-A（link,visited,hover,active）
2一、什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？
答案：針對不一樣的瀏覽器寫不一樣的 CSS code 的過程，就是 CSS hack。
示例以下：
1
2
3
4
5
6
7
8
9
10
11
12
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome
and safari*/
2二、請用 Css 寫一個簡單的幻燈片效果頁面
答案：知道是要用 css3。使用 animation 動畫實現一個簡單的幻燈片效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% {
background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg)
no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg)
no-repeat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg)
no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg)
no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg)
no-repeat;
}
}
2四、行內元素和塊級元素的具體區別是什麼？行內元素的 padding 和 margin 可
設置嗎？
塊級元素(block)特性：
老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的 top/bottom(padding-top/padding-bottom)和外邊
距的 top/bottom(margin-top/margin-bottom)都不可改變（也就是 padding 和 margin 的
left 和 right 是能夠設置的），就是裏面文字或圖片的大小。
那麼問題來了，瀏覽器還有默認的天生 inline-block 元素（擁有內在尺寸，可設置高寬，
但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
2五、什麼是外邊距重疊？重疊的結果是什麼？
外邊距重疊就是 margin-collapse。
在 CSS 當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一
個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊
外邊距。
摺疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是二者的相加的和。
2六、rgba()和 opacity 的透明效果有什麼不一樣？
rgba()和 opacity 都能實現透明效果，但最大的不一樣是 opacity 做用於元素，以及元素內的
全部內容的透明度，
而 rgba()只做用於元素的顏色或其背景色。（設置 rgba 透明的元素的子元素不會繼承透明
效果！）
2七、css 中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？
垂直方向：line-height
水平方向：letter-spacing
那麼問題來了，關於 letter-spacing 的妙用知道有哪些麼？
答案:能夠用於消除 inline-block 元素間的換行符空格間隙問題。
2八、如何垂直居中一個浮動元素？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 方法一：已知元素的高寬
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素須要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的 height，width
margin-left: -100px;
}
//方法二:未知元素的高寬
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素須要相對定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
27
28
那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）
1
2
3
4
5
6
#container //<img>的容器設置以下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
2九、px 和 em 的區別。
px 和 em 都是長度單位，區別是，px 的值是固定的，指定是多少就是多少，計算比較容易。
em 得值不是固定的，而且 em 會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,
10px=0.625em。
30、描述一個」reset」的 CSS 文件並如何使用它。知道 normalize.css 嗎？你
瞭解他們的不一樣之處？
重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置 CSS 文件並知道如何使用它
們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不一樣的
默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用 Normalize 來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了
一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗
體的標題）。
在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用
考慮的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。
3一、Sass、LESS 是什麼？你們爲何要使用他們？
他們是 CSS 預處理器。他是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。
例如 Less 是一種動態樣式語言. 將 CSS 賦予了動態語言的特性，如變量，繼承，運算， 函
數. LESS 既能夠在客戶端上運行 (支持 IE 6+, Webkit, Firefox)，也可一在服務端運行
(藉助 Node.js)。
爲何要使用它們？
結構清晰，便於擴展。
能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，
減小無心義的機械勞動。
能夠輕鬆實現多重繼承。
徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，所
以老的 CSS 代碼也能夠與 LESS 代碼一同編譯。
3二、display:none 與 visibility:hidden 的區別是什麼？
display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素而且擠佔該元素原來的空間。
便是，使用 CSS display:none 屬性後，HTML 元素（對象）的寬度、高度等各類屬性值都將
「丟失」;而使用 visibility:hidden 屬性後，HTML 元素（對象）僅僅是在視覺上看不見（完
全透明），而它所佔據的空間位置仍然存在。
3四、CSS 中 link 和@import 的區別是：
Link 屬於 html 標籤，而@import 是 CSS 中提供的
在頁面加載的時候，link 會同時被加載，而@import 引用的 CSS 會在頁面加載完成後纔會加
載引用的 CSS
@import 只有在 ie5 以上才能夠被識別，而 link 是 html 標籤，不存在瀏覽器兼容性問題
Link 引入樣式的權重大於@import 的引用（@import 是將引用的樣式導入到當前的頁面中）
3五、簡介盒子模型：
CSS 的盒子模型有兩種：IE 盒子模型、標準的 W3C 盒子模型模型
盒模型：內容、內邊距、外邊距（通常不計入盒子實際寬度）、邊框
3六、爲何要初始化樣式？
因爲瀏覽器兼容的問題，不一樣的瀏覽器對標籤的默認樣式值不一樣，若不初始化會形成不一樣瀏
覽器之間的顯示差別
可是初始化 CSS 會對搜索引擎優化形成小影響
3七、BFC 是什麼?
BFC（塊級格式化上下文），一個建立了新的 BFC 的盒子是獨立佈局的，盒子內元素的佈局
不會影響盒子外面的元素。在同一個 BFC 中的兩個相鄰的盒子在垂直方向發生 margin 重疊
的問題
BFC 是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外
元素的佈局，這個渲染區域只對塊級元素起做用
3八、html 語義化是什麼？
當頁面樣式加載失敗的時候可以讓頁面呈現出清晰的結構
有利於 seo 優化，利於被搜索引擎收錄（更便於搜索引擎的爬蟲程序來識別）
便於項目的開發及維護，使 html 代碼更具備可讀性，便於其餘設備解析。
3九、Doctype 的做用？嚴格模式與混雜模式的區別？
<!DOCTYPE>用於告知瀏覽器該以何種模式來渲染文檔
嚴格模式下：頁面排版及 JS 解析是以該瀏覽器支持的最高標準來執行
混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向後兼容
40、IE 的雙邊距 BUG：塊級元素 float 後設置橫向 margin，ie6 顯示的 margin
比設置的較大。解決：加入_display：inline
4一、HTML 與 XHTML——兩者有什麼區別？
1. 全部的標記都必需要有一個相應的結束標記
2. 全部標籤的元素和屬性的名字都必須使用小寫
3. 全部的 XML 標記都必須合理嵌套
4. 全部的屬性必須用引號 "" 括起來
5. 把全部 < 和 & 特殊符號用編碼表示
6. 給全部屬性賦一個值
7. 不要在註釋內容中使用 "--"
8. 圖片必須有說明文字
4二、html 常見兼容性問題？
1.雙邊距 BUG float 引發的 使用 display
2.3 像素問題 使用 float 引發的 使用 dislpay:inline -3px
3.超連接 hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index 問題 給父級添加 position:relative
5.Png 透明 使用 js 代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在 ie6 下遮蓋 使用 iframe 嵌套
8. 爲 什 麼 沒 有 辦 法 定 義 1px 左 右 的 寬 度 容 器 （ IE6 默 認 的 行 高 造 成 的 ， 使 用
over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持 opacity，解決辦法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE
8*/
}
10. IE6 不支持 PNG 透明背景，解決辦法: IE6 下使用 gif 圖片
4三、對 WEB 標準以及 W3C 的理解與認識
答：標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈 css 和 js 腳本、
結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更
普遍的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不須要變更頁面內容、提
供打印版本而不須要複製內容、提升網站易用性。
4四、行內元素有哪些?塊級元素有哪些?CSS 的盒模型?
答：塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css 盒模型:內容，border ,margin，padding
4五、前端頁面有哪三層構成，分別是什麼?做用是什麼?
答：結構層 Html 表示層 CSS 行爲層 js。
4六、Doctype 做用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何
意義?
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的
解析器，用什麼文檔類型 規範來解析這個文檔。
（2）、嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以
防止站點沒法工做。
（4）、DOCTYPE 不存在或格式不正確會致使文檔以混雜模式呈現。
4七、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
（1）CSS 規範規定，每一個元素都有 display 屬性，肯定該元素的類型，每一個元素都有默認
的 display 值，好比 div 默認 display 屬性值爲「block」，成爲「塊級」元素；span 默認
display 屬性值爲「inline」，是「行內」元素。
（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul
ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
<br><hr><img><input><link><meta>不爲人知的是： <area><base><col><command>
<embed><keygen><param><source><track><wbr>
4八、CSS 的盒子模型？
（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的 content 部分包含了 border 和
pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border). 4九、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3 新增
僞類有那些？
* 1.id 選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li: nth - child）
* 可繼承： font-size font-family color, UL LI DL DD DT;
* 不可繼承 ：border padding margin width height ;
* 優先級就近原則，樣式定義最近者爲準;
* 載入樣式以最後載入的定位爲準;
優先級爲:
!important > id > class > tag
important 比 內聯優先級高
CSS3 新增僞類舉例：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或複選框被選中。
50、如何居中 div,如何居中一個浮動元素?
給 div 設置一個寬度，而後添加 margin:0 auto 屬性
div{
width:200px;
margin:0 auto;
}
居中一個浮動元素
肯定容器的寬高 寬 500 高 300 的層
設置層的外邊距
.div {
Width:500px ; height:300px;//高度能夠不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
5一、瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些？緣由，解決
方法是什麼，經常使用 hack 的技巧 ？
* IE 瀏覽器的內核 Trident、Mozilla 的 Gecko、google 的 WebKit、Opera 內核 Presto；
* png24 爲的圖片在 iE6 瀏覽器上出現背景，解決方案是作成 PNG8.
* 瀏 覽 器 默 認 的 margin 和 padding 不 同 。 解 決 方 案 是 加 一 個 全 局 的
*{margin:0;padding:0;}來統一。
* IE6 雙邊距 bug:塊屬性標籤 float 後，又有橫行的 margin 狀況下，在 ie6 顯示 margin
比設置的大。
浮動 ie 產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種狀況之下 IE 會產生 20px 的距離，解決方案是在 float 的標籤樣式控制中加入 —
—_display:inline;將其轉化爲行內屬性。(_這個符號只有 ie6 會識別)
漸進識別的方式，從整體中逐漸排除局部。
首先，巧妙的使用「\9」這一標記，將 IE 遊覽器從全部狀況中分離出來。
接着，再次使用「+」將 IE8 和 IE七、IE6 分離開來，這樣 IE8 已經獨立識別。
css
.bb{
background-color:#f1ee18;/*全部識別*/
.background-color:#00deff\9; /*IE六、七、8 識別*/
+background-color:#a200ff;/*IE六、7 識別*/
_background-color:#1e0bd1;/*IE6 識別*/
}
* IE 下,可使用獲取常規屬性的方法來獲取自定義屬性, 也可使用 getAttribute()獲取自定義屬性;
Firefox 下,只能使用 getAttribute()獲取自定義屬性. 解決方法:統一經過 getAttribute()獲取自定義屬性.
* IE 下,even 對象有 x,y 屬性,可是沒有 pageX,pageY 屬性;
Firefox 下,event 對象有 pageX,pageY 屬性,可是沒有 x,y 屬性.
* （條件註釋）缺點是在 IE 瀏覽器下可能會增長額外的 HTTP 請求數。
* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入
CSS 屬性 -webkit-text-size-adjust: none; 解決. 超連接訪問事後 hover 樣式就不出現了 被點擊訪問過的超連接樣式不在具備 hover 和
active 瞭解決方法是改變 CSS 屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
5二、列出 display 的值，說明他們的做用。position 的值，relative 和 absolute
定位原點是？
1. block 象塊類型元素同樣顯示。
none 缺省值。向行內元素類型同樣顯示。
inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
2. position 的值
*absolute
生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
*fixed （老 IE 不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
* relative
生成相對定位的元素，相對於其正常位置進行定位。
* static 默認值。沒有定位，元素出如今正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。
* inherit 規定從父元素繼承 position 屬性的值。
5三、absolute 的 containing block 計算方式跟正常流有什麼不一樣？
5四、position 跟 display、margin collapse、overflow、float 這些特性相互
疊加後會怎麼樣？
5五、對 WEB 標準以及 W3C 的理解與認識
標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈 css 和 js 腳本、結
構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣
泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不須要變更頁面內容、提供
打印版本而不須要複製內容、提升網站易用性；
5六、css 的基本語句構成是?
選擇器{屬性 1:值 1;屬性 2:值 2;……}
5七、瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不一樣
使用 window.top.document.compatMode 可顯示爲何模式
5八、CSS 中能夠經過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍內？
最基本的：
設置 display 屬性爲 none，或者設置 visibility 屬性爲 hidden
技巧性：
設置寬高爲 0，設置透明度爲 0，設置 z-index 位置在-1000
5九、超連接訪問事後 hover 樣式就不出現的問題是什麼？如何解決？
答案：被點擊訪問過的超連接樣式不在具備 hover 和 active 了,解決方法是改變 CSS
屬性的排列順序: L-V-H-A（link,visited,hover,active）
60、什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？
答案：針對不一樣的瀏覽器寫不一樣的 CSS code 的過程，就是 CSS hack。
示例以下：
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test
{background-color:gray;} } /*chrome and safari*/
6二、請用 Css 寫一個簡單的幻燈片效果頁面
答案：知道是要用 css3。使用 animation 動畫實現一個簡單的幻燈片效果。
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0%
{ background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034
f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2
632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfd
ed1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86
d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161
a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
}
}
6三、行內元素和塊級元素的具體區別是什麼？行內元素的 padding 和 margin 可設置嗎？
塊級元素(block)特性：
 老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;
內聯元素(inline)特性：
 和相鄰的內聯元素在同一行;
 寬度(width)、高度(height)、內邊距的 top/bottom(padding-top/padding-bottom)
和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin
的 left 和 right 是能夠設置的），就是裏面文字或圖片的大小。
那麼問題來了，瀏覽器還有默認的天生 inline-block 元素（擁有內在尺寸，可設置高
寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<textarea> 、<label>
6四、什麼是外邊距重疊？重疊的結果是什麼？
答案：
外邊距重疊就是 margin-collapse。
在 CSS 當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合
成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲
摺疊外邊距。
摺疊結果遵循下列計算規則：
1. 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
2. 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
3. 兩個外邊距一正一負時，摺疊結果是二者的相加的和。
6五、rgba()和 opacity 的透明效果有什麼不一樣？
rgba()和 opacity 都能實現透明效果，但最大的不一樣是 opacity 做用於元素，以及元素
內的全部內容的透明度，
而 rgba()只做用於元素的顏色或其背景色。（設置 rgba 透明的元素的子元素不會繼承
透明效果！）
6六、css 中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？
垂直方向：line-height
水平方向：letter-spacing
那麼問題來了，關於 letter-spacing 的妙用知道有哪些麼？
答案:能夠用於消除 inline-block 元素間的換行符空格間隙問題。
6七、如何垂直居中一個浮動元素？
// 方法一：已知元素的高寬
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素須要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的 height，width
margin-left: -100px;
}
//方法二:未知元素的高寬
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素須要相對定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）
#container //<img>的容器設置以下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
6八、描述一個"reset"的 CSS 文件並如何使用它。知道 normalize.css 嗎？你瞭解他們的不
同之處？
重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置 CSS 文件並知道如何使
用它們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不
同的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性
發生。
你可能會用 Normalize 來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提
供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如
粗體的標題）。
在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都
不用考慮的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。
6九、說 display 屬性有哪些？能夠作什麼？
display:block 行內元素轉換爲塊級元素
display:inline 塊級元素轉換爲行內元素
display:inline-block 轉爲內聯元素
70、哪些 css 屬性能夠繼承？
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
7一、css 優先級算法如何計算？
!important > id > class > 標籤
!important 比 內聯優先級高
*優先級就近原則，樣式定義最近者爲準;
*以最後載入的樣式爲準;
7二、b 標籤和 strong 標籤,i 標籤和 em 標籤的區別？
後者有語義，前者則無。
7三、有那些行內元素、有哪些塊級元素、盒模型？
1.內聯元素(inline element)
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標籤
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 經常使用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量
二、塊級元素
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 經常使用塊級容易，也是 css layout 的主要標籤
dl – 定義列表
fieldset – form 控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3 級標題
h4 – 4 級標題
h5 – 5 級標題
h6 – 6 級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames 可選內容，（對於不支持 frame 的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對於不支持 script 的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
3.CSS 盒子模型包含四個部分組成：
內容、填充（padding）、邊框（border）、外邊界（margin）。
7四、有哪些選擇符，優先級的計算公式是什麼？行內樣式和！important 哪一個優
先級高？
#ID > .class > 標籤選擇符 !important 優先級高
75.我想讓行內元素跟上面的元素距離 10px，加 margin-top 和 padding-top 可
以嗎？
margin-top,padding-top 無效
76.CSS 的盒模型由什麼組成？
內容，border ,margin，padding
7七、.說說 display 屬性有哪些？能夠作什麼？
display:block 行內元素轉換爲塊級元素
display:inline 塊級元素轉換爲行內元素
display:inline-block 轉爲內聯元素
7八、哪些 css 屬性能夠繼承？
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
7九、css 優先級算法如何計算？
!important > id > class > 標籤
!important 比 內聯優先級高
* 優先級就近原則，樣式定義最近者爲準;
* 以最後載入的樣式爲準;
80、text-align:center 和 line-height 有什麼區別？
text-align 是水平對齊，line-height 是行間。
8一、前端頁面由哪三層構成，分別是什麼？做用是什麼？
結構層 Html 表示層 CSS 行爲層 js
8二、寫一個表格以及對應的 CSS,使表格奇數行爲白色背景，偶數行爲灰色，鼠
標一上去爲黃色背景。css

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程