摘要:值得注意的是,這個(gè)設(shè)置對(duì)使用或其他絕對(duì)單位定義的字號(hào)大小無(wú)效。事實(shí)上,提供了一個(gè)在和間的相對(duì)單位折中解決方案,而且更易于使用。圖使用相對(duì)單位和繼承字號(hào)的面板下面是模板,加到你的頁(yè)面吧。
前段時(shí)間試譯了Keith J.Grant的CSS好書(shū)《CSS in Depth》,其中的第二章《Working with relative units》,書(shū)中對(duì)relative units的講解和舉例可以說(shuō)相當(dāng)全面,看完之后發(fā)現(xiàn)自己并不太懂CSS相對(duì)單位,也希望分享給大家,所以有了這個(gè)譯文系列。(若有勘誤或翻譯建議,歡迎 Github PR ^_^)
《別說(shuō)你懂CSS相對(duì)單位》系列譯文:
如何更愉快地使用em
如何更愉快地使用rem [本文]
視口相關(guān)單位的應(yīng)用
無(wú)單位數(shù)字和行高
CSS自定義屬性
本文對(duì)應(yīng)的章節(jié)目錄:
2.2 em和rem
2.2.2 對(duì)font-size使用rem
可用性:對(duì)font-size使用相對(duì)長(zhǎng)度單位
2.3 停止使用像素思維去思考
2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值
2.3.3 讓這個(gè)面板變得“響應(yīng)式”
2.3.3 調(diào)整單個(gè)組件的大小
2.2 em和rem 2.2.2 對(duì)font-size使用rem當(dāng)瀏覽器解析HTML文檔時(shí),創(chuàng)建了一個(gè)用來(lái)代表頁(yè)面元素的集合,叫做DOM(文檔對(duì)象模型,Document Object Model)。樹(shù)狀結(jié)構(gòu),每一個(gè)節(jié)點(diǎn)代表一個(gè)元素。就是頂層節(jié)點(diǎn)(根節(jié)點(diǎn)),在下面的是它的子節(jié)點(diǎn)和,再往下就是它們的子節(jié)點(diǎn),還有后代節(jié)點(diǎn),如此類(lèi)推。
根節(jié)點(diǎn)是文檔里所有其他元素的祖先。它有一個(gè)特別的偽類(lèi)(pseudo-class)選擇器(:root),在樣式表里可以用這個(gè)選擇器表示。使用帶類(lèi)名的類(lèi)型選擇器html,或者直接用標(biāo)簽選擇器,效果是一樣的。
rem是根em(root em)的縮寫(xiě)。rem是和根元素關(guān)聯(lián)的,不依賴(lài)當(dāng)前元素。不管你在文檔中的什么地方使用這個(gè)單位,1.2rem的計(jì)算值是相等的,等于1.2倍的根元素的字號(hào)大小。下面的示例代碼中,聲明了根元素的字號(hào)大小,并在嵌套的無(wú)序列表中使用rem聲明字號(hào)大小。
[ 代碼片段 2.10 使用rem聲明字號(hào)大小 ]
:root { 1 font-size: 1em; 2 } ul { font-size: .8rem; }
1 偽類(lèi) :root 等價(jià)于 html 選擇器
2 使用瀏覽器的默認(rèn)字號(hào)大小(16px)
在這個(gè)示例里,根字號(hào)大小是瀏覽器的默認(rèn)大小16px(根元素的1em等于瀏覽器的默認(rèn)字號(hào)大小)。無(wú)序列表的字號(hào)大小為0.8rem,計(jì)算結(jié)果是12.8px。因?yàn)檫@只跟根元素相關(guān),盡管你在列表里嵌套了列表,嵌套子列表的字號(hào)仍然保持不變。
可用性:對(duì)font-size使用相對(duì)長(zhǎng)度單位一些瀏覽器會(huì)提供給用戶(hù)2種方式定制文字的大小:縮放和設(shè)置一個(gè)默認(rèn)的字號(hào)大小。通過(guò)按Ctrl+或者Ctrl-,用戶(hù)可以對(duì)頁(yè)面進(jìn)行縮放。這在視覺(jué)上會(huì)把整個(gè)頁(yè)面的文字或圖片(其實(shí)是所有元素)都放大或縮小了。在一些瀏覽器,這個(gè)改變只針對(duì)當(dāng)前的標(biāo)簽頁(yè)且是臨時(shí)的,不會(huì)影響到新開(kāi)的標(biāo)簽頁(yè)。
設(shè)置默認(rèn)字號(hào)大小,會(huì)有點(diǎn)不一樣。不僅僅是設(shè)置的入口比較難找(一般在瀏覽器的設(shè)置頁(yè)),而且這個(gè)設(shè)置是永久的,直到用戶(hù)把默認(rèn)值還原。值得注意的是,這個(gè)設(shè)置對(duì)使用px或其他絕對(duì)單位定義的字號(hào)大小無(wú)效。因?yàn)槟J(rèn)字號(hào)大小對(duì)一些用戶(hù)是必要的,尤其是弱視的群體,你應(yīng)該用相對(duì)單位或百分比來(lái)定義字號(hào)的大小。
rem簡(jiǎn)化了很多em帶來(lái)的復(fù)雜度。事實(shí)上,rem提供了一個(gè)在px和em間的相對(duì)單位折中解決方案,而且更易于使用。那么,是不是意味著你應(yīng)該在對(duì)所有元素都使用rem,去掉其他長(zhǎng)度單位呢?當(dāng)然不是。
在CSS的世界里,這個(gè)答案通常是,看情況。rem只是你的工具箱中的其中一個(gè)。掌握CSS很重要的一點(diǎn),就是學(xué)會(huì)分辨在什么場(chǎng)景下該使用什么工具。我的選擇是,對(duì)font-size使用rem,對(duì)border使用px,對(duì)其他的度量方式如padding、margin、border-radius等使用em。然而在必要時(shí),需要聲明容器的寬度的話(huà),我更喜歡使用百分比。
這樣,字號(hào)大小就變得可預(yù)測(cè),而當(dāng)其他因素影響到元素的字號(hào)大小時(shí),你也可以借助em去縮放元素的padding和margin。在border上使用像素是很合適的,尤其當(dāng)你想要一根漂亮的線(xiàn)的時(shí)候。以上就是我對(duì)不同屬性使用不同單位的理想方案,不過(guò)我要再次聲明,這些都是工具,在某些特定場(chǎng)景下,利用不同的工具可能取到更好的效果。
提示2.3 停止使用像素思維去思考當(dāng)你不確定的時(shí)候,對(duì)font-size使用rem,對(duì)border使用px,以及對(duì)其他大多數(shù)屬性使用em。
把頁(yè)面的根元素字號(hào)大小定義為0.625em或者62.5%,在最近幾年來(lái),這樣的用法很常見(jiàn),這是一種模式,或者更貼切地說(shuō),這是一種反模式。
[ 代碼片段 2.11 反模式:全局地把font-size定義為10px ]
html { font-size: .625em; }
我并不推薦這種用法。這個(gè)用法把瀏覽器默認(rèn)的字號(hào)大小16px縮小到10px。這樣做的好處是簡(jiǎn)化了計(jì)算,如果設(shè)計(jì)師告訴你字號(hào)大小應(yīng)該是14px,那你可以很輕易地計(jì)算出1.4rem,畢竟我們還是在使用相對(duì)單位。
一開(kāi)始,這看起來(lái)很方便,但事實(shí)上這樣的實(shí)現(xiàn)方式有兩個(gè)問(wèn)題。第一,強(qiáng)制你寫(xiě)了很多重復(fù)的樣式代碼。10px對(duì)于大多數(shù)文本來(lái)說(shuō)太小了,你需要在整個(gè)頁(yè)面中,來(lái)來(lái)回回地覆蓋它。你會(huì)發(fā)現(xiàn),自己把一段段落(
)的字號(hào)大小聲明為1.4rem,然后又把導(dǎo)航()的鏈接字號(hào)大小聲明為1.4rem,樣式代碼中還有很多這樣的用法。這樣引入了更高的錯(cuò)誤風(fēng)險(xiǎn),當(dāng)你需要修改時(shí)發(fā)現(xiàn)代碼耦合程度比較高,同時(shí)也會(huì)讓樣式文件變大。
第二個(gè)問(wèn)題是,你這么做的時(shí)候,其實(shí)你還是在用像素的思維在思考。雖然在代碼里寫(xiě)的是1.4rem,但是在你的腦子里,其實(shí)還是想的是14px。在響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)中,你應(yīng)該學(xué)會(huì)適應(yīng)那些“模糊”的值。1.2em實(shí)際等于多少像素,并不重要,你只需要知道這是比繼承的字號(hào)大一點(diǎn)點(diǎn),那就足夠了。而且,如果在屏幕上這不是你想要的效果,那就改吧。這是需要時(shí)間實(shí)驗(yàn)和試錯(cuò)的,但事實(shí)上,使用px的時(shí)候我們也需要這樣做。(在第13章,我們會(huì)有更具體的方式來(lái)優(yōu)化這個(gè)實(shí)現(xiàn)方式。)
當(dāng)使用em時(shí),我們很容易陷入糾結(jié),這個(gè)值轉(zhuǎn)化成像素值會(huì)是多少呢?尤其對(duì)于字號(hào)大小。你一直在乘和除以em值,這樣你很快就會(huì)瘋掉了。相反,我希望你可以接受一項(xiàng)挑戰(zhàn),嘗試培養(yǎng)先開(kāi)始使用em的習(xí)慣。如果你習(xí)慣使用像素,那轉(zhuǎn)成em是需要一定時(shí)間和練習(xí)的,但相信我,這很值得。
這不是在說(shuō)你再也不使用像素了。如果你跟一個(gè)設(shè)計(jì)師合作,你可能需要用更精確的像素值去溝通,這沒(méi)問(wèn)題的。在項(xiàng)目的開(kāi)始,你需要聲明一個(gè)基礎(chǔ)的字號(hào)大小(通常是對(duì)標(biāo)題或者標(biāo)注的常用字號(hào))。使用絕對(duì)值去描述大小,往往會(huì)更加容易。
轉(zhuǎn)換成rem會(huì)有計(jì)算環(huán)節(jié),那就讓計(jì)算器去忙吧(通常我會(huì)在Mac電腦上按cmd+空格,在Spotlight里計(jì)算)。首先在根元素上聲明根字號(hào)大小,從那開(kāi)始,使用像素應(yīng)該是例外的情況,而不是常態(tài)。
在這章內(nèi)容里,我還是會(huì)持續(xù)地聊起像素。這會(huì)有助于我解釋相對(duì)單位的工作原理,同時(shí)也能幫助你培養(yǎng)計(jì)算em值的習(xí)慣。在這章之后,我基本會(huì)使用相對(duì)單位來(lái)討論字號(hào)的大小。
2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值先假設(shè)你想把默認(rèn)字號(hào)設(shè)定為14px。把10px設(shè)定為基準(zhǔn)值,再在頁(yè)面中去覆蓋它的寫(xiě)法,我們不推薦這種寫(xiě)法,相反,你應(yīng)該在根元素上直接聲明一個(gè)值。
在這個(gè)代碼片段里,目標(biāo)字號(hào)值是繼承的,瀏覽器的默認(rèn)值16px,那么14/16 = 0.875。
把下面的代碼添加到一個(gè)新的樣式表的最上面,我們會(huì)在這上面添加其他代碼。這里設(shè)定根元素()的默認(rèn)字號(hào)大小。
[ 代碼片段 2.12 設(shè)定正確的默認(rèn)字號(hào)大小 ]
:root { 1 font-size: 0.875em; 2 }
1 或者使用 HTML 選擇器
2 14/16(期望值px / 繼承值px)等于0.875
現(xiàn)在,你的期望基準(zhǔn)字號(hào)14px對(duì)整個(gè)頁(yè)面的元素有效,你不需要在其他地方重新聲明了。你只需要在設(shè)計(jì)不一樣的地方修改成新的字號(hào),譬如標(biāo)題。
我們一起來(lái)創(chuàng)建圖2.7那樣的面板吧!你創(chuàng)建的這個(gè)面板,基于14px字號(hào),使用相對(duì)單位。
[ 圖 2.7 使用相對(duì)單位和繼承字號(hào)的面板 ]
下面是模板,加到你的頁(yè)面吧。
[ 代碼片段 2.13 面板的模板 ]
Single-origin
We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then carefully roast in small batches to maximize their potential.
下一段代碼是樣式的。你會(huì)在padding和border-radius使用em,標(biāo)題的字號(hào)使用rem,以及border使用px。把下面代碼添加到你的樣式表吧。
[ 代碼片段 2.14 使用相對(duì)單位的面板 ]
.panel { padding: 1em; 1 border-radius: 0.5em; 1 border: 1px solid #999; 2 } .panel > h2 { margin-top: 0; 3 font-size: 0.8rem; 4 font-weight: bold; 4 text-transform: uppercase; 4 }
1 對(duì)padding和border-radius使用em
2 用1px定義細(xì)邊框
3 把面板上面多余的空間去掉,更多解釋看第3章
4 用rem控制標(biāo)題的字號(hào)大小
這段代碼給面板添加了一個(gè)細(xì)邊框以及定義了標(biāo)題的樣式。我希望標(biāo)題的字號(hào)小一點(diǎn),但要加粗和全是大寫(xiě)。(你可以根據(jù)自己的設(shè)計(jì),把字號(hào)改大點(diǎn)或者使用不同的排版方式)
第二個(gè)選擇器>是一個(gè)直接后代組合選擇符(direct descendant combinator),它代表的是.panel下的子元素h2。更完整的選擇器和組合選擇符的索引可以看附錄A。
在代碼片段2.13中,為了更清晰看到效果,我給body添加了一個(gè)類(lèi)panel-body,不過(guò)你會(huì)發(fā)現(xiàn),在你自己的代碼里是不需要的。因?yàn)檫@個(gè)元素從根元素上繼承了字號(hào)大小,它已經(jīng)是你想要看到的那樣。
2.3.3 讓這個(gè)面板變得“響應(yīng)式”我們?cè)俑钊氲乜纯催@個(gè)問(wèn)題。你可以根據(jù)屏幕尺寸的變化,添加媒體查詢(xún)來(lái)改變基礎(chǔ)字號(hào)大小,這可以令面板在不同尺寸的屏幕下,有不同的大小變化。(見(jiàn)圖2.8)
[ 圖 2.8 在不同屏幕大小的響應(yīng)式面板:300px(左上角),800px(右上角),1440px(下面) ]
媒體查詢(xún)(media query) —— 通過(guò)@media規(guī)則來(lái)聲明樣式,在不同的屏幕尺寸或者媒體類(lèi)型(如打印機(jī)或顯示器)下,觸發(fā)對(duì)應(yīng)的樣式控制。這是響應(yīng)式設(shè)計(jì)的關(guān)鍵要素。詳情看代碼片段2.15的這個(gè)例子,我在第8章會(huì)更深入的討論媒體查詢(xún)這個(gè)話(huà)題。
為了實(shí)現(xiàn)上面說(shuō)的效果,把你的樣式代碼改成這樣。
[ 代碼片段 2.15 ]
:root { 1 font-size: 0.75em; 1 } 1 @media (min-width: 800px) { 2 :root { 2 font-size: 0.875em; 2 } 2 } 2 @media (min-width: 1200px) { 3 :root { 3 font-size: 1em; 3 } 3 }
1 針對(duì)所有屏幕,但是在更大的屏幕會(huì)被覆蓋
2 針對(duì)比800px更寬的屏幕,覆蓋默認(rèn)樣式代碼
3 針對(duì)比1200px更寬的屏幕,覆蓋以上兩套樣式代碼
第一套樣式規(guī)則,聲明了小屏幕中的默認(rèn)字號(hào)大小,這是我們想要在較小的屏幕上看到的字號(hào)大小。然后使用媒體查詢(xún),把800px和1200px分別作為兩個(gè)分水嶺逐級(jí)增加字號(hào)的大小,覆蓋掉默認(rèn)的代碼。
針對(duì)頁(yè)面的根元素使用這些字號(hào)大小,響應(yīng)式地重新定義em和rem對(duì)應(yīng)的值,從而達(dá)到響應(yīng)改變整個(gè)頁(yè)面的效果。盡管你沒(méi)有直接對(duì)這個(gè)面板做任何的修改,它現(xiàn)在是響應(yīng)式的。在小屏幕上,譬如一臺(tái)手機(jī),字號(hào)大小會(huì)被渲染成更小的(12px)。然后,在更大的屏幕上,寬大于800px和大于1200px的,組件的字號(hào)會(huì)分別放大到14px和16px。改變你的瀏覽器窗口,看看組件是怎么變化的吧。
如果你在整個(gè)頁(yè)面中像這樣嚴(yán)格使用相對(duì)單位,整個(gè)頁(yè)面會(huì)隨著視窗大小放大和縮小。這會(huì)是你的響應(yīng)式策略里很重要的一部分。上面的2套媒體查詢(xún)聲明代碼,可以幫助你節(jié)省在頁(yè)面的其他部分使用媒體查詢(xún)的額外代碼。不過(guò),如果你在元素中聲明的字號(hào)大小是以像素為單位的,那就不會(huì)產(chǎn)生任何效果了。
類(lèi)似地,如果你的老板或者客戶(hù)覺(jué)得現(xiàn)在網(wǎng)站的字號(hào)太小或者太大,你隨時(shí)可以做到通過(guò)修改一行代碼影響到全局的元素,這項(xiàng)改變會(huì)影響到頁(yè)面上的其他元素,不費(fèi)吹灰之力。
2.3.3 調(diào)整單個(gè)組件的大小你也可以通過(guò)使用em縮放頁(yè)面上的一個(gè)獨(dú)立組件。有時(shí),你可能會(huì)需要界面上的某些組件可以有個(gè)大號(hào)的版本。在我們的面板上這么做吧,首先你需要給面板添加一個(gè)類(lèi)名large: 在圖2.9,我們看到了面板的普通版和大號(hào)版的比較。效果類(lèi)似響應(yīng)式面板,但是兩種尺寸是可以同時(shí)在同一個(gè)頁(yè)面中使用的。 [ 圖 2.9 在一個(gè)頁(yè)面上的普通尺寸面板和大號(hào)面板 ] 我們來(lái)對(duì)面板的字號(hào)聲明方式做一些小的修改。你還是在使用相對(duì)單位,但需要調(diào)整它們的基準(zhǔn)值。第一點(diǎn),給每個(gè)面板的父元素字號(hào)大小的定義font-size: 1rem。這里指的是,不管在什么地方使用這個(gè)面板,每個(gè)面板的字號(hào)大小是一個(gè)確定值。 第二點(diǎn),使用em重新聲明標(biāo)題的字號(hào)大小,而不使用rem,這樣標(biāo)題就可以和剛才聲明的父元素字號(hào)1rem關(guān)聯(lián)起來(lái)。下面是對(duì)應(yīng)的代碼,更新下你的樣式表代碼吧。 [ 代碼片段 2.16 創(chuàng)建一個(gè)面板的大號(hào)版本 ] 1 給組件聲明確定的字號(hào)大小 2 其他元素的字號(hào)大小用em和父元素字號(hào)關(guān)聯(lián) 這些修改看起來(lái)并沒(méi)有影響面板的樣式,但是現(xiàn)在你已經(jīng)準(zhǔn)備好了,做一個(gè)大號(hào)的面板只需要修改一小行代碼。你需要做的,就是把父元素字號(hào)大小改寫(xiě)成1rem以外的一個(gè)值。因?yàn)槠渌氐挠?jì)算方式都依賴(lài)父元素的字號(hào)大小,只要修改它,整個(gè)面板的相關(guān)尺寸都會(huì)發(fā)生改變。添加下一個(gè)CSS代碼片段到你的樣式表,定義一個(gè)大號(hào)面板吧。 [ 代碼片段 2.17 利用一行代碼放大整個(gè)面板 ] 1 組合選擇器指向同時(shí)有panel類(lèi)和large類(lèi)的元素 現(xiàn)在,你可以給普通面板添加class="panel"和給大號(hào)面板添加class="panel large"。類(lèi)似地,你也可以定義一個(gè)小號(hào)版本,只需要把父元素的字號(hào)設(shè)得比1rem小。如果這個(gè)面板是一個(gè)更復(fù)雜的組件,包含多種字號(hào)大小或padding,也只需要一個(gè)聲明就可以重置大小,只要所有的子元素都是使用em聲明的。 《別說(shuō)你懂CSS相對(duì)單位》系列譯文: 如何更愉快地使用em
如何更愉快地使用rem [本文] 視口相關(guān)單位的應(yīng)用 無(wú)單位數(shù)字和行高 CSS自定義屬性 章節(jié):
2.1 相對(duì)單位值的魔力 2.1.1 完美像素設(shè)計(jì)(pixel-perfect design)的掙扎 2.1.2 完美像素網(wǎng)頁(yè)的終結(jié) 像素(pixel)、點(diǎn)(point)和pc(pica)
2.2 em和rem
2.2.1 對(duì)font-size使用em 當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性 字號(hào)收縮問(wèn)題
2.2.2 對(duì)font-size使用rem 可用性:對(duì)font-size使用相對(duì)長(zhǎng)度單位
2.3 停止使用像素思維去思考 2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值 2.3.2 讓這個(gè)面板變得“響應(yīng)式” 2.3.3 調(diào)整單個(gè)組件的大小
2.4 視口相關(guān)單位(viewport-relative units) CSS3 2.4.1 在font-size上使用vw 2.4.2 在font-size上使用calc() 2.5 不帶單位的數(shù)字(unitless number)和行高(line-height)
2.6 自定義屬性(也叫“CSS變量”) 2.6.1 動(dòng)態(tài)改變自定義屬性的值 2.6.2 通過(guò)JavaScript改變自定義屬性的值 2.6.3 初探自定義屬性 總結(jié) 作者:Keith J.Grant 筆者 @Yuying Wu,前端愛(ài)好者 / 鼓勵(lì)師 / 新西蘭打工度假 / 鏟屎官。目前就職于某大型電商的B2B前端團(tuán)隊(duì)。 感謝你讀到這里,對(duì)上文若有任何疑問(wèn)或建議,歡迎留言。 如果你和我一樣喜歡前端,喜歡搗騰獨(dú)立博客或者前沿技術(shù),或者有什么職業(yè)疑問(wèn),歡迎關(guān)注我以及各種交流哈。 獨(dú)立博客:wuyuying.com 文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116891.html.panel {
font-size: 1rem; 1
padding: 1em;
border: 1px solid #999;
border-radius: 0.5em;
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em; 2
font-weight: bold;
text-transform: uppercase;
}
.panel.large { 1
font-size: 1.2rem;
}
原著版權(quán)信息:
書(shū)籍:CSS in Depth
章節(jié):Working with relative units
知乎ID:@Yuying Wu
Github:Yuying Wu
摘要:無(wú)單位數(shù)字和行高有一些屬性可以接收不帶單位的數(shù)值意思就是一個(gè)不帶長(zhǎng)度單位的數(shù)字,如和等于,等于,如此類(lèi)推。警告不帶單位的只可以表示長(zhǎng)度單位和百分比的值,譬如和。段落繼承了的行高。長(zhǎng)度有兩種類(lèi)型絕對(duì)的和相對(duì)的。 前段時(shí)間試譯了Keith J.Grant的CSS好書(shū)《CSS in Depth》,其中的第二章《Working with relative units》,書(shū)中對(duì)relative ...
摘要:還有視口相關(guān)單位,依賴(lài)瀏覽器的視口大小來(lái)定義長(zhǎng)度的。如果你不熟悉視口相關(guān)單位的話(huà),在這里簡(jiǎn)單介紹一下。筆記視口相關(guān)單位對(duì)于大多數(shù)瀏覽器還是一項(xiàng)比較新的特性,所以當(dāng)你試圖把這個(gè)特性和其他樣式混搭時(shí),有可能會(huì)有一些很奇怪的。 前段時(shí)間試譯了Keith J.Grant的CSS好書(shū)《CSS in Depth》,其中的第二章《Working with relative units》,書(shū)中對(duì)rel...
摘要:相對(duì)單位的值會(huì)根據(jù)外部影響因素的變化而變化。很自然,相對(duì)單位使用起來(lái)會(huì)比較困難。在本章中,我將揭開(kāi)相對(duì)單位的神秘面紗。重點(diǎn)來(lái)了,使用相對(duì)單位聲明的值會(huì)由瀏覽器轉(zhuǎn)化為一個(gè)絕對(duì)值,我們稱(chēng)之為計(jì)算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時(shí)間試譯了Keith J.Grant的CSS好書(shū)《CSS in Depth》,其中的第二章《W...
摘要:前段時(shí)間試譯了的好書(shū),其中的第二章,書(shū)中對(duì)的講解和舉例可以說(shuō)相當(dāng)全面,看完之后發(fā)現(xiàn)自己并不太懂相對(duì)單位,也希望分享給大家,所以有了這個(gè)譯文系列。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時(shí)間試譯了Keith J.Grant的CSS好書(shū)《CSS in Depth》,其中的第二章《Working with r...
摘要:知道存在是很有用的,這樣當(dāng)你在別人的代碼中遇到它時(shí),你就知道它是什么了。如上面所示的示例所示,元素選擇器具有很低的特殊性。類(lèi)選擇器具有更高特殊性,所以將戰(zhàn)勝元素選擇器。個(gè)位在整個(gè)選擇器中每包含一個(gè)元素選擇器或偽元素就在該列中加分。 在實(shí)際的工作中,我們可能還有些疑惑,當(dāng)有多個(gè)選擇器作用在一個(gè)元素上時(shí),哪個(gè)規(guī)則最終會(huì)應(yīng)用到元素上?其實(shí)這是通過(guò)層疊機(jī)制來(lái)控制的,這也和樣式繼承(元素從其父元...
閱讀 1587·2021-11-22 15:33
閱讀 1727·2021-11-15 18:01
閱讀 663·2021-10-09 09:43
閱讀 2604·2021-09-22 16:03
閱讀 758·2021-09-03 10:28
閱讀 3550·2021-08-11 10:22
閱讀 2718·2019-08-30 15:54
閱讀 1761·2019-08-30 14:21