div+css佈局的問題
一、經常使用那幾種瀏覽器測試？有哪些內核(Layout Engine)?javascript
答：css
(1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。html
(2) 內核：Trident，Gecko，Presto，Webkit。前端
二、 說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 如下）html5
答：java
(1) 行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效。jquery
塊級元素：各佔據一行，垂直方向排列。重新行開始結束接着一個斷行。android
(2) 兼容性：display:inline-block;*display:inline;*zoom:1;css3
三、 談談浮動和清除浮動，清除浮動有哪些方式？比較好的方式是哪種？git
浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上。
答：
(一)
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義僞類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，須要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(二) 比較好的是第3種方式，好多網站都這麼用。
四、box-sizing經常使用的屬性有哪些？分別有什麼做用？
答：
(1)box-sizing: content-box|border-box|inherit;
(2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
五、Doctype做用？標準模式與兼容模式各有什麼區別?
答：
(1) 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
(2) 標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。
六、HTML5 爲何只須要寫<!DOCTYPE html> ？
答：
HTML5不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
七、 頁面導入樣式時，使用link和@import有什麼區別？
答：
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題。
引入方式3種：行內添加定義style屬性值，頁面頭部內內嵌調用和外鏈調用，
區別：
1.link是xhtml標籤，除了加載css外，還能夠定義RSS等其餘事務，@import只能加載CSS
2.link引用CSS時候，頁面載入的時候同時加載，@import須要頁面網頁徹底載入後加載
3.link是XHTML標籤，沒有兼容問題，@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4.link支持使用javascript控制DOM去改變樣式，可是@import不支持。
八、介紹一下你對瀏覽器內核的理解？
答：
主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。
九、html5有哪些新特性？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
答：
(一)
HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，好比 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(二)
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
固然也能夠直接使用成熟的框架、好比html5shim，
支持HTML5新標籤：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素
十、簡述一下你對HTML語義化的理解？
答：
用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
十一、position的值， relative和absolute分別是相對於誰進行定位的？
absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出
12、 什麼叫優雅降級和漸進加強？
答：
優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效。
漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。
1三、display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就不存在。
visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。
CSS中link 和@import的區別是？
(1) link屬於HTML標籤，而@import是CSS提供的;
(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
(4) link方式的樣式的權重 高於@import的權重.
1四、position:absolute和float屬性的異同
共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
不一樣點：float仍會佔據位置，absolute會覆蓋文檔流中的其餘元素。
1五、介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。
content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content
標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。
1六、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）
1七、CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器 多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image
CSS3中新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別以下：
content-box（默認）
佈局所佔寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
佈局所佔高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
佈局所佔寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
佈局所佔高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
佈局所佔寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
佈局所佔高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
1八、對BFC規範的理解？
BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。
1九、說說你對語義化的理解？
（1）去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
（2）有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
（3）方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
（4）便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
20、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。
（2）嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行。
（3）在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
（4）DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。
2一、你知道多少種Doctype文檔類型？
該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。
2二、HTML與XHTML——兩者有什麼區別
區別：
（1）全部的標記都必需要有一個相應的結束標記
（2）全部標籤的元素和屬性的名字都必須使用小寫
（3）全部的XML標記都必須合理嵌套
（4）全部的屬性必須用引號""括起來
（5）把全部<和&特殊符號用編碼表示
（6）給全部屬性賦一個值
（7）不要在註釋內容中使「--」
（8）圖片必須有說明文字
2三、常見兼容性問題？
png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.
瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入
_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從整體中逐漸排除局部。
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
/*全部識別*/
. /*IE六、七、8識別*/
+/*IE六、7識別*/
_/*IE6識別*/
}
怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發
怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今
能夠使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
2四、ie各版本和chrome能夠並行下載多少個資源
IE6 兩個併發，iE7升級以後的6個併發，以後版本也是6個
Firefox，chrome也是6個
2五、談談你對重構的理解
網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，
在擴展的同時保持一致的UI。
對於傳統的網站來講重構一般是：
表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面
減小代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
加強用戶體驗
一般來講對於速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
程序的性能優化(如數據讀寫)
採用CDN來加速資源加載
對於JS DOM的優化
2六、什麼樣的前端代碼是好的
高複用低耦合，這樣文件小，好維護，並且好擴展。
2七、對web標準以及w3c的理解和認識
答:標籤閉合，標籤小寫，不亂嵌套，提升搜索機器人搜索概率。使用外鏈css和js腳本，結構行爲表現分離，內容能被更多普遍的設備所訪問,更少的代碼和組件，容易維護，改版方便，不須要變更頁面內容。
2八、.Html和xhtml有什麼區別?
html是一種基本的web網頁設計語言，xhtml是一個基於XML的置標語言。
最主要的不一樣:
XHTML元素必須正確的被嵌套，元素必須關閉，標籤必須小寫，必須有根元素。
2九、.嚴格模式和混雜模式的區分，以及如何觸發這2種模式?
嚴格模式就是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不容許使用任何表現層的語法，如
混雜模式是一種向後兼容的解析方法。
觸發標準模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式能夠在html文檔開始不聲明DTD，或者在DOCTYPE前加入XML聲明
30、.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素:br、meta、hr、link、input、img
3一、CSS選擇符有哪些?優先級算法如何計算?內聯和Important哪一個優先級高
回答：CSS選擇符有類選擇符，屬性選擇符，ID選擇符，優先級算法是基於特殊性值進行計算的。分別以下：ID屬性 0.1.0.0
類屬性選擇器，屬性選擇器，僞類 0.0.1.0 元素選擇符，僞元素選擇符 0.0.0.1
通配選擇器對特殊性沒有任何貢獻值。
important優先級高
32.前端頁面有哪三層構成，分別是什麼，做用是什麼?
結構層：html 表示層:css 行爲層：js
3三、GET和POST的區別，什麼時候使用POST？
GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，
也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。
然而，在如下狀況中，請使用 POST 請求：
沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
3四、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。
如何使用：
（1）頁面頭部像下面同樣加入一個manifest的屬性；
（2）在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
（3）在離線狀態時，操做window.applicationCache進行需求實現。
3五、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的
在線的狀況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問APP，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過APP而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。 離線的狀況下，瀏覽器就直接使用離線存儲的資源。
3六、xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：①XHTML 元素必須被正確地嵌套；②XHTML元素必須被關閉；③標籤名必須用小寫字母；④XHTML 文檔必須擁有根元素。
3七、css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
3八、寫出幾種IE6 BUG的解決方法
①雙邊距BUG float引發的 使用display
②3像素問題 使用float引發的 使用dislpay:inline -3px
③超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
④Ie z-index問題 給父級添加position:relative
⑤Png 透明 使用js代碼 改
⑥Min-height 最小高度 ！Important 解決’
⑦select 在ie6下遮蓋 使用iframe嵌套
⑧爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）
3九、標籤上title與alt屬性的區別是什麼?
Alt當圖片不顯示時用文字表明。Title爲該屬性提供信息。
40、描述css reset的做用和用途。
Reset重置瀏覽器的CSS默認屬性瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一。
4一、解釋css sprites，如何使用。
CSS精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。
4二、瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型，渲染模式的不一樣；
使用 window.top.document.compatMode 可顯示爲何模式。
4三、你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合併、文件最小化/文件壓縮、使用CDN託管，緩存的使用。
4四、什麼是語義化的HTML?
直觀的認識標籤，對於搜索引擎的抓取有好處。
4六、iframe有那些缺點？
（1）頁面樣式調試麻煩，出現多個滾動條；
（2）瀏覽器的後退按鈕失效；
（3）過多會增長服務器的HTTP請求；
（4）小型的移動設備沒法徹底顯示框架；
（5）產生多個頁面，不易管理；
（6）不容易打印；
（7）代碼複雜，沒法被一些搜索引擎解讀。
4七、HTML5的form如何關閉自動完成功能
HTML的輸入框能夠擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你之前的同名輸入框的歷史記錄中查找出相似的內容並列在輸入框下面，這樣就不用所有輸入進去了，直接選擇列表中的項目就能夠了。
但有時候咱們但願關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，咱們但願使用AJAX技術從數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。
關閉輸入框的自動完成功能有3種方法：
（1）在IE的Internet選項菜單裏的內容--自動完成裏面設置
（2）設置Form的autocomplete爲"on"或者"off"來開啓或者關閉自動完成功能
（3）設置輸入框的autocomplete爲"on"或者"off"來開啓或者關閉該輸入框的自動完成功能
測試代碼：（在每一個form輸入文字而後提交，而後再回來看看可否自動完成，注意要提交後纔能有歷史記錄，纔可能自動完成；提交後頁面可能出錯，不用管它，後退回去便可）
xml 代碼
打開自動完成功能的Form<br>
<form name="form1" autocomplete="on">
打開自動完成功能的輸入框
<input type="text" autocomplete="on" name="txtOff1"><br>
關閉自動完成功能的輸入框
<input type="text" autocomplete="off" name="txtOn1"><br>
<input type="submit" value="提交"><br>
</form>
關閉自動完成功能的Form<br>
<form name="form1" autocomplete="off">
打開自動完成功能的輸入框
<input type="text" autocomplete="on" name="txtOff1"><br>
關閉自動完成功能的輸入框
<input type="text" autocomplete="off" name="txtOn1"><br>
<input type="submit" value="提交"><br>
</form>
4八、如何在頁面上實現一個圓形的可點擊區域？
使用Dreamweaver製做熱點
4九、實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:black"></div>
50、tite與h1的區別、b與strong的區別、i與em的區別？
（1）b和strong的區別
盲人朋友使用閱讀設備閱讀網絡時：<strong>會重讀，<b>不會
二者雖然在網頁中顯示效果同樣，但實際目的不一樣。
<b>這個標籤對應 bold，即文本加粗，其目的僅僅是爲了加粗顯示文本，是一種樣式／風格需求；
<strong>這個標籤意思是增強字符的語氣，表示該文本比較重要，提醒讀者／終端注意。爲了達到這個目的，瀏覽器等終端將其加粗顯示；
總結：<b>爲了加粗而加粗，<strong>爲了標明重點而加粗，也能夠用其它方式來強調，好比下劃線，好比字體加大，好比紅色，等等，能夠經過css來改變strong的具體表現。
（2）i和em的區別
一樣，I是Italic(斜體)，而em是emphasize(強調)。
（3）title與h1的聯繫：
從網站角度看，title更重於網站信息。title能夠直接告訴搜索引擎和用戶這個網站是關於什麼主題和內容的。
從文章角度看，h1則是用於歸納文章主題。用戶進入內容頁，想看到的固然就是文章的內容，h1文章標題就是最重要的。文章標題最好只有一個，多個h1會致使搜索引擎不知道這個頁面哪一個標題內容最重要，致使淡化這個頁面的標題和關鍵詞，起不到突出主題的效果。
區別：
h1突出文章主題，面對用戶，更突出其視覺效果，突出網站標題或關鍵字用title。一篇文章，一個頁面最好只用一個h1，多個h1會稀釋主題。一個網站能夠有多個title,最好一個單頁用一個title，以便突出網站頁面主體信息，從seo看，title權重比h1高，適用性比h1廣。標記了h1的文字頁面給予的權重會比頁面內其餘權重高不少。一個好的網站是h1和title並存，既突出h1文章主題，又突出網站主題和關鍵字。達到雙重優化網站的效果。
5一、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不一樣的？
CSS盒子模型：由四個屬性組成的外邊距(margin)、內邊距(padding)、邊界(border)、內容區(width和height);
標準的CSS盒子模型和低端IE CSS盒子模型不一樣：寬高不同
標準的css盒子模型寬高就是內容區寬高；
低端IE css盒子模型寬高 內邊距﹢邊界﹢內容區；
5二、CSS3新增僞類有那些？
p:last-of-type 選擇其父元素的最後的一個P元素
p:last-child 選擇其父元素的最後子元素(必定是P才行)
p:first-of-type 選擇其父元素的首個P元素
p:first-child 選擇其父元素的首個p元素(必定是p才行)
p:only-child 選擇其父元素的只有一個元素(並且這個元素只能是p元素，不能有其餘元素)
p:only-of-type 選擇其父元素的只有一個p元素(不能有第二個P元素，其餘元素能夠有)
選第N個
p:nth-child(n) 選擇其父元素的第N個 恰好是p的元素
p:nth-last-child(n) ..............................................從最後一個子元素開始計數
p:nth-of-type(n) 選擇其父元素的n個元素
p:nth-last-of-type(n) ........................從最後一個子元素開始計數
5三、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
（一）元素水平居中的方式
1）行級元素水平居中對齊（父元素設置 text-align:center）
[html] view plain copy
- <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
- <span>行級元素垂直居中</span>
- </div>
2) 塊級元素水平居中對齊（margin: 0 auto）
[html] view plain copy
- <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
- <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 塊級元素水平居中</div>
- </div>
3）浮動元素水平居中
- 寬度不固定的浮動元素
html代碼
[html] view plain copy
- <div class="outerbox">
- <div class="innerbox">我是浮動的</div>
- </div>
CSS樣式
[css] view plain copy
- .outerbox{
- float:left;
- position:relative;
- left:50%;
- }
- .innerbox{
- float:left;
- position:relative;
- right:50%;
- }
- 寬度固定的互動元素
html代碼
[html] view plain copy
- <div class="outerbox">
- <div>我是浮動的</div>
- </div>
css代碼
[css] view plain copy
- .outerbox{
- /*方便看效果 */
- width:500px ;
- height:300px; /*高度能夠不設*/
- margin: -150px 0 0 -250px; /*使用marin向左移動250px，保證元素居中*/
- position:relative; /*相對定位*/
- left:50%;
- top:50%;
- }
4）讓絕對定位的元素水平居中對齊
[css] view plain copy
- .center{
- position: absolute; /*絕對定位*/
- width: 500px;
- height:300px;
- background: red;
- margin: 0 auto; /*水平居中*/
- left: 0; /*此處不能省略，且爲0*/
- right: 0; /*此處不能省略，且爲0*/
- }
經驗分享：水平居中的主要屬性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;
（二）元素垂直居中對齊
1）對行級元素垂直居中（heiht與line-height的值同樣）
[css] view plain copy
- height:300px;
- line-height:300px;
2）對塊級元素垂直居中對齊
2.1 父元素高度固定的狀況
1）父元素的height與line-height值相同
2）須要垂直居中的元素
vertical-align:middle;// 垂直居中對齊
display:inline|inline-block 塊級元素轉行級元素
HTML代碼
[html] view plain copy
- <div class="center">
- <div class="inner"></div>
- </div>
CSS代碼
[css] view plain copy
- .center{
- width: 500px;
- height:300px;
- line-height: 300px;
- border:1px solid;
- }
- .inner{
- background: blue;
- width: 300px;
- height: 100px;
- display: inline-block;
- vertical-align: middle;
- }
2.2 父元素高度不固定的狀況
父元素的padding-top和padding-bottom同樣
5四、CSS3有哪些新特性？
（1）選擇器
（2） RGBA和透明度
（3）多欄佈局
（4）多背景圖
（5） Word Wrap
（6） 文字陰影
（7） @font-face屬性
（8）圓角(邊框半徑)
（9） 邊框圖片
（10） 盒陰影
（11）盒子大小
（12）媒體查詢
（13） 語音
5五、用純CSS建立一個三角形的原理是什麼？
採用的是均分原理
盒子都是一個矩形或正方形，從形狀的中心，向4個角上下左右劃分4個部
代碼的實現
第一步 保證元素是塊級元素
第二步 設置元素的邊框
第三步 不須要顯示的邊框使用透明色
示例代碼
[css] view plain copy
- .square{
- width:0;
- height:0;
- margin:0 auto;
- border:6px solid transparent;
- border-top: 6px solid red;
- }
5六、一個滿屏 品 字佈局 如何設計?
（1）元素水平居中對齊
1) 使用margin對齊(推薦)
2) 使用left：50%
3) 使用text-align：行內元素居中對齊，給父元素設置text-align： center
（2）元素對相對窗口定位
1) 使用filxed（推薦）：老是根據瀏覽器的窗口來進行元素的定位
2) 使用absolute定位
3) 使用html和body的width和height填充這個窗口
（3）元素左右定位
1) 使用float左右浮動
2) 使用絕對定位進行左右定位（推薦）
第一種方式：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>滿屏品字佈局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;/*此設置很是關鍵，由於默認的body，HTML高度爲0，因此後面設置的div的高度沒法用百分比顯示*/
}
.header{
height:50%; /*此步結合html,body高度爲100%，解決元素相對窗口的定位問題*/
width: 50%;
background: #ccc;
margin:0 auto;
}
.main{
width: 100%;
height: 50%;
background: #ddd;
}
.main .left,.main .right{
float: left;/*採用float方式，對元素進行左右定位*/
width:50%;/*此步解決元素相對窗口的定位問題*/
height:100%;/*此步解決元素相對窗口的定位問題*/
background: yellow;
}
.main .right{
background: green;
}
</style></head><body><div class="header"></div><div class="main">
<div class="left"></div>
<div class="right"></div></div></body></html>
5七、li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
有時，在寫頁面的時候，會須要將<li>這個塊狀元素橫排顯示，此時就須要將display屬性設置爲inline-block，此時問題出現了，在兩個<li>元素之間會出現大約8px左右的空白間隙，
引發這種空白間隔的緣由：
瀏覽器的默認行爲是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是咱們上面的代碼<li>換行後會產生換行字符，而它會變成一個空格，固然空格就佔用一個字符的寬度。
解決方案：
方法一：既然是由於<li>換行致使的，那就能夠將<li>代碼所有寫在一排，以下
- <div class="wrap"><h3>li標籤空白測試</h3><ul><li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li></ul></div>
再刷新頁面看就沒有空白了，就是這麼神奇~
方法二：咱們爲了代碼美觀以及方便修改，不少時候咱們不可能將<li>所有寫在一排，那怎麼辦？既然是空格佔一個字符的寬度，那咱們索性就將<ul>內的字符尺寸直接設爲0，將下面樣式放入樣式表，問題解決。
.wrap ul{font-size:0px;}
- 1
但隨着而來的就是<ul>中的其餘文字就不見了，由於其尺寸被設爲0px了，咱們只好將他們從新設定字符尺寸。
方法三：原本覺得方法二可以徹底解決問題，但經測試，將li父級標籤字符設置爲0在Safari瀏覽器依然出現間隔空白；既然設置字符大小爲0不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。一樣隨來而來的問題是li內的字符間隔也被設置了，咱們須要將li內的字符間隔設爲默認。
.wrap ul{letter-spacing: -5px;}1
以後記得設置li內字符間隔
.wrap ul li{letter-spacing: normal;}
5八、爲何要初始化CSS樣式。
由於瀏覽器的兼容的問題，不一樣瀏覽器有些標籤的默認值是不一樣的，若是沒有CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
5九、absolute的containing block計算方式跟正常流有什麼不一樣？
containing block
通常來講，盒子自己就爲其子孫創建了 containing block，用來計算內部盒子的位置、大小，而對內部的盒子，具體採用哪一個 containing block 來計算，須要分狀況來討論：
若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
不然則由這個祖先元素的 padding box 構成。
根元素所在的 containing block 被稱爲 initial containing block，在咱們經常使用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形；
對於 position 爲 static 或 relative 的元素，其 containing block 爲祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區域)；
對於 position:fixed 的元素，其 containing block 由 viewport 創建；
對於 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，而後判斷：
若是都找不到，則爲 initial containing block。
60、CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？
visibility有以下屬性值：
| 屬性值 |
屬性值描述 |
| visible |
默認值。元素是可見的。 |
| hidden |
元素是不可見的，至關於display：hidden；，但此時仍佔用頁面空間 |
| collapse |
當在表格元素中使用時，此值可刪除一行或一列，可是它不會影響表格的佈局。被行或列佔據的空間會留給其餘內容使用。若是此值被用在其餘的元素上，會呈現爲 「hidden」。 |
| inherit |
規定應該從父元素繼承 visibility 屬性的值。 |
visibility的第三種值collapse：
- 對於通常的元素，它的表現跟display:hidden是同樣的。
- 但例外的是，若是這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none同樣，也就是說，它們佔用的空間也會釋放。
- 在谷歌瀏覽器裏，使用collapse值和使用hidden值沒有什麼區別。
- 在火狐瀏覽器、Opera和IE11裏，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。
在不一樣瀏覽器下的區別：
6一、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
1、'display'、'position' 和 'float' 的相互關係
（1）'display' 的值爲 'none'
若是 'display' 的值爲 'none'，那麼 'position' 和 'float' 不起做用。在這種狀況下，元素不產生框。所以浮動和定位無效。
（2） 'position' 的值是 'absolute' 或 'fixed'
不然，若是 'position' 的值是 'absolute' 或 'fixed'，框就是絕對定位的，'float' 計算後的值應該是 'none'，而且，'display' 會被按照上表設置。 框的位置將由 'top'，'right'，'bottom' 和 'left' 屬性和該框的包含塊肯定。
也就是說，當元素是絕對定位時，浮動失效，'display' 會被按規則重置。
（3）'float' 的值不是 "none"。
按照規則，SPAN 是行內元素，所以不可以設置其寬度和高度。可是浮動後，'display' 值按照轉換對應表設置後，成爲塊級元素
（4）元素是根元素
若是元素是根元素，'display' 的值按照轉換對應表設置。
（5） 不然，應用指定的 'display' 特性值。
2、position跟display、overflow、float下的margin collapse。
margin collapse我以爲這裏的意思應該是Collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合併成一個外邊距。
其中所說的 margin 毗鄰，能夠歸結爲如下兩點：
•這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。
•這些 margin 都處於普通流中。
（1）兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊。
（2）浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其餘元素的 margin 摺疊.
（3）建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊
6二、對BFC規範(塊級格式化上下文：block formatting context)的理解？
一. BFC 是什麼？
有了上面的基礎後，能夠正式介紹 BFC 了。從樣式上看，具備 BFC 的元素與普通的容器沒有什麼區別，可是從功能上，具備 BFC 的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且 BFC 具備普通容器沒有的一些特性，例如能夠包含浮動元素，上文中的第二類清除浮動的方法（如 overflow 方法）就是觸發了浮動元素的父元素的 BFC ，使到它能夠包含浮動元素，從而防止出現高度塌陷的問題。
簡單來講，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互做用。
二.如何觸發 BFC
上面介紹了 BFC 的定義，那麼如何觸發 BFC 呢？
知足下面任一條件的元素，會觸發爲 BFC ：
浮動元素，float 除 none 之外的值
絕對定位元素，position（absolute，fixed）
display 爲如下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 之外的值（hidden，auto，scroll）
可是，"display:table" 自己並不產生 BFC，而是由它產生匿名框，匿名框中包含 "display:table-cell" 的框會產 BFC。 總之，對於 "display:table" 的元素，產生 BFC 的是匿名框而不是 "display:table"。
在 CSS3 中，BFC 叫作 Flow Root，並增長了一些觸發條件：
display 的 table-caption 值
position 的 fixed 值，其實 fixed 是 absolute 的一個子類，所以在 CSS2.1 中使用這個值也會觸發 BFC ，只是在 CSS3 中更加明確了這一點。
值得注意的是，在前面 Kayo 已經說明過了，BFC 並非元素，而是某些元素帶有的一些屬性，所以，是上面這些元素產生了 BFC ，而它們自己並非 BFC ，這個概念須要區分清楚。
三. BFC 的特性
從總體上看，BFC 是隔離了的容器，這個具體能夠表現爲三個特性：
（1）BFC 會阻止外邊距摺疊
兩個相連的 div 在垂直上的外邊距會發生疊加，有些書籍會把這個狀況列做 bug ，這裏 Kayo 並不一樣意，這種摺疊雖然會給不熟悉 CSS 佈局的開發者帶來一些不便，但實際上它具備完整且具體的摺疊規則，而且在主流瀏覽器中都存在，所以 Kayo 更認爲這應該是 CSS 的特性。固然，在實際開發中，或許咱們有時會不須要這種摺疊，這時能夠利用 BFC 的其中一個特性——阻止外邊距疊加。
在舉例說明 BFC 如何阻止外邊距摺疊以前，首先說明一下外邊距摺疊的規則：僅當兩個塊級元素相鄰而且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距纔會疊加。也就是說，即使兩個塊級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會摺疊。所以，阻止外邊距摺疊只需產生新的 BFC 。
效果如圖：
也能夠看 Demo 。
如上圖的例子，三個 div 各包含一個 p 元素，三個 div 及其包含的 p 元素都有頂部和底部的外邊距，但只有第三個 div 的邊距沒有與它的子元素 p 的外邊距摺疊。這是由於第三個 div 建立了新的 BFC ，因而可知：建立了 BFC 的元素，不和它的子元素髮生外邊距摺疊。
（2）BFC 能夠包含浮動的元素
這也正是使用 overflow: hidden 與 overflow: auto 方法閉合浮動的原理，使用 overflow: hidden 或 overflow: auto 觸發浮動元素的父元素的 BFC 特性，從而能夠包含浮動元素，閉合浮動。
W3C 的原文是「'Auto' heights for block formatting context roots」，也就是 BFC 會根據子元素的狀況自動適應高度，即便其子元素中包括浮動元素。
效果如圖：
也能夠看 Demo 。
上面的例子中，有兩個 div ，它們各包含一個設置了浮動的 p 元素，但第一個 div 出現了「高度塌陷」，這是由於內部的浮動元素脫離了普通流，所以該 div 至關於一個空標籤，沒有高度和寬度，即高度爲 0 ，上下邊框也重疊在一塊兒。而第二個 div 使用 overflow: hidden 觸發了 BFC ，能夠包含浮動元素，所以能正確表現出高度，其邊框位置也正常了。
（3）BFC 能夠阻止元素被浮動元素覆蓋
如上文所說，浮動元素的塊級兄弟元素會無視浮動元素的位置，儘可能佔滿一整行，這樣就會被浮動元素覆蓋，爲該兄弟元素觸發 BFC 後能夠阻止這種狀況的發生。
效果如圖：
也能夠看 Demo 。
如上圖的例子，藍色背景的 div 使用 overflow: hidden 觸發了 BFC ，它並不會被它的兄弟浮動元素覆蓋，而是處於它的旁邊。值得注意的是，以上的狀況僅僅是元素寬度之和沒有超出父元素寬度的狀況，假設浮動元素寬度和它的非浮動兄弟元素寬度都沒有超過父元素寬度，但兩個元素的寬度加起來超出了父元素寬度的時候，非浮動元素會降低到下一行，即處於浮動元素下方，效果以下圖：
也能夠看 Demo 。
四. BFC 與 hasLayout
細心的童鞋會發現，在上面的例子中，除了使用 overflow: hidden 觸發 BFC 外，還使用了一個 *zomm: 1 的屬性，這是 IEhack ，由於 IE6-7 並不支持 W3C 的 BFC ，而是使用私有屬性 hasLayout 。從表現上來講，hasLayout 跟 BFC 很類似，只是 hasLayout 自身存在不少問題，致使了 IE6-7 中一系列的 bug 。觸發 hasLayout 的條件與觸發 BFC 有些類似，具體狀況 Kayo 會另寫文章介紹。這裏 Kayo 推薦爲元素設置 IE 特有的 CSS 屬性 zoom: 1 觸發 hasLayout ，zoom 用於設置或檢索元素的縮放比例，值爲「1」即便用元素的實際尺寸，使用 zoom: 1 既能夠觸發 hasLayout 又不會對元素形成其餘影響，相對來講會更爲方便。
這時咱們須要注意一個問題：既然 hasLayout 有着跟 BFC 類似的功能，那麼在實際開發中，就要爲須要觸發 BFC 的元素同時觸發 hasLayout ，這樣 BFC 和 hasLayout 具備的一些特殊性質能夠在現代瀏覽器和 IE 中同時產生，避免一個元素在不一樣瀏覽器間的表現由於 BFC 或 hasLayout 出現差別。事實上，在實際開發中不少莫名其妙的問題其實都是所以而產生的。固然一樣地，若是一個元素沒有觸發 BFC ，也要儘可能保證它沒有觸發 hasLayout 。
6三、移動端的佈局用過媒體查詢嗎？
經過媒體查詢能夠爲不一樣大小和尺寸的媒體定義不一樣的css，適合相應的設備顯示；即響應式佈局
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
6四、使用 CSS 預處理器嗎？喜歡那個？
1、什麼是CSS預處理器
CSS預處理器定義了一種新的語言，基本的思想是用一種專門的編程語言，開發者只須要使用這種語言進行編碼工做，減小枯燥無味的CSS代碼的編寫過程的同時，它能讓你的CSS具有更加簡潔、適應性更強、可讀性更加、層級關係更加明顯、更易於代碼的維護等諸多好處。
CSS預處理器種類繁多，本次就以Sass、Less、Stylus進行比較。
2、語法
在使用CSS預處理器以前最重要的是瞭解語法，我只寫過stylus，就從網上找了下另外兩種語法的格式，與你們對比分享。
首先Sass和Less都是用的是標準的CSS語法，所以你能夠很方便的把已完成的CSS代碼轉爲預處理器識別的代碼，Sass默認使用 .sass擴展名，而Less默認使用.Less擴展名。
一下是二者的語法
/* style.scss or style.less */
h1 {
color: #0982C1;
}
你注意到Sass同時也支持老語法，就是不包含花括號和分號的書寫格式。
/* style.sass */
h1
color: #0982c1
然而Stylus支持的語法就更多樣性，它默認使用.styl的文件擴展名，下面是Stylus語法。
/* style.styl */
h1 {
color: #0982C1;
}
/* omit brackets */
h1
color: #0982C1;
/* omit colons and semi-colons */
h1
color #0982C1
3、變量
你能夠在CSS預處理中聲明變量，並在整個樣式單中使用，支持任何類型的變量，例如：顏色、數值（是否包含單位）、文本。而後你能夠任意的調取和使用該變量。Sass的變量是必須$開始，而後變量名和值要冒號隔開，跟CSS屬性書寫格式一致。
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $publicColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
而Less的變量名使用@符號開始：
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @publicColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
Stylus對變量名沒有任何限定，你能夠是$開始，也能夠是任意字符，並且與變量值之間能夠用冒號、空格隔開，須要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量，但其對應的值並不會賦予該變量，換句話說，在 Stylus 的變量名不要用 @ 開頭。
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth
上面三種不一樣的CSS寫法，最終將會生成相同結果：
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
最容易體現它的好處的是，假設你在CSS中使用同一種顏色數十次，若是你要修改顯色，須要找到並修改十次相同的代碼，而有了CSS預處理器，修改一個地方就夠了。
4、嵌套
若是你須要在CSS中相同的parent引用多個元素，你須要一遍一遍的去寫parent。例如：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
然而若是用CSS預處理器，就能夠少些不少單詞，並且父節點關係一目瞭然。
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
stylus還可省略花括號，書寫更加方便，根據我的喜愛還可刪除中間冒號。
section
margin: 10px;
nav
height: 25px;
a
color: #0982C1;
&:hover
text-decoration: underline;
最終生成CSS結果是：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
6五、瀏覽器是怎樣解析CSS選擇器的？
按照從上到下，從右到左的順序解析。
.list a {color:blue;}
- 1
先解析到 a 標籤，並將頁面上全部 a 標籤的字體顏色都按照 color:red 進行渲染（藍色），再解析到 .list ，將頁面上全部 .list 類目下的 a 標籤的字體渲染成藍色。是的，你沒有看錯，瀏覽器解析CSS歷來就是這麼苦逼。
6六、margin和padding分別適合什麼場景使用？
◆什麼時候應當使用margin
須要在border外側添加空白時。
空白處不須要背景（色）時。
上下相連的兩個盒子之間的空白，須要相互抵消時。如15px+20px的margin，將獲得20px的空白。
◆什麼時候應當時用padding
須要在border內測添加空白時。
空白處須要背景（色）時。
上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px+20px的padding，將獲得35px的空白。
◆瀏覽器兼容性問題
在IE5.x、IE6中，爲float的盒子指定margin時，左側margin可能會變成兩倍的寬度。經過改用padding或指定盒子爲display:inline能夠解決。
6七、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
6八、元素豎向的百分比設定是相對於容器的高度嗎？
（1）豎向百分比 ——之height
.con{
width: 200px;
height: 100px;
background: gray;
margin-left: 200px;
}
p{
/*margin-top: 20%;*/
background: cornflowerblue;
height: 50%;
}
<div class="con">
<p>這是測試的內容！</p>
</div>
可見對於height屬性取值百分比，是現對於容器高度的
（2）豎向百分比——之 間距
對於margin-top、margin-bottom、padding-top、padding-bottom這些豎直方向的內外邊距屬性的百分比取值，
參考的實際上是容器的寬度而不是高低。
p{
margin-top: 20%;
background: cornflowerblue;
/*height: 50%;*/
}
6九、什麼是響應式設計？
隨着移動設備的流行使用，在移動設備端展現的互聯網信息量愈來愈大，所以網頁內容爲了適應移動設備端的顯示效果，從而出現了響應式佈局設計理念。
響應式佈局設計的理念是：
頁面的佈局方式應當根據用戶所處的設備環境（系統平臺，屏幕尺寸，屏幕方向）進行正確的響應佈局調整，不管用戶使用的是筆記本仍是手機或者平板，咱們的網站頁面都可以自動切換分辨率，圖片大小尺寸以及相關的腳本功能，響應式Web設計的目的就是爲了：只需一個網站前臺源碼，卻能兼容多個終端，而不是爲了每一個終端去單獨設計網站前臺。
70、視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）
答：視差滾動（Parallax Scrolling）就是這樣的效果之一。這種技術經過在網頁向下滾動的時候，控
制背景的移動速度比前景的移動速度慢來建立出使人驚歎的3D效果。
原理：（1）CSS3實現
優勢：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
（2）jquery實現
經過控制不一樣層滾動速度，計算每一層的時間，控制滾動效果。
優勢：能兼容到各個版本的，效果可控性好
缺點：開發起來對製做者要求高
（3）插件實現方式
例如：parallax-scrolling，兼容性十分好
7一、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。
單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
僞元素由雙冒號和僞元素名稱組成。雙冒號是在css3規範中引入的，用於區分僞類和僞元素。可是僞類兼容現存樣式，瀏覽器須要同時支持舊的僞類，好比:first-line、:first-letter、:before、:after等。
對於CSS2以前已有的僞元素，好比:before，單冒號和雙冒號的寫法::before做用是同樣的。
7二、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
- 情景一：input文本框是純色背景的
- input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0px 1000px white inset;
- border: 1px solid #CCC!important;
- }
- 思路二： 關閉瀏覽器自帶填充表單功能
- 設置表單屬性 autocomplete="off/on" 關閉自動填充表單，本身實現記住密碼
- <!-- 對整個表單設置 -->
- <form autocomplete="off" method=".." action="..">
- <!-- 或對單一元素設置 -->
- <input type="text" name="textboxname" autocomplete="off">
7三、你對line-height是如何理解的？
「行高」顧名思意指一行文字的高度。具體來講是指兩行文字間基線之間的距離。基線實在英文字母中用到的一個概念，咱們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即爲基線。
該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成爲「行間距」）分爲兩半，分別加到一個文本行內容的頂部和底部。能夠包含這些內容的最小框就是行框。
原始數字值指定了一個縮放因子，後代元素會繼承這個縮放因子而不是計算值
7四、設置元素浮動後，該元素的display值是多少？
不管行內元素仍是塊元素，被設置浮動以後，display屬性值都變爲block;
7五、怎麼讓Chrome支持小於12px 的文字
Chrome 27以前的中文版桌面瀏覽器會默認設定頁面的最小字號是12px，英文版則沒有限制，主要是由於chrome認爲漢字小於12px就會增長識別難度，尤爲是中文經常使用的宋體和微軟雅黑。而咱們在實際項目中，對於數字/英文內容，其餘字體的文本可能會有特殊的需求要求它們以更小的字號來顯示，這個時候就須要取消瀏覽器的自動調整功能了。
通常解決方案是禁止webkit瀏覽器配置調整網頁的字體大小。以下CSS定義方式：
[css] view plaincopy
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }
再講一下text-size-adjust屬性，該屬性用來設定文字大小是否根據設備(瀏覽器)來自動調整顯示大小，safari 3.0+，chrome 1.0+能夠支持。屬性值，能夠爲三種：
percentage：字體顯示的大小；
auto：默認，字體大小會根據設備/瀏覽器來自動調整；
none:字體大小不會自動調整
聽說該屬性最初專門是爲iPhone版safari設計的，用來自動調整普通網頁在iPhone手機端字體的展示問題，不過，既然是webkit的私有屬性，如今也常常用在webkit內核的桌面瀏覽器限制頁面展現。實際上，這是webkit的一個bug。在最新版的Chrome已經修復。
須要注意的是，不合理的使用-webkit-text-size-adjust:none會形成許多很差的影響。好比將其定義爲全局屬性的話，在Chrome中當用戶放大縮小頁面（PC上按住Ctrl滾動鼠標滾輪可縮放網頁）的時候，文字卻維持定義的大小而不放縮，給用戶帶來的不太友好的體驗。因此咱們在使用時，最好定義爲局部有效，而不要圖省事一句html{-webkit-text-size-adjust:none;}了事。
因爲沒有 -o-text-size-adjust，這樣的CSS 屬性，在 Opera，咱們就只能經過本身手動設置了：工具->首選項->高級->字體->最小字體大小（像素）。
PC桌面版Chrome 27正式取消了-webkit-text-size-adjust屬性的支持，其實是修正了原有的bug。若是定義該屬性在Chrome調試窗口會顯示Unknown property name，全部字號最小爲12px。可是，移動端chrome/safari目前依然支持-webkit-text-size-adjust屬性。由於此屬性的濫用會使得webkit內核的瀏覽器失去調節能力，對於有視覺障礙的瀏覽者很是不友好（尤爲是移動終端），那麼如今該如何實現原來的需求呢？
咱們能夠嘗試經過對文字區域局部應用如下樣式解決：
[css] view plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
}
12×0.75=9，對於其它瀏覽器來講，12px如下的字號都是能夠識別的，這裏僅須要對於Chrome瀏覽器進行縮放。但是如何分辨是Safari仍是Chrome，目前尚沒有有效的CSS hack。能夠經過javascript來判斷是否爲Chrome。判斷方法：var isChrome = !!window.chrome;當檢測爲Chrome的時候，將.chrome_adjust這個類添加到對應的標籤。
可是，問題尚未解決。看到網頁在三種瀏覽器的不一樣表現：
1）、Chrome下因爲啓用了縮放，因此字符間距出現問題，影響了美觀，這時候若是追求完美，可能你還會想到js判斷爲Chrome後再用CSS屬性letter-spacing去修復；
2）、Firefox不認識-webkit，因此表現正常，9px；
3）、Opera 12.5+可以識別-webkit-前綴（Opera 12.15版本，內核暫未更換爲webkit，可是已可以識別-webkit-前綴了，並且在檢查元素時還抹掉了前綴），但又可以顯示12px如下的字號，結果變成了9×0.75，影響了肉眼的識別，這時候，又得給opera添加-o-transform: scale(1);這個屬性。
[css] view plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1); //針對能識別-webkit的opera browser設置
}
7六、讓頁面裏的字體變清晰，變細用CSS怎麼作？
CSS3裏面加入了一個「-webkit-font-smoothing」屬性。這個屬性能夠使頁面上的字體抗鋸齒,使用後字體看起來會更清晰舒服。加上以後就頓時感受頁面小清晰了。
7七、font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
要搞清楚這個問題，首先要明白字體是怎麼回事。一種字體有粗體、斜體、下劃線、刪除線等諸多屬性。
可是並非全部字體都作了這些，一些不經常使用的字體，或許就只有個正常體，若是你用Italic，就沒有效果了~這時候你就要用Oblique.
能夠理解成Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字傾斜！
italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.
7七、position:fixed;在android下無效怎麼處理？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
7八、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？
多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms
7九、display:inline-block 何時會顯示間隙？
inline-block水平呈現的元素間，換行顯示或空格分隔的狀況下會有間距
80、overflow: scroll時不能平滑滾動的問題怎麼處理？
（1）阻止全部能致使頁面滾動的事件。//scroll不能阻止，只能阻止mousewheel，鼠標拽滾動條就悲劇了；
（2）bodyoverflow:hidden//win下右側滾動條會消失致使頁面橫移，移動端阻止不了；
（3）把滾動部分單獨放在一個div裏，和彈出部分同級，body和window同高。//全部涉及offset/scrollTop的方法都要修改。fix而且width100%的元素(好比微博頂欄)會壓在內容區滾動條上；
（4）彈出時算scrollTop，給內容區fix而後top移動到目前位置，同時body給一個overflow-y:scroll強撐出滾動條。
8一、有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
box-sizing方案 和 absolute position方案
（1）外層box-sizing: border-box; 同時設置padding: 100px 0 0；
（2）內層100像素高的元素向上移動100像素，或使用absolute定位防止佔據空間；
（3）另外一個元素直接height: 100%; 代碼以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }
</style>
</head>
<body>
<div class="outer">
<div class="A"></div>
<div class="B"></div>
</div>
</body>
</html>
第二種css 代碼 以下 ：
html, body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }
第三種css 代碼 以下：
html, body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
8二、png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？
三種都是圖片格式，但它們保存的方式不一樣，因此區別很大，PNG：這是三種中質量最好的一種，保存圖像是靜態圖，能夠保留32位色，也能保留透明與半透明區域，若是你是位圖像設計者，要保存一幅本身設計的而且只有一個圖層的圖，建議你選擇Png，可是不少網站不支持PNG上傳 JPG：這是目前使用最普遍的格式之一，由於其高質量的壓縮率致使的圖片大小減小，並且也支持32位色彩，所以被普遍使用，通常狀況下，任何支持圖片的地方都支持jpg，也爲靜態圖，但確點是不支持透明區域 GIF：這也是目前使用最普遍的格式之一，和jpg相比，有如下不一樣：顏色數只支持256色，支持透明區域，不支持半透明區域，能夠保存爲動態圖
8三、style標籤寫在body後與body前有什麼區別？
寫在head標籤中利於瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。
寫在body標籤後因爲瀏覽器以逐行方式對html文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標籤）會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後從新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效致使的頁面閃爍問題）
8四、頁面重構怎麼操做？
網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。
也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。
對於傳統的網站來講重構一般是：
表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面
減小代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
加強用戶體驗
一般來講對於速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
程序的性能優化(如數據讀寫)
採用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存
8七、你用的駕輕就熟用的熟練地編輯器&開發環境是什麼樣子？
Sublime Text 3 + 相關插件編寫前端代碼
Google chrome 、Mozilla Firefox瀏覽器 +firebug 兼容測試和預覽頁面UI、動畫效果和交互功能
Node.js+Gulp
git 用於版本控制和Code Review
8八、平時如何管理你的項目？
先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如 頁面 模塊 開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。
8九、移動端（Android IOS）怎麼作好用戶體驗?
清晰的視覺縱線、
信息的分組、極致的減法、
利用選擇代替輸入、
標籤及文字的排布方式、
依靠明文確認密碼、
合理的鍵盤利用
90、Label的做用是什麼？是怎麼用的？（加 for 或 包裹）
label標籤是用來定義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
主要有如下兩種用法用法：
1、
[html] view plain copy
- <label for = "Name">Number:</label>
- <input type="text" name="Name" id="Name" />
2、
[html] view plain copy
- <label>Data:<input type="text" name="B" /><label>