問答
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)塊元素的效果如下:
顯然纪蜒,所謂行內(nèi)內(nèi)容包括行內(nèi)元素衷恭、行內(nèi)塊元素和行內(nèi)文本。
3. 如果遇到一個(gè)屬性想知道兼容性纯续,在哪查看?
4. IE 盒模型和W3C盒模型有什么區(qū)別?
如下圖:
區(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
除了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)
演示如下:
12. 如何設(shè)置元素透明? 兼容性告丢?
- opacity可以設(shè)置元素透明,如下設(shè)置屬性值為0到1從完全透明到完全不透明:
兼容性如下:
- 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)載須說明來源