CSS常見樣式(下)

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ì)被占用。

  • CSS sprite任務(wù)1

  • iconfont 任務(wù)2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,815評(píng)論 1 92
  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 text-align樣式...
    阿魯提爾閱讀 285評(píng)論 0 1
  • 1.text-align:center的作用是什么?作用在什么元素上?能讓什么元素水平居中 text-align:...
    BAWScipes閱讀 398評(píng)論 0 0
  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 text-align: ...
    饑人谷_二釉閱讀 252評(píng)論 0 0
  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 text-align作為...
    LINPENGISTHEONE閱讀 195評(píng)論 0 0