text-align: center的作用是什么，作用在什么元素上漾月？能讓什么元素水平居中
把文本排列到中間熊泵。作用在block元素上，能讓塊級(jí)元素內(nèi)的inline元素和inline-block元素水平居中箕般。
IE 盒模型和W3C盒模型有什么區(qū)別?
盒模型
-
W3C盒模型
- 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
-
IE盒模型
IE盒模型的計(jì)算方式和W3C的很相似耐薯，但有一點(diǎn)是非常不同的，這就是：填充和邊框并不被包含在計(jì)算的范圍內(nèi)。
總寬度 = margin-left + width + margin-right
這就意味著一旦元素?fù)碛袡M向的填充和/或邊框曲初，實(shí)際的內(nèi)容區(qū)域（content area ）就要擴(kuò)大來(lái)創(chuàng)造出他們占據(jù)的空間体谒。
*{ box-sizing: border-box;}的作用是什么？
-
box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素臼婆。
例如抒痒，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"颁褂。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框故响，并把邊框和內(nèi)邊距放入框中。
line-height: 2和line-height: 200%有什么區(qū)別?
- 計(jì)算方法的區(qū)別颁独。
數(shù)值：繼承的時(shí)候彩届，瀏覽器會(huì)先將line-height這個(gè)屬性繼承給子元素，再由子元素計(jì)算奖唯。
百分?jǐn)?shù)：繼承的時(shí)候惨缆，瀏覽器會(huì)先將行高對(duì)應(yīng)的具體的數(shù)值計(jì)算出來(lái)以后再繼承。
inline-block有什么特性丰捷？如何去除縫隙坯墨？高度不一樣的inline-block元素如何頂端對(duì)齊?
- inline-block是結(jié)合了inline和block兩者的特性于一身，簡(jiǎn)單的說(shuō)：設(shè)置了inline-block屬性的元素既擁有了block元素可以設(shè)置width和height的特性病往，又保持了inline元素不換行的特性捣染。
- 縫隙是什么呢，它們是空白符停巷。
- 要去除空白符產(chǎn)生的間隙耍攘，首先要理解空白符歸根結(jié)底是個(gè)字符，通過設(shè)置font-size屬性可以控制產(chǎn)生的間隙的大小畔勤。設(shè)置font-site屬性為0px蕾各。
高度不一樣的inline-block元素默認(rèn)基線對(duì)齊，設(shè)置vertical-align：top 實(shí)現(xiàn)頂端對(duì)齊庆揪。
CSS sprite 是什么?
雪碧圖式曲；把小圖片整成大圖，減少請(qǐng)求缸榛，減輕服務(wù)器壓力吝羞；
讓一個(gè)元素"看不見"有幾種方式？有什么區(qū)別?
- display:none;(脫離文檔流 不占據(jù)位置)
- opacity:0内颗，（透明但仍然在文檔流中）钧排。
- visibility:hidden,基本與opacity一致。
- text-indent:讓某段文字徹底移走均澳，表面上看不到恨溜，但是元素依舊在原地.
- z-index:設(shè)置為無(wú)限大的值如9999;或-9999讓其覆蓋或者被其他元素覆蓋.(同級(jí))
- 用一個(gè)<span>設(shè)置為inline-block符衔，設(shè)置寬、高并讓它移動(dòng)到某個(gè)位置然后設(shè)置-背景色為白色糟袁，實(shí)現(xiàn)一個(gè)遮罩的方式柏腻。
實(shí)現(xiàn)雪碧圖效果
- 使用 CSSsrpite 實(shí)現(xiàn)如下效果
9/19/2017
