CSS常見樣式和屬性

1.塊級元素和行內元素分別有哪些？它們的區別？
塊級元素有：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th等；行內元素有：em strong span a br img button input label select textarea code script等。區別：塊級元素可以包含行內元素和塊級元素。行內元素只能包含文字和行內元素；塊級元素佔據一整行空間，行內元素佔據自身寬度空間；塊級元素可以直接設定看寬度和高度，行內元素不能設定寬高；對塊級元素設定上下左右的margin和padding都生效，而對行內元素設定上下的margin和
padding不生效，左右生效。
2.什麼是 CSS 繼承? 哪些屬效能繼承，哪些不能？
CSS 繼承是指為父元素設定樣式後子元素也會具有這種樣式。
常見的不可繼承的屬性有：display、文字屬性（如vertical-align：垂直文字對齊、text-shadow：文字陰影效果）、盒子模型的屬性（如width、height、border、margin、padding）、背景屬性（如background、background-color）、定位屬性（如float、clear、position）等；
常見的可以繼承的屬性有：字型系列屬性（如font、font-family、font-size）、文字系列屬性（如text-indent、text-align）、元素可見性visibility、表格佈局屬性（如caption-side、border-collapse）等；
內聯元素可以繼承的屬性：1.字型系列屬性 2.除text-indent、text-align之外的文字系列屬性；
塊級元素可以繼承的屬性：text-indent、text-align

3.如何讓塊級元素水平居中？如何讓行內元素水平居中?
塊級元素居中設定其margin: 0, auto;（上下的margin也可以為其他任意值）行內元素居中text-align : center;
4.用 CSS 實現一個三角形
http://home.jscode.me/uploads/default/original/2X/2/2ddf8e88bc919070eba804f8cbea000202a7722a.PNG
5.單行文字溢位加 ...如何實現?

white-space: nowrap; /*使文字不折行*/ 
overflow: hidden; /*溢位部分隱藏*/ 
text-overflow: ellipsis; /*溢位部分加...*/

6.px, em, rem 有什麼區別?
px：固定單位em: 相對單位，相對於父元素字型大小rem: 相對單位，相對於根元素(html)字型大小
7.下面程式碼的作用?為什麼要加引號? 字型裡\5b8b\4f53代表什麼?

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;}

這段程式碼是給body裡面的全部元素設定大小12px，行高1.5倍，後面的內容是設定字型。
字型的名字中間有空格就需要加引號使它成為一個整體，否則瀏覽器無法識別。
\5b8b\4f53是“宋體”的Unicode編碼。
為同一個元素設定多種字型的意義是：一旦前面的字型不可用，瀏覽器就會按順序找到後面的字型代替。如果這些字型都找不到就會使用瀏覽器的預設字型。

8.text-align: center的作用是什麼，作用在什麼元素上？能讓什麼元素水平居中?
text-align: center是居中對齊方式，作用在塊級元素上，可以使其內部的行內元素和inline-block元素水平居中。

9.IE 盒模型和W3C盒模型有什麼區別?
IE 盒模型和W3C 盒模型都包括margin、border、padding、content。
IE 盒模型的width和height的值等於 border + padding + content 的總和；
W3C盒模型的width和height的值等於content自己的寬高值。

10.*{ box-sizing: border-box;}的作用是什麼？
CSS 3新樣式：使用IE盒模型。

11.line-height: 2和line-height: 200%有什麼區別?
line-height:2 是設定行高為它本身文字高度的2倍；line-height:200%是設定行高為父元素文字高度的2倍。

12.inline-block有什麼特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
inline-block既像block那樣，可以設定寬高，內外邊距，又像inline那樣在同一行排列。
去除縫隙可以刪除兩標籤之間的空格，或者用父容器包裹這兩個標籤，父容器字型大小設為零，再將它們自己的字型大小設定為原來的值進行覆蓋。
inline-block元素頂端對齊：為它們設定vertical-align: top;

6.CSS sprite 是什麼?
CSS精靈圖。是一種網頁圖片應用處理方式，可以將頁面上的icon拼成一張大圖，然後利用改變背景圖片位置的操作使每一個圖示在頁面中顯示。這樣做可以減少向伺服器傳送請求數量，優化頁面效能。

7.讓一個元素"看不見"有幾種方式？有什麼區別?
opacity:0; 設定元素的透明度，但該元素還在頁面中佔據著自己的空間。
visibility:hidden; 使元素隱藏，和透明的效果類似，元素也佔據空間。
display:none; 使元素消失，瀏覽器不載入該元素，在頁面中不佔據空間。