1. text-align: center的作用是什么犁嗅,作用在什么元素上饥追?能讓什么元素水平居中?
給父元素設(shè)置text-align: center屬性可以使元素中的文本行居中對齊簿姨,作用在塊級元素上(比如段落),可以使其中的文本曙博、圖片水平居中世落。
2. IE 盒模型和W3C盒模型有什么區(qū)別?
W3C標(biāo)準(zhǔn)中padding郎笆、border所占的空間不在width、height范圍內(nèi)监婶。
IE的盒模型width包括content尺寸+padding+border旅赢。
3. *{ box-sizing: border-box;}的作用是什么?
box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素惑惶。
*{ box-sizing: border-box;}
設(shè)置所有塊級元素煮盼,使其并排放置帶有指定寬度和高度的框,并把邊框和內(nèi)邊距放入框中集惋。
4. line-height: 2和line-height: 200%有什么區(qū)別?
設(shè)置數(shù)字孕似,此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。
設(shè)置百分比刮刑,會基于父元素字體尺寸的百分比設(shè)置行間距喉祭。
5. inline-block有什么特性?如何去除縫隙雷绢?高度不一樣的inline-block元素如何頂端對齊?
- 既呈現(xiàn) inline 特性(不占據(jù)一整行泛烙,寬度由內(nèi)容寬度決定)
又呈現(xiàn) block 特性 (可設(shè)置寬高,內(nèi)外邊距) - 去除縫隙:父元素的font-size設(shè)置為0翘紊,子元素的font-size設(shè)置為實際大小
- 頂端對齊:給設(shè)置了inline-block的元素添加vertical-align: top
6. CSS sprites是什么?
CSS sprites在國內(nèi)很多人叫css精靈蔽氨,是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去帆疟,這樣一來鹉究,當(dāng)訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了踪宠。CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中自赔,再利用CSS的“background-image”,“background- repeat”柳琢,“background-position”的組合進行背景定位绍妨,background-position可以用數(shù)字精確的定位出背景圖片的位置润脸。
7. 讓一個元素"看不見"有幾種方式?有什么區(qū)別?
1.display:none
優(yōu)點:簡單暴力他去,不需要多余代碼毙驯。缺點:會將元素從文檔刪除。
2.text-indent
設(shè)置為足夠大的負值
這個值設(shè)置太大灾测,如 -99999px 時爆价,又會造成瀏覽器的性能問題,而且有的高分辨率顯示器還是會顯示出來行施。
3.position:absolute;top:-999em
或left:-999em
通過絕對定位使其超出瀏覽器顯示界面允坚。
優(yōu)點:信手拈來魂那,隨意擺放蛾号,缺點:用法太死,不能隨意修改涯雅,比較死板
4.visibility:hidden
缺點:該屬性會繼承鲜结。而且用了該屬性屬性之后,元素在前端頁面是解析不出來的活逆,但是元素依然存在在哪里精刷,只不過我們?nèi)庋鄄豢梢姡栽匾廊粫绊懙讲季帧?br>
5.opacity:0
把元素不透明度直接調(diào)節(jié)到了0,使其消失蔗候。
缺點:瀏覽器IE9以下的是不認opacity屬性的.