1.text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中?
text-align:center作用在行內(nèi)元素上能讓作用這行里的文本和圖片水平居中。
2.IE 盒模型和W3C盒模型有什么區(qū)別?
- IE盒模型的width和height的值等于相對應(yīng)的content值+padding值2+border值2;
- W3C盒模型的width和height的值就等于content值;
![1GU]134XM$6N8(GVJC{B01G.png](http://upload-images.jianshu.io/upload_images/4761706-4feda40be2e1bb31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3.*{ box-sizing: border-box;}的作用是什么?
作用為使用IE盒模型來計算相應(yīng)的元素的寬和高。
4.line-height: 2和line-height: 200%有什么區(qū)別?
- line-height: 2表示行高為本身字體高度的兩倍;
- line-height: 200%表示設(shè)置行高為父元素字體高度的200%高度。
5.inline-block有什么特性?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
1.inline-block 既呈現(xiàn) Inline 特性(不占據(jù)一整行,寬度由內(nèi)容寬度決定)又呈現(xiàn)block特性(可設(shè)置寬度高,內(nèi)外邊距)。
- 元素間留白間距出現(xiàn)的原因就是標(biāo)簽段之間的空格,因此,去掉HTML中的空格,自然間距就木有了。
- 使用font-size:0。
更多方法
3.設(shè)置 vertical-align: top;
6.CSS sprite 是什么?
CSS sprite叫做CSS精靈圖,讓多個的圖片放在一個大的圖片上,目的是減少向服務(wù)器的請求數(shù)量,提高加載速度。
7.讓一個元素"看不見"有幾種方式?有什么區(qū)別?
| 方式 | 區(qū)別 |
|---|---|
| opacity:0 | 透明度為0,但還占據(jù)相應(yīng)的位置 |
| visibility: hidden | 即使不可見的元素也會占據(jù)頁面上的空間 |
| display:none | 讓元素消失,不占據(jù)位置 |
| background-color:rgba(0,0,0,0.1) | 通過背景色和透明度來讓元素"看不到" |
代碼
- 在iconfont上搜索"饑人谷"55, 使用字體圖標(biāo)實現(xiàn)代碼1中的效果
注意:由于 jsbin 不支持上傳文件,所以你 不應(yīng)該 在 jsbin 上使用本地鏈接來制作 iconfont!你應(yīng)該使用 阿里的 CDN 鏈接!?。?/p>