CSS(3)

1.水平居中的方法

1.元素為行內元素，設置父元素text-align:center

2.如果元素寬度固定，可以設置左右margin為auto;

3.如果元素為絕對定位，設置父元素position為relative，元素設left:0;right:0;margin:auto;

4.使用flex-box布局，指定justify-content屬性為center

5.display設置為tabel-ceil

2.垂直居中的方法

1.將顯示方式設置為表格，display:table-cell,同時設置vertial-align：middle

2.使用flex布局，設置為align-item：center

3.絕對定位中設置bottom:0,top:0,並設置margin:auto

4.絕對定位中固定高度時設置top:50%，margin-top值為高度一半的負值

5.文本垂直居中設置line-height為height值

3.簡要介紹一下CSS3的新特性

在布局方面新增了flex布局，

在選擇器方面新增了例如:first-of-type,nth-child等選擇器，

在盒模型方面添加了box-sizing來改變盒模型，

在動畫方面增加了animation、2d變換、3d變換等。

在顏色方面添加透明、rgba等，

在字體方面 允許嵌入字體和設置字體陰影，同時當然也有盒子的陰影

最後還有關鍵的媒體查詢。

4.如何使用CSS實現硬件加速？

硬件加速是指通過創建獨立的復合圖層，讓GPU來渲染這個圖層，從而提高性能， 一般觸發硬件加速的CSS屬性有transform、opacity、filter，為了避免2D動畫在 開始和結束的時候的repaint操作，一般使用tranform:translateZ(0)

5.說一說css3的animation

6.絕對定位和相對定位的區別？

絕對定位是相對於最近的已經定位的祖先元素，沒有則相對於body，絕對定位脫離文檔流，

而相對定位是相對於元素在文檔中的初始位置，並且 相對定位的元素仍然占據原有的空間。

7.BFC是什麽？介紹一下，如何觸發BFC？

BFC也就是常說的塊格式化上下文，這是一個獨立的渲染區域，規定了內部如何布局，並且這個區域的子元素不會影響到外面的元素。其中比較重要的布局規則有內部box垂直放置、計算BFC的高度的時候，浮動元素也參與計算。 觸發BFC的規則有根元素、浮動元素、position為absolute或fixed的元素、display屬性為inline-block、table-cell、table-caption、flex、inline-fllex、overflow不為visible的元素。

8.css sprite是什麽,有什麽優缺點

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。

優點：

1. 減少HTTP請求數，極大地提高頁面加載速度
2. 增加圖片信息重復度，提高壓縮比，減少圖片大小
3. 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

1. 圖片合並麻煩
2. 維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式

9.display: none;與visibility: hidden;的區別

聯系：它們都能讓元素不可見

區別：

1. display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見
2. display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式
3. 修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。
4. 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

10.link與@import的區別

1. link是HTML方式， @import是CSS方式
2. link最大限度支持並行下載，@import過多嵌套導致串行下載，出現FOUC
3. link可以通過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早於@import，可以使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規則之前，可以在css文件中引用其他文件
6. 總體來說：link優於@import

11.display: block;和display: inline;的區別

block元素特點：

1.處於常規流中時，如果width沒有設置，會自動填充滿父容器 2.可以應用margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨占一個水平空間） 5.忽略vertical-align

inline元素特點

1.水平方向上根據direction依次布局 2.不會在元素前後進行換行 3.受white-space控制 4.margin/padding在豎直方向上無效，水平方向上有效 5.width/height屬性對非替換行內元素無效，寬度由元素內容決定 6.非替換行內元素的行框高由line-height確定，替換行內元素的行框高由height,margin,padding,border決定 6.浮動或絕對定位時會轉換為block7.vertical-align屬性生效

12.容器包含若幹浮動元素時如何清理(包含)浮動

1. 容器元素閉合標簽前添加額外元素並設置clear: both
2. 父元素觸發塊級格式化上下文(見塊級可視化上下文部分)
3. 設置容器元素偽元素進行清理推薦的清理浮動方法

/**
* 在標準瀏覽器下使用
* 1 content內容為空格用於修復opera下文檔中出現
*   contenteditable屬性時在清理浮動元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
*   子元素top-margin折疊,這樣能使清理效果與BFC，IE6/7
*   zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
* IE 6/7下使用
* 通過觸發hasLayout實現包含浮動
**/
.clearfix {
    *zoom: 1;
}

13.如何創建塊級格式化上下文(block formatting context),BFC有什麽用

創建規則：

1. 根元素
2. 浮動元素（float不是none）
3. 絕對定位元素（position取值為absolute或fixed）
4. display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
5. overflow不是visible的元素

作用：

1. 可以包含浮動元素
2. 不被浮動元素覆蓋
3. 阻止父子元素的margin折疊

前端面試問題（CSS3）