前端面試大全(三)

第三部分 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)行縮放。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末伐债,一起剝皮案震驚了整個(gè)濱河市预侯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌峰锁,老刑警劉巖萎馅,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異虹蒋,居然都是意外死亡糜芳,警方通過(guò)查閱死者的電腦和手機(jī)飒货,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)峭竣,“玉大人塘辅,你說(shuō)我怎么就攤上這事〗粤茫” “怎么了扣墩?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)扛吞。 經(jīng)常有香客問(wèn)我呻惕,道長(zhǎng),這世上最難降的妖魔是什么滥比? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任亚脆,我火速辦了婚禮,結(jié)果婚禮上守呜,老公的妹妹穿的比我還像新娘型酥。我一直安慰自己,他們只是感情好查乒,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著郁竟,像睡著了一般玛迄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棚亩,一...
    開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1 305
  • 那天蓖议,我揣著相機(jī)與錄音,去河邊找鬼讥蟆。 笑死勒虾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瘸彤。 我是一名探鬼主播修然,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼质况!你這毒婦竟也來(lái)了愕宋?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤结榄,失蹤者是張志新(化名)和其女友劉穎中贝,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體臼朗,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡邻寿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年蝎土,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绣否。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡瘟则,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出枝秤,到底是詐尸還是另有隱情醋拧,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布淀弹,位于F島的核電站丹壕,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏薇溃。R本人自食惡果不足惜菌赖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沐序。 院中可真熱鬧琉用,春花似錦、人聲如沸策幼。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)特姐。三九已至晶丘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間唐含,已是汗流浹背浅浮。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捷枯,地道東北人滚秩。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像淮捆,于是被迫代替她去往敵國(guó)和親郁油。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案争剿? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • <a name='html'>HTML</a> Doctype作用已艰?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,482評(píng)論 1 19
  • 前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱: HTML&CSS: 對(duì)Web標(biāo)準(zhǔn)的理解蚕苇、瀏覽器內(nèi)核差異哩掺、兼容性、hack涩笤、CSS基本功:...
    秀才JaneBook閱讀 2,371評(píng)論 0 25
  • 老朋友不了解你的近況炒刁,新朋友不懂你的脾氣。 今天陪表妹去上鋼琴課誊稚,上了公交落座之后才發(fā)現(xiàn)過(guò)道一旁是小學(xué)要好...
    泡桐姑娘閱讀 232評(píng)論 0 3
  • 檸檸小寶貝: 雖說(shuō)我一直很不屑以這樣俗氣的形式祝別人生日快樂(lè) 但似乎也并沒(méi)有更直接的辦法來(lái)表達(dá)我對(duì)你的愛(ài)′ε` 我...
    wwarkey閱讀 245評(píng)論 0 0