前端面試準備之——CSS篇

1溶耘、元素定位有哪些拯钻?

absolute 以第一個不是以static定位的父元素進行定位

fixed 以瀏覽器窗口進行定位

relative 相對于其正常定位進行定位

static 默認定位,元素出現(xiàn)在正常的文檔流中

2侥猬、CSS的選擇符有哪些笛园?優(yōu)先級算法怎么定義懦胞?

id選擇器 #id

類選擇器 #class

偽類選擇器 #id:after

標簽選擇器 div

相鄰選擇器 div+p( 同級兄弟元素)

子代選擇器 div>p

后代選擇器 div p

通配選擇器 *

屬性選擇器?

? a[href^="http"] a的href屬性以http開頭的?

? a[href *="www"] a的href屬性 sdwww的 ?

? a[href $="com"]以com結(jié)尾

? p[class ~="item"] 所有p標簽中類名包括item的 ?

? p[title ="aaa"] p的title為aaa的

優(yōu)先級算法

important > 行內(nèi)樣式 > id選擇器> 類選擇器 = 偽類選擇器 > 標簽選擇器 > 其他

權(quán)重一樣的就近原則

CSS可以繼承的樣式有哪些,不可以繼承的樣式有哪些脊串?

可以繼承 font-size ? ?font-family ? ?text-indent(首行縮進) ? ? color

不可以繼承 ?width ?height ?border margin padding

CSS3新增的偽類有哪些



3辫呻、如何清除元素浮動?

1琼锋、 在浮動元素后面添加<div class="clear"></div>

.clear{ ?clear: both; ?font-size: 0; ?height: 0; ?overflow: hidden;}

2放闺、 在浮動元素后面添加 <br clear="all"/>

3、還用偽類對象和zoom(推薦使用)

給浮動元素的父元素添加 .clear屬性

.clear{ zoom : 1} 觸發(fā)IE的hasLayout ?屬性

.clear:after{ dispaly: block; clear: both; content:" " ; ?height: 0; ?visibility: hidden;}\

4缕坎、觸發(fā)元素的BFC

①雄人、 使用overflow屬性觸發(fā)

給父元素設(shè)置 overflow: hidden; ?或者 overflow:auto念赶;

②础钠、 使用display屬性觸發(fā)

給父元素設(shè)置 display:inline-block

③、使用float屬性

給父元素設(shè)置float屬性

這三種方式都會觸發(fā)元素的BFC叉谜,元素內(nèi)部的元素的各個屬性不會影響到元素外部

4旗吁、 em 、 rem 停局、 百分比很钓、 vw 香府、 vh 、 vmin码倦、 vmax 企孩、 ch、 ex?


em是依賴父元素的font-size ?eg: 父元素的font-size = 16px ?則1em = 16px

rem是依賴html 的font-size eg: html{font-size:16px} 則1rem = 16px ?(IE9 以上)?

vw 是根據(jù)視口的寬度的百分比? vh是根據(jù)視口的高度的百分比 (IE10以上)

vmin 是 vw和vh 中較小的一個 ? ? vmax 是 vw 和 vh 中較大的一個

ch 是根據(jù)字符0的寬度 ? ?ex是小寫x字符的高度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末袁稽,一起剝皮案震驚了整個濱河市勿璃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌推汽,老刑警劉巖补疑,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異歹撒,居然都是意外死亡莲组,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門暖夭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锹杈,“玉大人,你說我怎么就攤上這事迈着〗咄” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵寥假,是天一觀的道長市框。 經(jīng)常有香客問我霞扬,道長糕韧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任喻圃,我火速辦了婚禮萤彩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘斧拍。我一直安慰自己雀扶,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布肆汹。 她就那樣靜靜地躺著愚墓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪昂勉。 梳的紋絲不亂的頭發(fā)上浪册,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音岗照,去河邊找鬼村象。 笑死笆环,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的厚者。 我是一名探鬼主播躁劣,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼库菲!你這毒婦竟也來了账忘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤蝙昙,失蹤者是張志新(化名)和其女友劉穎闪萄,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奇颠,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡败去,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了烈拒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片圆裕。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖荆几,靈堂內(nèi)的尸體忽然破棺而出吓妆,到底是詐尸還是另有隱情,我是刑警寧澤吨铸,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布行拢,位于F島的核電站,受9級特大地震影響诞吱,放射性物質(zhì)發(fā)生泄漏舟奠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一房维、第九天 我趴在偏房一處隱蔽的房頂上張望沼瘫。 院中可真熱鬧,春花似錦咙俩、人聲如沸耿戚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽膜蛔。三九已至,卻和暖如春脖阵,著一層夾襖步出監(jiān)牢的瞬間皂股,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工独撇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屑墨,地道東北人躁锁。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像卵史,于是被迫代替她去往敵國和親战转。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案以躯? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,734評論 1 92
  • <a name='html'>HTML</a> Doctype作用槐秧?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,460評論 1 19
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,524評論 32 459
  • 趁周末太陽正好,溫暖而不灼熱址晕,一個人哼哧哼哧地把許久沒出門的被子扛上樓頂曬了一下午膀懈。晚上吃完藥洗漱完就趕緊上床睡覺...
    天涯林曉閱讀 389評論 0 2
  • 蘋果本也是一種愁 諾亞載不動便化作江水悠悠 在懷夢者心底慢流 望見人間獨擁寒裘 問誰能再飲一杯酒 且思量初心在否 ...
    諸延煜閱讀 184評論 0 1