1. 塊級元素和行內元素分別有哪些？空(void)元素有那些？

行內元素有：

span img input select strong

塊元素有：

div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素：

<br> <hr> <img> <input> <link> <meta>

2. 在標準文檔流里面塊級元素和行內元素的區別

塊級元素具有以下特點：

1. 總是在新行上開始，占據一整行；
2. 高度，行高以及外邊距和內邊距都可控制； 3. 寬帶始終是與瀏覽器寬度一樣，與內容無關；
3. 它可以容納內聯元素和其他塊元素。

行內元素的特點：

1. 和其他元素都在一行上；
2. 高，行高及外邊距和內邊距部分可改變；
3. 寬度只與內容有關；
4. 行內元素只能容納文本或者其他行內元素。 不可以設置寬高，其寬度隨著內容增加，高度隨字體大小而改變，
   內聯元素可以設置外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設置內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用

3. 什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？

概述

每個 CSS 屬性定義 的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 還是默認不繼承的 ("Inherited: no")。這決定了當你沒有為元素的屬性指定值時該如何計算值

繼承屬性

當元素的一個 繼承屬性 （inherited property ）沒有指定值時，則取父元素的同屬性的 計算值 computed value 。只有文檔根元素取該屬性的概述中給定的初始值（initial value）

所有元素可繼承：visibility 和 cursor

內聯元素可繼承：

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

終端塊狀元素可繼承：text-indent 和 text-align

列表元素可繼承：

list-style、list-style-type、list-style-position、list-style-image

不可繼承的：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi

4. 如何讓塊級元素水平居中？如何讓行內元素水平居中?

1. CSS設置行內元素的水平居中

div{text-align:center} /*DIV內的行內元素均會水平居中*/`

2. CSS設置行內元素的垂直居中

div{height:30px; line-height:30px} /*DIV內的行內元素均會垂直居中*/ 

3. 既要水平居中又要垂直居中

div{text-align:center; height:30px; line-height:30px}

4. CSS設置塊級元素的水平居中

div p{margin:0 auto; width:500px} /*塊級元素p一定要設置寬度，
才能相當于DIV父容器水平居中*/ 

5. CSS設置塊級元素的垂直居中

div{width:500px} /*DIV父容器設置寬度*/ 
div p{margin:0 aut0; height:30px; line-height:30px} /*塊級元素p也可以加個寬度，
以達到相對于DIV父容器的水平居中效果*

5. 用 CSS 實現一個三角形

三角形

6. 單行文本溢出加 ...如何實現?

ell{
  width:100px；//必須有寬度
  overflow: hidden;//超出隱藏
  text-overflow: ellipsis;//顯示省略符號來代表被修剪的文本
  white-space: nowrap;//不換行
}

7. px, em, rem 有什么區別

px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

px特點

1. IE無法調整那些使用px作為單位的字體大小；

2. 國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；

3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。

em 指字體高，任意瀏覽器的默認字體高都是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作為單位就行了。

em特點

1. em的值并不是固定的；
2. em會繼承父級元素的字體大小。。

rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

8. IE 盒模型和W3C盒模型有什么區別?

content-box（標準盒模型/W3C盒模型）

width = 內容的寬度
height = 內容的高度

border-box（怪異盒模型/IE 盒模型）

width = border + padding + 內容的寬度
height = border + padding + 內容的高度

9. *{ box-sizing: border-box;}的作用是什么？

設置他以后，相當于以怪異模式解析，border和padding全會在你設置的寬度內部，

10. line-height: 2和line-height: 200%有什么區別?

區別體現在子元素繼承時，如下：
父元素設置line-height:2會直接繼承給子元素，子元素根據自己的font-size再去計算子元素自己的line-height。

父元素設置line-height:200%是計算好了line-height值，然后把這個計算值給子元素繼承，子元素繼承拿到的就是最終的值了。此時子元素設置font-size就對其line-height無影響了。

11. inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?

inline-block 的元素既具有 block 元素可以設置寬高的特性，同時又具有 inline 元素默認不換行的特性。當然不僅僅是這些特性，比如 inline-block 元素也可以設置 vertical-align（因為這個垂直對齊屬性只對設置了inline-block的元素有效） 屬性。
HTML 中的換行符、空格符、制表符等合并為空白符，字體大小不為 0 的情況下，空白符自然占據一定的寬度，使用inline-block 會產生了元素間的空隙。

移除inline-block元素間隙方法

（1）移除標簽間的空格

元素間的間隙出現的原因是元素標簽之間的空格，把空格去掉間隙自然就會消失。來看以下幾種寫法：
寫法一：
<div class="demo"><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span> </div>

寫法二：
<div class="demo"> <span>我是一個span </span><span>我是一個span </span><span>我是一個span </span><span>我是一個span</span> </div>

寫法三：利用HTML注釋標簽
<div class="demo"> <span>我是一個span</span><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span> </div>

（2）取消標簽閉合

<div class="demo"> <span>我是一個span <span>我是一個span <span>我是一個span <span>我是一個span </div> .demo span{background:#ddd;display: inline-block;}

把span標簽的結束標簽去掉，這樣間隙就沒有了。為了兼容IE6/IE7，最后一個標簽需要閉合。
<div class="demo"> <span>我是一個span <span>我是一個span <span>我是一個span <span>我是一個span</span> </div>.demo span{ background:#ddd; display: inline-block; }

12 .CSS sprite 是什么?

CSS Sprites是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位。

其優點在于：

減少網頁的http請求，提高性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
減少圖片的字節：多張圖片合并成1張圖片的字節小于多張圖片的字節總和；
減少了命名困擾：只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高制作效率；
更換風格方便：只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便。
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點：

圖片合成比較麻煩；

背景設置時，需要得到每一個背景單元的精確位置，；
維護合成圖片時，最好只是往下加圖片，而不要更改已有圖片。

13 .讓一個元素"看不見"有幾種方式？有什么區別?

1.display:none;
2.visibility:hidden;
3.opacity:0；
4.設置元素的position與left，top，bottom，right等，將元素移出至屏幕外
5.設置元素的position與z-index，將z-index設置成盡量小的負數

display:none;是讓元素消失不占用位置。
visibility :hidden;讓元素不可見，但位置還在。這種方是讓元素消失了，只是依然占據著頁面空間。不可以出發點擊事件
opacity:0;設置元素透明度為0后，元素只是相對于人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發點擊事件