1. text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中?
- text-align: center的作用是讓元素水平居中。
- text-align作用在塊級(jí)元素上。
- text-align可以是行內(nèi)元素、行內(nèi)塊元素或者文本水平居中。
2. IE 盒模型和W3C盒模型有什么區(qū)別?
- IE 盒模型width包括padding和border。
- W3C盒模型width不包括包括padding和border,width就是指的內(nèi)容的寬度。
3. *{ box-sizing: border-box;}的作用是什么?
- 使盒模型的padding和border都計(jì)算在width里面,也就是IE 盒模型。
4. line-height: 2和line-height: 200%有什么區(qū)別?
- line-height: 2表示行高為元素自身字體大小的兩倍;
- line-height: 200%表示其后代的所有行高都是200%,是固定的,不會(huì)根據(jù)子元素自身的字體大小發(fā)生變化。
5. inline-block有什么特性?如何去除縫隙?高度不一樣的inline-block元素如何頂端對(duì)齊?
- inline-block即有行內(nèi)元素的特點(diǎn),也可以設(shè)置寬高。
- 使用通配符*{padding: 0;margin: 0;font-size: 0;}即可去掉全局的縫隙;
- 使用vertical-align: top即可使兩個(gè)元素頂端對(duì)齊;
6. CSS sprite 是什么?
- CSS sprite中文名為‘精靈圖’,也叫做雪碧圖。是把一個(gè)個(gè)小圖標(biāo)集合在一張圖片上,使用圖片定位的方法顯示某一個(gè)圖標(biāo)。減少網(wǎng)站提交數(shù)據(jù)次數(shù),使網(wǎng)站加載運(yùn)行更快。
7. 讓一個(gè)元素"看不見"有幾種方式?有什么區(qū)別?
display:none----將元素設(shè)置為display:none后,元素在頁(yè)面上將徹底消失,元素本來占有的空間就會(huì)被其他元素占有,也就是說它會(huì)導(dǎo)致瀏覽器的重排和重繪。
visibility:hidden----visibility:hidden適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景。
opacity: 0----opacity表示元素的透明度,而將元素的透明度設(shè)置為0后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法,元素本身空間不會(huì)被占用。