相關(guān)文章

• 【學(xué)習(xí)筆記】CSS深入理解之float

  摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。 張?chǎng)涡竦腃SS深入理解之float浮動(dòng)學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個(gè)BFC破壞：使父容器...

  denson 2019-08-29 17:31 評(píng)論0 收藏0

• CSS學(xué)習(xí)筆記(八) 頁面布局之三欄-固定寬度布局

  摘要：示例添加這一行規(guī)則結(jié)果就會(huì)變成這樣我們把這種現(xiàn)象稱為浮動(dòng)滑移，可以使用三種方法來預(yù)防發(fā)生從設(shè)定的元素寬度中減去添加的水平外邊距邊框和內(nèi)邊距的寬度和。當(dāng)我們?nèi)∠催x該屬性時(shí)，欄就會(huì)由于欄的推擠產(chǎn)生了浮動(dòng)滑移，移位到欄下方。 1.布局前的認(rèn)知 1.1 三種基本方案 多欄布局有三種基本的實(shí)現(xiàn)方案：固定寬度、流動(dòng)、彈性。 固定寬度。布局的大小不會(huì)隨用戶調(diào)整瀏覽器窗口大小而變化，一般是 ...

  eechen 2019-08-28 18:03 評(píng)論0 收藏0

• 【學(xué)習(xí)筆記】CSS深入理解之border

  摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變?？梢岳迷撎匦詫?shí)現(xiàn)圖標(biāo)變色的效果與定位不計(jì)算區(qū)域，只限于以內(nèi)的盒子。 張?chǎng)涡竦腃SS深入理解之border學(xué)習(xí)筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。因此從語義上來說，...

  he_xd 2019-08-30 15:54 評(píng)論0 收藏0

• 【學(xué)習(xí)筆記】CSS深入理解之z-index

  摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

  Steven 2019-08-30 15:54 評(píng)論0 收藏0

• CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

  摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...

  keke 2019-08-01 14:55 評(píng)論0 收藏0