CSS面試真題

CSS基礎(chǔ)

1奄妨、css樣式(選擇器)的優(yōu)先級(jí)
計(jì)算權(quán)重的確定
!important
內(nèi)聯(lián)樣式
后寫的樣式優(yōu)先級(jí)高(前提是大家的權(quán)重一樣)

2炊琉、雪碧圖的作用
減少HTTP請(qǐng)求次數(shù) 提高加載性能
有一些情況下可以減少圖片大小

3苔咪、自定義字體的使用場(chǎng)景
宣傳/品牌/banner等固定文案
字體圖標(biāo)

4团赏、base64的使用
用于減少HTTP請(qǐng)求
使用于小圖片
base64的體積約為原圖4/3

5耐薯、偽類和偽元素的區(qū)別
偽類表狀態(tài)
偽元素是真的有元素
前者單冒號(hào)曲初,后者雙冒號(hào)

6、如何美化checkbox
label[for]和id
隱藏原生input
:checked + label

css布局

1抒痒、實(shí)現(xiàn)兩欄(三欄)布局的方法
表格布局
float + margin布局
inline-block布局
flex布局
2故响、position:absoute/fixed有什么區(qū)別
前者相對(duì)最近的relative/absoute
后者相對(duì)于屏幕(viewport)
3彩届、display:inline-block
原因:字符間距的間隙
解決: 消滅字符或者消滅間距
4誓酒、如何清除浮動(dòng)
讓盒子負(fù)責(zé)自己的布局
overflow:hidden(auto)
::after{clear:both}
5、如何適配移動(dòng)端頁(yè)面
viewport
rem/viewport/media query
設(shè)計(jì)上:隱藏寂汇、折行骄瓣、自適應(yīng)

css效果

1耍攘、如何用一個(gè)div畫xxx
box-shadow無(wú)限投影
::after
::before
2蕾各、如何產(chǎn)生不占空間的邊框
box-shadow
outline
3式曲、如何實(shí)現(xiàn)圓形(頭像)
border-radius: 50%


QQ截圖20180716150305.png

5吝羞、如何實(shí)現(xiàn)半圓钧排、扇形等圖形
border-radius:組合
有無(wú)邊框
邊框粗細(xì)
圓角半徑


image.png

7恨溜、如何放大糟袁、平移一個(gè)元素
transform:translateX(100px)
transform:scale(2)
8项戴、如何實(shí)現(xiàn)3D效果


image.png

css動(dòng)畫

1肯尺、css實(shí)現(xiàn)動(dòng)畫的方式有幾種
transiton
keyframes(animation)


image.png

3槐臀、如何實(shí)現(xiàn)逐幀動(dòng)畫
使用關(guān)鍵幀動(dòng)畫
補(bǔ)掉補(bǔ)間(steps)


image.png

css預(yù)處理器

常見(jiàn)的css預(yù)處理器有兩種:

less(Node.js)
sass(Ruby有Node版本)


image.png

image.png

image.png

Bootstrap

image.png

image.png

image.png

css工程化方案

image.png

image.png

image.png
image.png

image.png

Bootstrap

image.png

image.png

image.png

總結(jié)

css學(xué)習(xí)路徑
css工作應(yīng)用
css面試技巧


image.png

image.png

image.png

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末砌滞,一起剝皮案震驚了整個(gè)濱河市贝润,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌华畏,老刑警劉巖亡笑,帶你破解...
    沈念sama閱讀 219,366評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件况芒,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡祠够,警方通過(guò)查閱死者的電腦和手機(jī)粪牲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)腺阳,“玉大人,你說(shuō)我怎么就攤上這事亭引∥圃” “怎么了萌京?”我有些...
    開(kāi)封第一講書人閱讀 165,689評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵靠瞎,是天一觀的道長(zhǎng)求妹。 經(jīng)常有香客問(wèn)我扒最,道長(zhǎng)吧趣,這世上最難降的妖魔是什么强挫? 我笑而不...
    開(kāi)封第一講書人閱讀 58,925評(píng)論 1 295
  • 正文 為了忘掉前任俯渤,我火速辦了婚禮絮爷,結(jié)果婚禮上坑夯,老公的妹妹穿的比我還像新娘柜蜈。我一直安慰自己淑履,他們只是感情好秘噪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,942評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布捷绒。 她就那樣靜靜地躺著暖侨,像睡著了一般字逗。 火紅的嫁衣襯著肌膚如雪葫掉。 梳的紋絲不亂的頭發(fā)上俭厚,一...
    開(kāi)封第一講書人閱讀 51,727評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音扛门,去河邊找鬼。 笑死葬凳,一個(gè)胖子當(dāng)著我的面吹牛沮明,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播琳袄,決...
    沈念sama閱讀 40,447評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼碎紊!你這毒婦竟也來(lái)了音同?” 一聲冷哼從身側(cè)響起权均,我...
    開(kāi)封第一講書人閱讀 39,349評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎必指,沒(méi)想到半個(gè)月后取劫,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,820評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,990評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了迅栅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,127評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖尔当,靈堂內(nèi)的尸體忽然破棺而出椭迎,到底是詐尸還是另有隱情缴阎,我是刑警寧澤药蜻,帶...
    沈念sama閱讀 35,812評(píng)論 5 346
  • 正文 年R本政府宣布视卢,位于F島的核電站据过,受9級(jí)特大地震影響西饵,放射性物質(zhì)發(fā)生泄漏眷柔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,471評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧锥忿,春花似錦、人聲如沸钉答。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,017評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)贷盲。三九已至巩剖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背镊尺。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,142評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工宋彼, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留音婶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,388評(píng)論 3 373
  • 正文 我出身青樓弱卡,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親凡人。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,066評(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
  • $HTML讥邻, HTTP,web綜合問(wèn)題 1发魄、前端需要注意哪些SEO 2口柳、 的title和alt有什么區(qū)別 3跃闹、HT...
    Hebborn_hb閱讀 4,602評(píng)論 0 20
  • 前端開(kāi)發(fā)面試題 面試題目: 根據(jù)你的等級(jí)和職位的變化睛榄,入門級(jí)到專家級(jí)啡莉,廣度和深度都會(huì)有所增加港准。 題目類型: 理論知...
    怡寶丶閱讀 2,587評(píng)論 0 7
  • <a name='html'>HTML</a> Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)咧欣、<...
    clark124閱讀 3,483評(píng)論 1 19
  • (二十三) 姜楠?jiǎng)倓傇谒奚崂锴掣祝鲋顒?dòng)策劃,她們就開(kāi)始吵了起來(lái)魄咕。演講與口才課衩椒,老師叫每個(gè)同學(xué)講自己的假期生活。講到...
    東邊的月閱讀 6,155評(píng)論 0 0