問答
1. 盒模型包括哪些屬性
盒模型的屬性包括width厉熟、height、padding较幌、margin揍瑟、border，如下圖：
盒模型示意圖
2. text-align: center的作用是什么绅络，作用在什么元素上月培？能讓什么元素水平居中
text-align:center規(guī)定行內(nèi)內(nèi)容相對(duì)父元素居中對(duì)齊，測(cè)試text-align: center在塊級(jí)元素恩急、行內(nèi)元素、行內(nèi)塊元素的效果如下：
text-align:center測(cè)試
顯然纪蜒，所謂行內(nèi)內(nèi)容包括行內(nèi)元素衷恭、行內(nèi)塊元素和行內(nèi)文本。
3. 如果遇到一個(gè)屬性想知道兼容性纯续，在哪查看?
4. IE 盒模型和W3C盒模型有什么區(qū)別?
如下圖：
兩種盒模型對(duì)比圖
區(qū)別在于width和height的算法不同随珠，如下表：
| 盒模型 | width算法 | height算法 |
|---|---|---|
| IE盒模型 | width=內(nèi)容寬度+padding+border | height=內(nèi)容高度+padding+border |
| W3C盒模型 | width=內(nèi)容寬度 | height=內(nèi)容高度 |
5. 以下代碼的作用灭袁？兼容性？
*{ box-sizing: border-box;}
作用：使盒模型的width/height=內(nèi)容寬度/內(nèi)容高度+padding+border
border-box兼容性
除了IE6和IE7其它主流瀏覽器都支持窗看。
6. CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
- CCS Sprite指的是把頁面要用的所有小圖標(biāo)集合到一張圖里面茸歧。
- 雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對(duì)于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上显沈，使用雪碧圖只需要引用一張圖片软瞎，對(duì)內(nèi)存和帶寬更加友好。
7. img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
- img標(biāo)簽是HTML的一個(gè)圖片行內(nèi)塊元素拉讯，background-image是CSS的一個(gè)背景圖片聲明涤浇。
- img標(biāo)簽是作為頁面內(nèi)容的不可或缺的元素，而background-image只是作為某個(gè)元素的樣式魔慷，起到修飾元素的作用只锭。
8. title和alt屬性分別有什么作用
| 屬性 | 作用 |
|---|---|
| title | 當(dāng)鼠標(biāo)懸停在具有title屬性的元素上時(shí)會(huì)彈出title屬性值（用來解釋、說明的文本） |
| alt | img標(biāo)簽和input標(biāo)簽（圖片按鈕）特有屬性院尔，當(dāng)圖片加載失敗時(shí)的代替文本蜻展，該文本為搜索引擎提供數(shù)據(jù)。 |
9. background: url(abc.png) 0 0 no-repeat;這句話是什么意思
- url(abc.png)表示abc.png圖片為背景邀摆。
- 以父包含塊左上角border內(nèi)邊緣或者padding外邊緣為坐標(biāo)原點(diǎn)铺呵，向右為x正方向、向下為y正方向隧熙，0 0表示圖片左上角的坐標(biāo)為(0,0)片挂。
- no-repeat表示x、y方向不平鋪贞盯。
10. background-size有什么作用? 兼容性如何? 常用的值是?
- background-size的作用是根據(jù)需要自由縮放圖片音念。
- 除了IE6、7躏敢、8和firefox2闷愤、3、3.5不兼容件余，其它主流瀏覽器基本兼容讥脐。
點(diǎn)擊見詳情 - 常見值如下表
| 值 | 含義 |
|---|---|
| length | 設(shè)置背景的寬高，第一個(gè)值為寬度啼器，第二個(gè)為高度旬渠，若只設(shè)置一個(gè)值，第二值默認(rèn)為auto |
| percentage | 以父元素的百分比設(shè)置背景的寬高 |
| cover | 將圖像擴(kuò)展至完全覆蓋背景區(qū)域（圖像尺寸等比例擴(kuò)展） |
| contain | 將圖像擴(kuò)展至寬高完全適應(yīng)背景區(qū)域 |
11. 如何讓一個(gè)div水平居中端壳？如何讓圖片水平居中
讓div水平居中的方法有：
- margin: xxpx auto實(shí)現(xiàn)
- 使用絕對(duì)定位實(shí)現(xiàn)
演示如下：
div水平居中
12. 如何設(shè)置元素透明? 兼容性告丢？
- opacity可以設(shè)置元素透明，如下設(shè)置屬性值為0到1從完全透明到完全不透明：
測(cè)試opaticy
兼容性如下：
opacity兼容性
- filter:alpha(opacity=50); 這個(gè)是為IE6設(shè)計(jì)损谦，取值范圍0-100岖免。
- -moz-opacity:0.5; 這個(gè)是為了支持一些老版本的Mozilla瀏覽器;
- -khtml-opacity: 0.5; 這個(gè)為了支持一些老版本的Safari瀏覽器;
13. opacity和rgba都能設(shè)置透明岳颇，有什么區(qū)別
- 對(duì)設(shè)置透明來說，opacity是作為CSS聲明的屬性颅湘，rgba是作為CSS中background-color的屬性值话侧。
- opacity是設(shè)置整個(gè)元素為透明，而rgba只是設(shè)置元素的背景顏色透明闯参。
代碼
task9-1
task9-1 preview
task9-2
task9-2 preview
task9-3
task9-3 preview
task9-4
task9-4 preview
參考
本文章著作權(quán)歸饑人谷_九霄和饑人谷所有瞻鹏，轉(zhuǎn)載須說明來源
