1 CSS常見面試題
1 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin
2 box-sizing屬性？
用來控制元素的盒子模型的解析模式，默認為content-boxcontext-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬border-box：IE傳統(tǒng)盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬
3 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
不可繼承的樣式：border, padding, margin, width, height
優(yōu)先級（就近原則）：!important > [ id > class > tag ]
!important 比內聯(lián)優(yōu)先級高
4 CSS優(yōu)先級算法如何計算？
元素選擇符：1
class選擇符：10
id選擇符：100
元素標簽：1000
!important聲明的樣式優(yōu)先級最高，如果沖突再進行計算。
如果優(yōu)先級相同，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級最低。
5 CSS3新增偽類有那些?
p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態(tài)。
:checked 單選框或復選框被選中。
6 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
div：
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
浮動元素的上下左右居中：
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
絕對定位的左右居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
有更加優(yōu)雅的居中方式就是用flexbox，我以后會做整理。
7 display有哪些值？說明他們的作用?
inline（默認）–內聯(lián)
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block
8 position的值？
static（默認）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。
9 CSS3有哪些新特性？
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（對長的不可分割單詞換行）word-wrap：break-word
文字陰影：text-shadow：5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
font-face屬性：定義自己的字體
圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角
邊框圖片：border-image: url(border.png) 30 30 round
盒陰影：box-shadow: 10px 10px 5px #888888
媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性
10 請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發(fā)人員自由操作。
試用場景：彈性布局適合于移動前端開發(fā)，在Android和ios上也完美支持。
11.什么是 BFC機制
BFC(Block Formatting Context)，塊級格式化上下文，是一個獨立的渲染區(qū)域，讓處于 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
觸發(fā)條件 (以下任意一條)
float的值不為none
overflow的值不為visible
display的值為table-cell、tabble-caption和inline-block之一
position的值不為static或則releative中的任何一個
在IE下, Layout,可通過zoom:1 觸發(fā)BFC布局與普通文檔流布局區(qū)別:
BFC布局規(guī)則:
浮動的元素會被父級計算高度(父級元素觸發(fā)了BFC)
非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發(fā)了BFC)
margin不會傳遞給父級(父級觸發(fā)BFC)
屬于同一個BFC的兩個相鄰元素上下margin會重疊
普通文檔流布局: 浮動的元素是不會被父級計算高度
非浮動元素會覆蓋浮動元素的位置
margin會傳遞給父級元素
兩個相鄰元素上下的margin會重疊
開發(fā)中的應用
阻止margin重疊
可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個 div都位于同一個 BFC 區(qū)域之中)
自適應兩欄布局
可以阻止元素被浮動元素覆蓋
12. CSS3中新增的選擇器以及屬性
這里只是列出來, 具體的使用,請查看我的關于css3新增選擇器與屬性文章
13. 居中布局
水平居中
1. 行內元素: text-align:center
2. 塊級元素: margin:0 auto
3. 絕對定位和移動: absolute + transform
4. 絕對定位和負邊距: absolute + margin
5. flex布局: flex + justify-content:center
垂直居中
1. 子元素為單行文本: line-height:height
2. absolute + transform
3. flex + align-items:center
4. table: display:table-cell; vertical-align: middle
5. 利用position和top和負margin
水平垂直居中
1. 已知元素寬高:絕對定位+margin:auto:
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
2. 已知元素寬高: 絕對定位+負margin
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
3. absolute+transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父級的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
4.flex + justify-content + align-items
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句話就可以實現(xiàn)不定寬高水平垂直居中。*/
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
14. 清除浮動有哪些方法, 各有什么優(yōu)缺點
使用clear屬性的空元素 在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。
優(yōu)點: 簡單, 寫少量代碼, 兼容性也好 缺點: 添加無語義html元素, 不利于代碼語義化, 后期維護成本大
使用css的overflow屬性 給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設置容器寬高或設置zoom:1。在添加overflow屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
優(yōu)點: 簡單, 代碼少, 瀏覽器支持好 缺點: 不能和position配合使用, 因為超出的尺寸會被隱藏overflow:hidden
使用CSS的:after偽元素 結合 :after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）和 IEhack ，可以完美兼容當前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout。給浮動元素的容器添加一個 clearfix的class，然后給這個class添加一個:after偽元素實現(xiàn)元素末尾添加一個看不見的塊元素（Block element）清理浮動。通過CSS偽元素在容器的內部元素最后添加了一個看不見的空格"020"或點"."，并且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發(fā)haslayout。
優(yōu)點: 瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點: 代碼多，要兩句代碼結合使用，才能讓主流瀏覽器都支持給父級元素設置高度簡單, 代碼少,好掌握 缺點: 只適用于高度固定的布局
15. 用純CSS創(chuàng)建一個三角形的原理是什么
之前寫三角形, 都是直接記住代碼,沒有探究原因,我也是直到有一次面試時,面試大哥讓我說說css創(chuàng)建三角形的原理,我就......回來就趕緊翻資料.接下來我就將當時我理解的過程列舉出來:
1. 寫一個我們最熟悉的 border應用
.box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
效果如下:
2. 接下來,我們將border值增大
.box{
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
很容易發(fā)現(xiàn), border渲染并不是正方形, 而是梯形的.
3. 在增大border的基礎下, 此時我們將盒子寬高變成0,會產生什么效果呢!
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
四個三角形拼合成的矩形呈現(xiàn)在我們眼前,那如如果我們只想要一個三角形, 我們是不是可以設想將其他三個設為不可見;
4. 設置透明, 隱藏其中三個三角形
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
三角形這樣就出來, 有木有很簡單, 當然我們也可以采用逆向思維來寫這個效果, 就是先將所有邊框設為透明, 然后需要哪邊再對其設置顏色, 效果是一樣的
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
這樣給面試你的人講,講明白應該不是問題., 重點就是要理解border的應用
16. 實現(xiàn)三欄布局有哪些方法, 分別描述一下
三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發(fā)十分常見，那么什么是三欄布局？即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：
下面列出四種實現(xiàn)方式, 在開發(fā)中可以根據(jù)實際需求選擇適合自己的方法進行編碼:
Flex 布局
<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
簡單實用，現(xiàn)在比較流行的方案，但是需要考慮瀏覽器的兼容性。
絕對定位布局
<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
這種方案也簡單實用, 并且可以將 <div class="main"></div>元素放到第一位,使得主要內容優(yōu)先加載!
雙飛翼布局
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}
</style>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
圣杯布局
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局。
17. css3實現(xiàn)0.5px的細線
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<div class="line"></div>
18. link 與 @import 的區(qū)別
a.從屬關系區(qū)別@import是 CSS 提供的語法規(guī)則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等
b.加載順序區(qū)別加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。
c.兼容性區(qū)別@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。
d.DOM可控性區(qū)別可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于DOM方法是基于文檔的，無法使用@import的方式插入樣式。
19. 開發(fā)中為什么要初始化css樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
20. CSS優(yōu)化、提高性能的方法有哪些
盡量將樣式寫在單獨的css文件里面，在head元素中引用 將代碼寫成單獨的css文件有幾點好處：
內容和樣式分離，易于管理和維護
減少頁面體積
css文件可以被緩存、重用，維護成本降低
不使用@import避免使用復雜的選擇器，層級越少越好 建議選擇器的嵌套最好不要超過三層，
比如：精簡頁面的樣式文件，去掉不用的樣式利用CSS繼承減少代碼量避免
！important，可以選擇其他選擇器
21 什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
響應式網(wǎng)站設計(Responsive Web design)是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本?；驹硎峭ㄟ^媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
22 視差滾動效果？
視差滾動（Parallax Scrolling）通過在網(wǎng)頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創(chuàng)建出令人驚嘆的3D效果。
CSS3實現(xiàn)優(yōu)點：開發(fā)時間短、性能和開發(fā)效率比較好，缺點是不能兼容到低版本的瀏覽器jQuery實現(xiàn)通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
優(yōu)點：能兼容到各個版本的，效果可控性好缺點：開發(fā)起來對制作者要求高插件實現(xiàn)方式例如：parallax-scrolling，兼容性十分好
23 ::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用
單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。
:before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。
起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after
24 你對line-height是如何理解的？
行高是指一行文字的高度，具體說是兩行文字間基線的距離。
CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中：把line-height值設置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中，其實也可以把height刪除。多行文本垂直居中：需要設置display屬性為inline-block。
25 怎么讓Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
26 讓頁面里的字體變清晰，變細用CSS怎么做？
-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
27 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"/>
28 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？
多數(shù)顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
29 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據(jù)空間，所以會有間隔，把字符大小設為0，就沒有空格了。
解決方法：
可以將<li>代碼全部寫在一排浮動li中float：left在ul中用font-size：0（谷歌不支持）；
可以使用letter-space：-3px
30 display:inline-block 什么時候會顯示間隙？
有空格時候會有間隙 解決：移除空格margin正值的時候 解決：margin使用負值使用font-size時候
解決：font-size:0、letter-spacing、word-spacing
31 有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度
外層div使用position：relative；
高度要求自適應的div使用position: absolute; top: 100px; bottom: 0;
left: 0
32 png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
png是便攜式網(wǎng)絡圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.
優(yōu)點是：壓縮比高，色彩好。大多數(shù)地方都可以用。jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像。可以實現(xiàn)動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。
缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。
33 style標簽寫在body后與body前有什么區(qū)別？
頁面加載自上而下 當然是先加載樣式。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯(lián)或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現(xiàn)FOUC現(xiàn)象（即樣式失效導致的頁面閃爍問題）
34 CSS屬性overflow屬性定義溢出元素內容區(qū)的內容會如何處理?
參數(shù)是scroll時候，必會出現(xiàn)滾動條。參數(shù)是auto時候，子元素內容大于父元素時出現(xiàn)滾動條。
參數(shù)是visible時候，溢出的內容出現(xiàn)在父元素之外。
參數(shù)是hidden時候，溢出隱藏。
35 闡述一下CSS Sprites
將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)。
