1.css隱藏顯示的方法
display:none
2.解釋css sprites鹃栽。并說(shuō)如何使用
圖片懶加載,在頁(yè)面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)事件,判斷圖片位置與瀏覽器頂端的距離與頁(yè)面的距離如果前者小于后者,優(yōu)先加載
如果為幻燈片失都,相冊(cè)等,可以使用圖片預(yù)加載技術(shù)幸冻,將當(dāng)前展示圖片的前一張和后一張有限下載
如果圖片為css圖片粹庞,可以使用CSSspirte,SVGspirte洽损,locnfont庞溜,Base64等技術(shù)
如果圖片過(guò)大,可以使用特殊編碼的圖片碑定,加載時(shí)會(huì)加載一張壓縮的特別厲害的縮略圖流码,一提高用戶(hù)體驗(yàn)
如果圖片展示區(qū)域小于圖片的真實(shí)大小,則因在服務(wù)端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮延刘,圖片壓縮后大小與展示一致
3.清除浮動(dòng)
clear:both
overflow:hidden
:after
4.什么是語(yǔ)義化的HTML
語(yǔ)義化標(biāo)簽就是盡量使用相對(duì)應(yīng)的結(jié)構(gòu)的含義的html的標(biāo)簽
5.split()
join()將數(shù)組轉(zhuǎn)化為字符串漫试,并用指定字符串分割
6.call和apply的區(qū)別
都可以改變指向
call有多少參數(shù)寫(xiě)多少參數(shù)
apply只要寫(xiě)一個(gè)arguments就已解決
7.獲取非行間樣式
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obi,false)[attr]
}
}
8.transform
旋轉(zhuǎn):rotate
扭曲:skew
縮放:scale
移動(dòng):translate
矩形變形:matrix
9.介紹一下css的盒子模型
css盒子模型又稱(chēng)框模型(Box Model),包含了元素內(nèi)容(content)碘赖,內(nèi)邊距(border)驾荣,外邊距(margin)
元素框的高度 = 元素(element)的height + padding的上下邊距的值 + margin的上下邊距的值 + boeder的上下寬度
舊模型:content+padding2+border2
新模型:width+border+padding=你設(shè)置的元素的寬度
新元素需要設(shè)置:-webkit-box-sizing:border-box
10.transform和animation的區(qū)別?
transition屬性是一個(gè)簡(jiǎn)單的動(dòng)畫(huà)屬性普泡,非常簡(jiǎn)單非常容易用播掷。可以說(shuō)它是animation的簡(jiǎn)化版本
Animation也是通過(guò)指定某一個(gè)屬性(如width撼班、left叮趴、transform等)在兩個(gè)值之間如何過(guò)渡來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的,與 Transition不同的是权烧,Animation可以通過(guò)keyframe顯式控制當(dāng)前幀的屬性值眯亦,而Transition只能隱式來(lái)進(jìn)行(不能指定 每幀的屬性值),所以相對(duì)而言Animation的功能更加靈活般码。另外一個(gè)區(qū)別是Animation通過(guò)模擬屬性值改變來(lái)實(shí)現(xiàn)動(dòng)畫(huà)妻率, 動(dòng)畫(huà)結(jié)束之后元素的屬性沒(méi)有變化;而Transition確實(shí)改變了元素的屬性值板祝,動(dòng)畫(huà)結(jié)束之后元素的屬性發(fā)生了變化
11.link和@import的區(qū)別是宫静?
兩者都是外部引用CSS的方式,但是存在一定的區(qū)別:
區(qū)別1:link是XHTML標(biāo)簽券时,除了加載CSS外孤里,還可以定義RSS等其他事務(wù);@import屬于CSS范疇橘洞,只能加載CSS捌袜。
區(qū)別2:link引用CSS時(shí),在頁(yè)面載入時(shí)同時(shí)加載炸枣;@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載虏等。
區(qū)別3:link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題适肠;@import是在CSS2.1提出的霍衫,低版本的瀏覽器不支持。
區(qū)別4:ink支持使用Javascript控制DOM去改變樣式侯养;而@import不支持敦跌。