第三部分 CSS
· 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型?與低版本IE的盒子模型有什么不同的节吮?
· CSS盒子模型:由四個(gè)屬性組成的外邊距(margin)、內(nèi)邊距(padding)判耕、邊界(border)透绩、內(nèi)容區(qū)(width和height);
· 標(biāo)準(zhǔn)的CSS盒子模型和低端IE CSS盒子模型不同:寬高不一樣
· 標(biāo)準(zhǔn)的css盒子模型寬高就是內(nèi)容區(qū)寬高;
· 低端IE css盒子模型寬高 內(nèi)邊距﹢邊界﹢內(nèi)容區(qū)祈秕;
· CSS選擇符有哪些渺贤?哪些屬性可以繼承雏胃?
類(lèi)型選擇符(body)请毛、群組選擇符(h1,h2瞭亮,h3方仿,span)、包含選擇符(h2 span)统翩、ID選擇符(#id)仙蚜、Class選擇符(.content)
CLASS屬性,偽類(lèi)A標(biāo)簽厂汗,列表ul委粉、li、dl娶桦、dd贾节、dt可以繼承
· position的值relative和absolute定位原點(diǎn)是?
absolute :生成絕對(duì)定位的元素衷畦, 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來(lái)進(jìn)行定位栗涂。
fixed (老IE不支持)生成絕對(duì)定位的元素,通常相對(duì)于瀏覽器窗口或 frame 進(jìn)行定位祈争。
relative 生成相對(duì)定位的元素斤程,相對(duì)于其在普通流中的位置進(jìn)行定位。
static 默認(rèn)值菩混。沒(méi)有定位忿墅,元素出現(xiàn)在正常的流中
sticky 生成粘性定位的元素,容器的位置根據(jù)正常文檔流計(jì)算得出
· 如何居中div沮峡?如何居中一個(gè)浮動(dòng)元素疚脐?如何讓絕對(duì)定位的div居中?
Margin 0 auto
#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;
width:600px;height:300px;
display:block;
position: absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-150px;}
· CSS權(quán)重優(yōu)先級(jí)是如何計(jì)算的帖烘?
亮曹!import > id > class > tag
? 請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)橄杨?清除浮動(dòng)的方式
浮動(dòng)float最開(kāi)始出現(xiàn)的意義是為了讓文字環(huán)繞圖片而已,但人們發(fā)現(xiàn)照卦,如果想要三個(gè)塊級(jí)元素并排顯示式矫,都給它們加個(gè)float來(lái)得會(huì)比較方便
清除浮動(dòng)是指清除由于子元素浮動(dòng)帶來(lái)父元素高度塌陷的影響。
1.三個(gè)div 水平排列役耕,需要用到浮動(dòng)采转,但如果用一個(gè)邊框包起來(lái),由于使用了浮動(dòng)不能實(shí)現(xiàn)瞬痘,就需要清除浮動(dòng) clear:both
2故慈,采用偽元素
zoom:1清除浮動(dòng)原理:清除浮動(dòng),觸發(fā)hasLayout框全;Zoom屬性是IE瀏覽器的專(zhuān)有屬性察绷,它可以設(shè)置或檢索對(duì)象的縮放比例。解決ie下比較奇葩的bug津辩。譬如外邊距(margin)的重疊拆撼,浮動(dòng)清除,觸發(fā)ie的haslayout屬性等喘沿。來(lái)龍去脈大概如下:當(dāng)設(shè)置了zoom的值之后闸度,所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小,高度寬度就會(huì)重新計(jì)算了蚜印,這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染莺禁,運(yùn)用這個(gè)原理,也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題窄赋。Zoom屬是IE瀏覽器的專(zhuān)有屬性哟冬,火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性。然而寝凌,zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化柒傻,出現(xiàn)在 CSS 3.0 規(guī)范草案中。目前非ie由于不支持這個(gè)屬性较木,它們又是通過(guò)什么屬性來(lái)實(shí)現(xiàn)元素的縮放呢红符?可以通過(guò)css3里面的動(dòng)畫(huà)屬性scale進(jìn)行縮放。