盒子模型的了解 ?
- 标準模式和混雜模式(IE)。
- 在标準模式下浏覽器按照規範呈現頁面；
- 在混雜模式下，頁面以一種比較寬松的向後相容的方式顯示。
- 混雜模式通常模拟老式浏覽器的行為以防止老站點無法工作。
CSS 盒子模型具有内容 (content)、填充 (padding)、邊框 (border)、邊界 (margin)這些屬性。
我們所說的 width，height 指的是内容 (content) 的寬高。
一個盒子模型的中：
- 寬度 = width+ pdding(寬) + border(寬)。
- 高度 = height + padding(高) + border(高)。
如何在頁面上實作一個圓形的可點選區域 ？
- 1、map+area 或者 svg
- 2、border-radius
- 3、純 js 實作，需要求一個點在不在圓上簡單算法、擷取滑鼠坐标等等
實作不使用 border 畫出 1px 高的線，在不同浏覽器的标準模式與怪異模式下都能保持一緻的效果。
CSS 中哪些屬性可以同父元素繼承 ?
繼承：(X)HTML 元素可以從其父元素那裡繼承部分 CSS 屬性，即使目前元素并沒有定義該屬性，比如：color，font-size。
box-sizing 常用的屬性有哪些 ？分别有什麼作用 ？
常用的屬性：content-box、 border-box 、inherit
作用
- content-box(預設)：寬度和高度分别應用到元素的内容框。在寬度和高度之外繪制元素的内邊距和邊框(元素預設效果)。
- border-box：元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制。通過從已設定的寬度和高度分别減去邊框和内邊距才能得到内容的寬度和高度。
頁面導入樣式時，使用 link 和 @import 有什麼差別 ？
- link 屬于 XHTML 标簽，除了加載 CSS 外，還能用于定義 RSS(是一種描述和同步網站内容的格式，是使用最廣泛的 XML 應用), 定義 rel 連接配接屬性等作用；
- 而 @import 是 CSS 提供的，隻能用于加載 CSS;
- 頁面被加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載;
- import 是 CSS2.1 提出的，隻在 IE5 以上才能被識别，而 link 是 XHTML 标簽，無相容問題。
- 總之，link 要優于 @import。
常見相容性問題？
- 浏覽器預設的 margin 和 padding 不同。解決方案是加一個全局的 *{margin: 0; padding: 0;} 來統一。
- IE下 event 對象有 event.x，event.y 屬性，而 Firefox 下沒有。Firefox 下有 event.pageX，event.PageY 屬性，而 IE 下沒有。解決辦法：var mx = event.x ? event.x : event.pageX;
- 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 {}
清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法 ？
一個塊級元素如果沒有設定 height，那麼其高度就是由裡面的子元素撐開，如果子元素使用浮動，脫離了标準的文檔流，那麼父元素的高度會将其忽略，如果不清除浮動，父元素會出現高度不夠，那樣如果設定 border 或者 background 都得不到正确的解析。
正是因為浮動的這種特性，導緻本屬于普通流中的元素浮動之後，包含框内部由于不存在其他普通流元素了，也就表現出高度為 0(高度塌陷)。在實際布局中，往往這并不是我們所希望的，是以需要閉合浮動元素，使其包含框表現出正常的高度。
清除浮動的方式
- 父級 div 定義 height，原理：父級 div 手動定義 height，就解決了父級 div 無法自動擷取到高度的問題。
- 結尾處加空 div 标簽 clear: both，原理：添加一個空 div，利用 css 提高的 clear: both 清除浮動，讓父級 div 能自動擷取到高度。
- 父級 div 定義 overflow: hidden， 原理：必須定義 width 或 zoom: 1，同時不能定義 height，使用 overflow: hidden 時，浏覽器會自動檢查浮動區域的高度
- 父級 div 也一起浮動 。
- 父級 div 定義 display: table 。
- 父級 div 定義 僞類 :after 和 zoom 。
- 結尾處加 br 标簽 clear: both， 原理：父級 div 定義 zoom: 1 來解決 IE 浮動問題，結尾處加 br 标簽 clear: both。
總結：比較好的是倒數第 2 種方式，簡潔友善。
position 、float 和 display 的取值和各自的意思和用法
position
- position 屬性取值：static(預設)、relative、absolute、fixed、inherit、sticky。
- postision：static；始終處于文檔流給予的位置。看起來好像沒有用，但它可以快速取消定位，讓 top，right，bottom，left 的值失效。在切換的時候可以嘗試這個方法。
- 除了 static 值，在其他三個值的設定下，z-index 才會起作用。确切地說 z-index 隻在定位元素上有效。
- position：relative 和 absolute 都可以用于定位，差別在于前者的 div 還屬于正常的文檔流，後者已經是脫離了正常文檔流，不占據空間位置，不會将父類撐開。定位原點 relative 是相對于它在正常流中的預設位置偏移，它原本占據的空間任然保留；absolute 相對于第一個 position 屬性值不為 static 的父類。是以設定了 position：absolute，其父類的該屬性值要注意，而且 overflow：hidden 也不能亂設定，因為不屬于正常文檔流，不會占據父類的高度，也就不會有滾動條。
- fixed 舊版本 IE 不支援，卻是很有用，定位原點相對于浏覽器視窗，而且不能變。常用于 header，footer 或者一些固定的懸浮 div，随滾動條滾動又穩定又流暢，比 JS 好多了。fixed 可以有很多創造性的布局和作用，相容性是問題。
- position：inherit。規定從父類繼承 position 屬性的值，是以這個屬性也是有繼承性的，但需要注意的是 IE8 以及往前的版本都不支援 inherit 屬性。
- sticky ：設定了sticky 的元素，在螢幕範圍(viewport)時該元素的位置并不受到定位影響(設定是 top、left 等屬性無效)，當該元素的位置将要移出偏移範圍時，定位又會變成 fixed，根據設定的 left、top 等屬性成固定位置的效果。
float
- float：left (或 right)，向左(或右)浮動，直到它的邊緣碰到包含框或另一個浮動框為止。且脫離普通的文檔流，會被正常文檔流内的塊框忽略。不占據空間，無法将父類元素撐開。
- 任何元素都可以浮動，浮動元素會生成一個塊級框，不論它本身是何種元素。是以，沒有必要為浮動元素設定 display：block。
- 如果浮動非替換元素，則要指定一個明确的 width，否則它們會盡可能的窄。什麼叫替換元素 ？根據元素本身的特點定義的， (X)HTML中的 img、input、textarea、select、object 都是替換元素，這些元素都沒有實際的内容。 (X)HTML 的大多數元素是不可替換元素，他們将内容直接告訴浏覽器，将其顯示出來。
display
- display 屬性取值：none、inline、inline-block、block、table 相關屬性值、inherit。
- display 屬性規定元素應該生成的框的類型。文檔内任何元素都是框，塊框或行内框。
- display：none 和 visiability：hidden 都可以隐藏 div，差別有點像 absolute 和 relative，前者不占據文檔的空間，後者還是占據文檔的位置。
- display：inline 和 block，又叫行内元素和塊級元素。表現出來的差別就是 block 獨占一行，在浏覽器中通常垂直布局，可以用 margin 來控制塊級元素之間的間距(存在 margin 合并的問題，隻有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行内框、浮動框或絕對定位之間的外邊距不會合并。)；而 inline 以水準方式布局，垂直方向的 margin 和 padding 都是無效的，大小跟内容一樣，且無法設定寬高。inline 就像塑膠袋，内容怎麼樣，就長得怎麼樣；block 就像盒子，有固定的寬和高。
- inline-block 就介于兩者之間。
- table 相關的屬性值可以用來垂直居中，效果一般。
- flex
定位機制
上面三個屬性都屬于 CSS 定位屬性。CSS 三種基本的定位機制：普通流、浮動、絕對定位。
css3 動畫效果屬性有哪些 ?
- animation-name：規定需要綁定到選擇器的 keyframe 名稱。。
- animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。
- animation-timing-function：規定動畫的速度曲線。
- animation-delay：規定在動畫開始之前的延遲。
- animation-iteration-count：規定動畫應該播放的次數。
- animation-direction：規定是否應該輪流反向播放動畫。
canvas 與 svg 的差別 ？
- Canvas 是基于像素的即時模式圖形系統，最适合較小的表面或較大數量的對象，Canvas 不支援滑鼠鍵盤等事件。
- SVG 是基于形狀的保留模式圖形系統，更加适合較大的表面或較小數量的對象。
- Canvas 和 SVG 在修改方式上還存在着不同。繪制 Canvas 對象後，不能使用腳本和 CSS 對它進行修改。因為 SVG 對象是文檔對象模型的一部分，是以可以随時使用腳本和 CSS 修改它們。
現在對兩種技術做對比歸納如下：
Canvas
- 依賴分辨率
- 不支援事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式儲存結果圖像
- 最适合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
- 不依賴分辨率
- 支援事件處理器
- 最适合帶有大型渲染區域的應用程式(比如谷歌地圖)
- 複雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快)
- 不适合遊戲應用
px 和 em 的差別 ？
- px 像素(Pixel)。相對長度機關。像素 px 是相對于顯示器螢幕分辨率而言的。(引自CSS2.0手冊)
- em 是相對長度機關。相對于目前對象内文本的字型尺寸。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸。(引自CSS2.0手冊)
- 任意浏覽器的預設字型高都是 16px。所有未經調整的浏覽器都符合：1em = 16px。那麼12px = 0.75em,10px = 0.625em。為了簡化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Font-size = 62.5%，這就使 em 值變為 16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說隻需要将你的原來的 px 數值除以 10，然後換上 em 作為機關就行了。
會不會用 ps 扣圖，png、jpg、gif 這些圖檔格式解釋一下，分别什麼時候用。如何優化圖像、圖像格式的差別 ?
JPG 的特性
- 支援攝影圖像或寫實圖像的進階壓縮，并且可利用壓縮比例控制圖像檔案大小。
- 有損壓縮會使圖像資料品質下降，并且在編輯和重新儲存 JPG 格式圖像時，這種下降損失會累積。
- JPG 不适用于所含顔色很少、具有大塊顔色相近的區域或亮度差異十分明顯的較簡單的圖檔。
PNG 的特性
- 能在保證最不失真的情況下盡可能壓縮圖像檔案的大小。
- PNG 用來存儲灰階圖像時，灰階圖像的深度可多到 16 位，存儲彩色圖像時，彩色圖像的深度可多到 48 位，并且還可存儲多到 16 位的 α 通道資料。
- 對于需要高保真的較複雜的圖像，PNG 雖然能無損壓縮，但圖檔檔案較大，不适合應用在 Web 頁面上。
- 另外還有一個原則就是用于頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該盡量用 PNG 格式進行存儲，這樣才能更好的保證設計品質。而其他一些内容元素，如廣告 Banner、商品圖檔 等對品質要求不是特别苛刻的，則可以用 JPG 去進行存儲進而降低檔案大小。
GIF格式特點
- 透明性: Gif 是一種布爾透明類型，既它可以是全透明，也可以是全不透明，但是它并沒有半透明(alpha 透明)。
- 動畫：Gif 這種格式支援動畫。
- 無損耗性：Gif 是一種無損耗的圖像格式，這也意味着你可以對 gif 圖檔做任何操作也不會使得圖像品質産生損耗。
- 水準掃描：Gif 是使用了一種叫作 LZW 的算法進行壓縮的，當壓縮 gif 的過程中，像素是由上到下水準壓縮的，這也意味着同等條件下，橫向的 gif 圖檔比豎向的 gif 圖檔更加小。例如 50010 的圖檔比 10500 的圖檔更加小。間隔漸進顯示：Gif 支援可選擇性的間隔漸進顯示
由以上特點看出隻有 256 種顔色的 gif 圖檔不适合作為照片，它适合做對顔色要求不高的圖形。
我們知道可以以外鍊的方式引入 CSS 檔案，請談談外鍊引入 CSS 有哪些方式，這些方式的性能有差別嗎 ？
CSS 的引入方式最常用的有三種
第一：外鍊式
這種方法可以說是現在占統治地位的引入方法。
如同 IE 與浏覽器。這也是最能展現 CSS 特點的方法；
最能展現 DIV + CSS 中的内容離的思想，也最易改版維護，代碼看起來也是最美觀的一種。
第二：内部樣式表
這種方法的使用情況要少的多，最長見得就是通路量大的門戶網站。或者通路量較大的企業網站的首頁。
與第一種方法比起來，優弊端也明顯。
優點：速度快，所有的 CSS 控制都是針對本頁面标簽的，沒有多餘的 CSS 指令；再者不用外鍊 CSS 檔案。直接在文檔中讀取樣式。
缺點：就是改版麻煩些，單個頁面顯得臃腫，CSS 不能被其他 HTML 引用造成代碼量相對較多，維護也麻煩些采用這種方法的公司大多有錢，對他們來說使用者量是關鍵，他們不缺人進行複雜的維護工作。
第三：行内樣式
認為 HTML 裡不能出現 CSS 指令。其實有時候沒有什麼大不了。比如通用性差，效果特殊，使用 CSS 指令較少，并且不常改動的地方，使用這種方法反而是很好的選擇。
第四、@import 引入方式
CSS Sprite 是什麼，談談這個技術的優缺點。
加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖檔規格越小越好，重量越小越好，其實規格大小無計算機統一都按 byte 計算。用戶端每顯示一張圖檔都會向伺服器發送請求。是以，圖檔越多請求次數越多，造成延遲的可越大。
- 利用 CSS Sprites 能很好地減少了網頁的 http 請求，進而大大的提高了頁面的性能，這也是 CSS Sprites 的優點，也是其被廣泛傳播和應用的主要原因；
- CSS Sprites 能減少圖檔的位元組，曾經比較過多次 3 張圖檔合并成 1 張圖檔的位元組總是小于這 3 張圖檔的和。
- 解決了網頁設計師在圖檔命名上的困擾，隻需對一張集合的圖檔上命名就可以了，不需要對每一個小元素名，進而提高了網頁的制作效率。
- 更換風格友善，隻需要在一張或少張圖檔上修改圖檔的顔色或樣式，整個網頁的風格就可以改變。維護起友善。
誠然 CSS Sprites 是如此的強大，但是也存在一些不可忽視的缺點，如下：
- 在圖檔合并的時候，你要把多張圖檔有序的合理的合并成一張圖檔，還要留好足夠的空間，防止闆塊内不不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的螢幕下的自适應頁面，你的圖檔如果不夠寬，很容背景斷裂；
- CSS Sprites 在開發的時候比較麻煩，你要通過 photoshop 或其他工具測量計算每一個背景單元的精确位是針線活，沒什麼難度，但是很繁瑣；幸好騰訊的鬼哥用 RIA 開發了一個 CSS Sprites 樣式生成工具，雖然些使用上的不靈活，但是已經比 photoshop 測量來的友善多了，而且樣式直接生成，複制，拷貝就 OK！
- CSS Sprites 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖檔，無需改的好不要動，這樣避免改動更多的 css，如果在原來的地方放不下，又隻能(最好)往下加圖檔，這樣圖檔的字加了，還要改動 css。
CSS Sprites 非常值得學習和應用，特别是頁面有一堆 ico(圖示)。總之很多時候大家要權衡一下再決定是不是應用 CSS Sprites。
優先級算法如何計算？内聯和 important 哪個優先級高 ？
- 優先級就近原則，樣式定義最近者為準
- 載入樣式以最後載入的定位為準
- 優先級為 !important > [ id > class > tag ]
- Important 比内聯優先級高
css 的基本語句構成是 ？
回答：選擇器、屬性和屬性值。
如果讓你來制作一個通路量很高的大型網站，你會如何來管理所有 CSS 檔案、JS 與圖檔？
回答：涉及到人手、分工、同步；
- 先期團隊必須确定好全局樣式(globe.css)，編碼模式 (utf-8) 等
- 編寫習慣必須一緻(例如都是采用繼承式的寫法，單樣式都寫成一行)；
- 标注樣式編寫人，各子產品都及時标注(标注關鍵樣式調用的地方)；
- 頁面進行标注(例如頁面子產品開始和結束)；
- CSS 跟 HTML 分檔案夾并行存放，命名都得統一(例如 style.css)
- JS 分檔案夾存放，命名以該 JS 功能為準
- 圖檔采用整合的 png8 格式檔案使用，盡量整合在一起使用，友善将來的管理。
CSS 選擇符有哪些 ？哪些屬性可以繼承 ？優先級算法如何計算 ？新增僞類有那些 ？
CSS 選擇符
- id 選擇器( #myid)
- 類選擇器(.myclassname)
- 标簽選擇器(div, h1, p)
- 相鄰選擇器(h1 + p)
- 子選擇器(ul > li)
- 後代選擇器(li a)
- 通配符選擇器( * )
- 屬性選擇器(a[rel = "external"])
- 僞類選擇器(a: hover, li: nth - child)
可繼承的樣式
font-size，font-family，color，ul，li，dl，dd，dt；
不可繼承的樣式
border padding margin width height 事實上，寬度也不是繼承的，而是如果你不指定寬度，那麼它就是 100%。由于你子 DIV 并沒有指定寬度，那它就是 100%，也就是與父 DIV 同寬，但這與繼承無關，高度自然也沒有繼承一說。
優先級算法
- 優先級就近原則，同權重情況下樣式定義最近者為準;
- 載入樣式以最後載入的定位為準;
- 優先級為: !important > id > class > tag , important 比 内聯優先級高
CSS3 新增僞類舉例
- :root 選擇文檔的根元素，等同于 html 元素
- :empty 選擇沒有子元素的元素
- :target 選取目前活動的目标元素
- :not(selector) 選擇除 selector 元素意外的元素
- :enabled 選擇可用的表單元素
- :disabled 選擇禁用的表單元素
- :checked 選擇被選中的表單元素
- :after 選擇器在被選元素的内容後面插入内容
- :before 選擇器在被選元素的内容前面插入内容
- :nth-child(n) 比對父元素下指定子元素，在所有子元素中排序第 n
- :nth-last-child(n) 比對父元素下指定子元素，在所有子元素中排序第 n，從後向前數
- :nth-child(odd) 奇數
- :nth-child(even) 偶數
- :nth-child(3n+1)
- :first-child
- :last-child
- :only-child
- :nth-of-type(n) 比對父元素下指定子元素，在同類子元素中排序第 n
- :nth-last-of-type(n) 比對父元素下指定子元素，在同類子元素中排序第 n，從後向前數
- :nth-of-type(odd)
- :nth-of-type(even)
- :nth-of-type(3n+1)
- :first-of-type
- :last-of-type
- :only-of-type
- ::selection 選擇被使用者選取的元素部分
- :first-line 選擇元素中的第一行
- :first-letter 選擇元素中的第一個字元
CSS3 有哪些新特性 ?
- CSS3 實作圓角(border-radius:8px)
- 陰影(box-shadow:10px)
- 對文字加特效(text-shadow)
- 線性漸變(gradient)
- 旋轉、縮放、定位、傾斜
transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
- 增加了更多的 CSS 選擇器
- 多背景 rgba
collapse、overflow、float 這些特性互相疊加後會怎麼樣？
margin collapse 我覺得這裡的意思應該是 Collapsing margins，即外邊距折疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距。
其中所說的 margin 毗鄰，可以歸結為以下兩點：
- 這兩個或多個外邊距沒有被非空内容、padding、border 或 clear 分隔開。
- 這些 margin 都處于普通流中。
- 兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊。
- 浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊.
- 建立了塊級格式化上下文的元素，不和它的子元素發生 margin 折疊
absolute 的 containing block(容器塊) 計算方式跟正常流有什麼不同 ？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然後再判斷：
- 若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin，border 外的區域) 的最小矩形；
- 否則，則由這個祖先元素的 padding box 構成。
- 如果都找不到，則為 initial containing block。
補充：
- static / relative：簡單說就是它的父元素的内容框(即去掉 padding 的部分)
- absolute: 向上找最近的定位為 absolute / relative 的元素
- fixed: 它的 containing block 一律為根元素(html / body)，根元素也是 initial containing block
對 BFC 規範(塊級格式化上下文：blockformatting context)的了解 ？
W3C CSS 2.1 規範中的一個概念，它是一個獨立容器，決定了元素如何對其内容進行定位，以及與其他元素的關系和互相作用。
- 一個頁面是由很多個 Box 組成的，元素的類型和 display 屬性，決定了這個 Box 的類型。
- 不同類型的 Box，會參與不同的 Formatting Context(決定如何渲染文檔的容器)，是以 Box 内的元素會以不同的方式渲染，也就是說 BFC 内部的元素和外部的元素不會互相影響。