“每18至24個月，前端都會難一倍”
——赫門 “2015深JS大會《前端服務化之路》主題演講”
知識點
布局、盒子模型、選擇器優先級、CSS3、Flexbox、浮動元素、Sass、Less......
題目&答案
- 介紹一下CSS的盒子模型。
(1)有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading；
(2)盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
- CSS選擇符有哪些？哪些屬性可以繼承？
(1)id選擇器（#classId）
(2)類選擇器（.className）
(3)標簽選擇器（div，h1，p，span，table）
(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
- CSS 如何計算優先級？
就近原則，同權重情況下以樣式定義最近者為準；
載入樣式以最后載入的定位為準；
優先級：
!important > id > class > tag
important 比 內聯優先級高
- CSS3 新增的偽類有哪些？
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 單選框或復選框被選中。
- 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
給 div 設置一個寬度，然后添加 margin: 0 auto 屬性
居中一個浮動元素div{ width: 200px; margin: 0 auto; }
讓絕對定位的 div 居中確定容器的寬高（500*300） 設置層的外邊距 .element{ width: 500px; height: 300px; //高度可以不設 margin: -150px 0 0 -250px; position: relative; //相對定位 background-color: red; //顯示效果 left: 50%; top: 50%; }.element{ position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0; }
- display 有哪些值？各有何作用？
block 象塊類型元素一樣顯示。
none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
- position 中的 relative 和 absolute 的定位原點是什么？
absolute
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
//
fixed （老IE不支持）
生成絕對定位的元素，相對于瀏覽器窗口進行定位。
//
relative
生成相對定位的元素，相對于其正常位置進行定位。
//
static
默認值。沒有定位，元素出現在正常的流中
（忽略 top, bottom, left, right z-index 聲明）。
//
inherit
規定從父元素繼承 position 屬性的值。
- CSS3 有哪些新特性？
圓角-半徑（border-radius:8px），
陰影（box-shadow:10px），
文字特效（text-shadow、），
線性漸變（gradient），
旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器
多背景 rgba
- 解釋一下 CSS3 的 Flexbox （彈性盒布局模型），以及適用場景？
- 用純 CSS 創建一個三角形的原理是什么？
把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
- 如何設計一個滿屏“品”字布局？
簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
用float或inline使其不換行。
- 常見兼容性問題有哪些？
(1)png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8。
(2)瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
(3)IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
(4)IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性；
解決方法:統一通過getAttribute()獲取自定義屬性。
(5)
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性；
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
(6)Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
- li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
- 經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？
- 為什么要初始化CSS樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對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; }
- absolute 的 containing block（容器塊）計算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
(1)若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
(2)否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
//
補充：
(1)static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
(2)absolute: 向上找最近的定位為absolute/relative的元素
(3)fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
- CSS 里的 visibility 屬性有個 collapse 屬性值是干嘛用的？在不同瀏覽器下有什么區別？
- position 跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
- 談談你對 BFC 規范（塊級格式化上下文：block formatting context）的理解？
（W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
- CSS 定義的權重
以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：
/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}
//
如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現
- 請解釋一下為什么會出現浮動？什么時候需要清除浮動？以及清除浮動的方式是什么？
- 移動端的布局用過媒體查詢嗎？
- CSS 優化、提高性能的方法有哪些？
- 瀏覽器是怎樣解析 CSS 選擇器的？
- 在網頁中應該使用奇數還是偶數的字體？為什么？
- margin 和 padding 分別適合什么場景使用？
- 抽離樣式模塊怎么寫？說出思路，有無實踐經驗？（阿里）
- 元素豎向的百分比設定是相對于容器的高度嗎？
- 全屏滾動的原理是什么？用到了 CSS 的哪些屬性？
- 什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
- 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）
- ::before 和 :after 中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用。
- 如何修改 Chrome 記住密碼后自動填充表單的黃色背景？
- 你對 line-height 是如何理解的？
- 設置元素浮動后，該元素的 display 值是多少？（自動變成display:block）
- 怎么讓 Chrome 支持小于12px的字符？
- 讓頁面里的字體變清晰、變細用 CSS 怎么做？（-webkit-font-smoothing: antialiased;）
- font-style 屬性可以讓它賦值為“oblique”，oblique 是什么意思？
- position: fixed; 在 Android 下無效怎么處理？
- 如果需要手動寫動畫，你認為最小時間間隔是多久？為什么？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小時間間隔為 1/6*1000ms = 16.7ms
- overflow: scroll 時不能平滑滾動的問題怎么處理？
- png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp、jpg-large？
- 什么是 Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）
如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，所以不如隔離開。
因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。
同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，提高了webserver的http請求的解析速度。
- 介紹一下 Sass 和 Less 是什么？它們有何區別？
Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，語法跟css一樣(但多了些功能)，比css好寫，而且更容易閱讀。Sass語法類似與Haml，屬于縮排語法（makeup），用意就是為了快速寫Html和Css。
Less一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)。
區別：
(1))Sass是基于Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器，也可以在開發環節使用Less，然后編譯成Css文件，直接放到項目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
(2)變量符不一樣，less是@，而Scss是$，而且變量的作用域也不一樣，后面會講到。
(3)輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
(4)Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持。
系列：
前端開發面試題之HTML
前端開發面試題之綜合篇
前端開發面試題之JavaScript
資料搜集整理自 網絡
同時發布在 GitHub-前端開發面試題之CSS、GitBook-《WEB-DE》前端開發面試題之CSS
