1. text-align: center的作用是什么仓犬，作用在什么元素上蚌堵？能讓什么元素水平居中
text-align 屬性規(guī)定元素中的文本的水平對齊方式
可能的值
|值 |描述|
|-||
|left| 把文本排列到左邊萌腿。默認值：由瀏覽器決定旨椒。|
|right |把文本排列到右邊腌乡。|
|center |把文本排列到中間盛龄。|
|justify |實現(xiàn)兩端對齊文本效果斩启。|
|inherit |規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值序调。|
- text-align不會作用于塊級元素。
- text-align作用于文本兔簇。
- text-align作用于內(nèi)聯(lián)元素发绢。
- text-align作用于圖片。
- text-align作用于inline-block
2. IE 盒模型和W3C盒模型有什么區(qū)別?
W3C 盒子模型的范圍包括 margin垄琐、border边酒、padding、content狸窘，并且 content 部分不包含其他部分墩朦。
IE 盒子模型的范圍也包括 margin、border翻擒、padding氓涣、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading陋气。
3. { box-sizing: border-box;}的作用是什么劳吠？
可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中巩趁。
4. line-height: 2和line-height: 200%有什么區(qū)別?
- 繼承上的區(qū)別
- 父元素設(shè)置line-height:2會直接繼承給子元素痒玩，子元素根據(jù)自己的font-size再去計算子元素自己的line--
height。 - 父元素設(shè)置line-height:200%是計算好了line-height值晶渠，然后把這個計算值給子元素繼承凰荚，子元素繼承拿到的就是最終的值了。此時子元素設(shè)置font-size就對其line-height無影響了褒脯。
5. inline-block有什么特性便瑟？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
inline-block 會將對象呈現(xiàn)為內(nèi)聯(lián)對象番川，但是對象的內(nèi)容作為塊對象呈現(xiàn)到涂。旁邊的內(nèi)聯(lián)對象會被呈現(xiàn)在同一行內(nèi)。(準確地說颁督，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象践啄，四周元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性)
如何去除縫隙:
- 移除空格
元素間留白間距出現(xiàn)的原因就是標簽段之間的空格沉御，因此屿讽，去掉HTML中的空格，自然間距就木有了》ヌ福考慮到代碼可讀性烂完，顯然連成一行的寫法是不可取的，我們可以：
<div class="space">
<a href="##">
惆悵</a><a href="##">
淡定</a><a href="##">
熱血</a>
</div>
或者是：
<div class="space">
<a href="##">惆悵</a
><a href="##">淡定</a
><a href="##">熱血</a>
</div>
或者是借助HTML注釋：
<div class="space">
<a href="##">惆悵</a><!--
--><a href="##">淡定</a><!--
--><a href="##">熱血</a>
</div>
等
- 使用margin負值
.space a {
display: inline-block;
margin-right: -3px;
}
- 不讓標簽閉合
如下處理：
<div class="space">
<a href="##">惆悵
<a href="##">淡定
<a href="##">熱血</a>
</div>
為了兼容IE6/IE7等瀏覽器诵棵，最后一個列表的標簽加上閉合抠蚣。
- 使用font-size:0
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
- 使用letter-spacing
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
- 使用word-spacing
.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
一個是字符間距letter-spacing一個是單詞間距word-spacing，大同小異履澳。據(jù)測試嘶窄，word-spacing的負值只要大到一定程度，其兼容性上的差異就可以被忽略距贷。因為柄冲，貌似，word-spacing即使負值很大储耐，也不會發(fā)生重疊羊初。
- 高度不一樣的inline-block元素如何頂端對齊
給 inline-block 元素添加 vertical-align屬性設(shè)置對齊方式
可能的值
|值| 描述|
|-||
|baseline| 默認。元素放置在父元素的基線上什湘。|
|sub |垂直對齊文本的下標。|
|super |垂直對齊文本的上標|
|top| 把元素的頂端與行中最高元素的頂端對齊|
|text-top| 把元素的頂端與父元素字體的頂端對齊|
|middle| 把此元素放置在父元素的中部晦攒。|
|bottom |把元素的頂端與行中最低的元素的頂端對齊闽撤。|
|text-bottom| 把元素的底端與父元素字體的底端對齊。|
|% |使用 "line-height" 屬性的百分比值來排列此元素脯颜。允許使用負值哟旗。|
|inherit| 規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。|
6. CSS sprite 是什么?
sprite指的是精靈圖栋操，CSS sprite簡單來說就是圖片拼合技術(shù)闸餐，主要是指將網(wǎng)頁上很多用于裝飾作用的小圖片全部整合到一張圖片內(nèi)，減少網(wǎng)頁加載時的HTTP請求并發(fā)數(shù)矾芙，頁面加載時利用CSS中的背景圖片定位屬性background-position來指定需要顯示這張大圖上指定位置的部分
使用這個技術(shù)的優(yōu)點就是減少頁面加載時的瞬間HTTP請求并發(fā)數(shù)舍沙，提高了加載速度
缺點是這些被整合到一張圖片的各種小圖案后期維護修改比較麻煩，修改任意一個小圖案都需要修改這張整圖剔宪，同時還需要注意小圖片在這個整圖上的位置不能改變
7. 讓一個元素"看不見"有幾種方式拂铡？有什么區(qū)別?
- display:none
設(shè)置元素的display為none是最常用的隱藏元素的方法。
.hide {
display:none;
}
將元素設(shè)置為display:none后葱绒，元素在頁面上將徹底消失感帅，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪地淀。
- visibility:hidden
設(shè)置元素的visibility為hidden也是一種常用的隱藏元素的方法失球，和display:none的區(qū)別在于，元素在頁面消失后帮毁，其占據(jù)的空間依舊會保留著实苞，所以它只會導致瀏覽器重繪而不會重排璧微。
.hidden{
visibility:hidden
}
visibility:hidden適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景
- opacity:0
opacity屬性我相信大家都知道表示元素的透明度，而將元素的透明度設(shè)置為0后硬梁，在我們用戶眼中前硫，元素也是隱藏的，這算是一種隱藏元素的方法荧止。
.transparent {
opacity:0;
}
這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間屹电，但我們都知道，設(shè)置透明度為0后跃巡，元素只是隱身了危号，它依舊存在頁面中。
- text-indent:-999em
這個屬性本來是用來設(shè)置文本縮進的素邪，一般我們習慣是首行縮2個中文字所以一般的用法是text-indent:2em但它允許負值外莲，假如給它一個負值，這個負值足夠大兔朦，大到一般我們?yōu)g覽器無法顯示偷线，好像它跟瀏覽器寬度躲貓貓一樣。
.move{
text-indent:-999em
}
假如說用戶瀏覽器分辨率不夠支撐其縮減的寬度沽甥，那么它就默認顯示“沒有”声邦，但是它會占據(jù)網(wǎng)頁空間，只不過是我們在前端“看不見”而已摆舟，但是它會影響到文檔的布局亥曹，感覺它是懸掛在本文前面，一直掛到你電腦屏幕足夠大顯示它為止恨诱。
一個比較好的可選方案：
.move{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
- font-size:0
這個值是利用了字體大小來控制媳瞪，通常默認的網(wǎng)頁字體大小為12-14px，不過當文字大小為0px就可以控制文字”消失“了照宝。
.size{
font-size:0
}
- .position
我們都知道position是用來定位元素的蛇受，數(shù)值可正可負，假如說一個元素的距離我們的視窗（電腦顯示屏幕）足夠大硫豆，大到我們?yōu)g覽器也無法顯示出來龙巨，那么它也是“消失”的。
.move{
position:absolute;
top:-999em
}
