7个你可能不认识的CSS单位

2015-11-11 admin 评论:0

浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓嶆柇澧為暱銆傚洜姝わ紝浣滀负缃戦〉璁捐�″笀鍜屽墠绔�寮€鍙戜汉鍛橈紝鎴戜滑鍒�鏃犻€夋嫨锛屽繀椤荤啛鎮夋垜浠�鎵嬩笂鐨勫伐鍏凤紝鍋氬埌鐭ュ繁鐭ュ郊锛岃繖鏍锋墠鑳界櫨鎴樹笉娈嗐€�

杩欏氨鎰忓懗鐫€鏈夐偅涔堜簺涓�鐗瑰埆鐨勮揣锛岃櫧鐒跺钩甯搁兘涓嶆€庝箞浼氱敤涓婏紝浣嗘槸涓€鏃︽煇涓�鍦版柟闇€瑕佸畠浠�浜嗭紝浠栦滑灏辩湡鐨勬槸鐗逛箞寰楀悎閫備笉杩囨潵浜嗗憿銆�

浠婂効锛屾垜灏卞噯澶囧悜澶т紮鍎夸粙缁嶄竴浜涗綘浠�涔嬪墠鍙�鑳藉緢灏戣�佽繃CSS瀹朵紮浠�銆備粬浠�姣忎釜閮芥槸搴﹂噺鐨勫崟浣嶏紝绫讳技pixel聽鍜屄�em聽杩欐牱鐨勶紝浣嗘槸寰堟湁鍙�鑳戒綘涔嬪墠浠庢潵灏辨病鍚�杩囪繖浜涘�朵紮浠�锛佸氨璁╂垜浠�涓€璧锋潵浜や釜鏈嬪弸鍚�~

rem

鎴戜滑棣栧厛浠嬬粛涓嬪拰鎴戜滑鐔熸倝鐨勫緢鐩镐技鐨勮揣銆�em聽琚�瀹氫箟涓虹浉瀵逛簬褰撳墠瀵硅薄鍐呮枃鏈�鐨勫瓧浣撳ぇ灏忋€傜倰涓�鏍楀瓙锛屽�傛灉浣犵粰body灏忓摜璁剧疆浜唂ont-size瀛椾綋澶у皬锛岄偅涔坆ody灏忓摜鐨勪换浣曞瓙鍏冪礌鐨�1em灏辨槸绛変簬body璁剧疆鐨刦ont-size銆�

<div>

<div id=“crayon-5a31bbb7a543e537132340” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly=""><body> <div class=“test”>Test</div> </body></textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

<body>

<div class="test">Test</div>

</body>

</div>

|

</div>

</div>

</div>

<div>

<div id=“crayon-5a31bbb7a544a731122954” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px }</textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

body {

font-size: 14px;

}

div {

font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px

}

</div>

|

</div>

</div>

</div>

浣犵湅锛岃繖閲宒iv杩欏▋鐨勫瓧浣撳ぇ灏忔槸1.2em銆傝В閲婃潵璇达紝灏辨槸浠栦粠body鐖圭埞閭i噷缁ф壙鐨勫瓧浣撳ぇ灏忥紙杩欓噷鏄�14px锛夌殑1.2鍊嶏紝缁撴灉灏辨槸16.8px銆�

浣嗘槸锛屽�傛灉浣犵敤em涓€灞備竴灞傜骇鑱斿緱瀹氫箟宓屽�楀厓绱犵殑瀛椾綋澶у皬鍙堜細鑺辩敓浠€涔堜簨鎯呭憿锛熷湪涓嬮潰杩欎竴灏忔�典唬鐮侀噷鎴戜滑搴旂敤浜嗗拰涓婇潰涓€鏍蜂竴鏍风殑CSS锛屾瘡涓€涓猟iv閮戒粠瀹冧笂涓€绾х埗鍏冪礌缁ф壙浜嗗瓧浣撳ぇ灏忥紝骞朵笖閫愭笎寰楀�炲姞銆�

<div>

<div id=“crayon-5a31bbb7a544f631534697” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly=""><body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body></textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

<body>

<div>

Test <!-- 14 * 1.2 = 16.8px -->

<div>

Test <!-- 16.8 * 1.2 = 20.16px -->

<div>

Test <!-- 20.16 * 1.2 = 24.192px -->

</div>

</div>

</div>

</body>

</div>

|

</div>

</div>

</div>

瀹炰緥 铏界劧鍦ㄦ煇浜涘湴鏂硅繖姝f槸鎴戜滑鎯宠�佺殑锛屼絾鏄�閫氬父鎯呭喌涓嬫垜浠�杩樻槸甯屾湜灏变緷璧栧崟涓€鐨勭浉瀵瑰害閲忓崟浣嶅氨濂姐€傝繖鏃跺€欏槢锛屾垜浠�灏卞彲浠ヤ娇鐢�聽rem聽浜嗐€� 鈥榬鈥欐槸鈥渞oot鈥濈殑缂╁啓锛屾剰鎬濆氨鏄�1rem绛変簬鏍瑰厓绱犵殑瀛椾綋澶у皬锛涘ぇ閮ㄥ垎鎯呭喌涓嬶紝鏍瑰厓绱犲氨鏄�<html>鍏冪礌浜嗐€�

<div>

<div id=“crayon-5a31bbb7a545d600646762” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">html { font-size: 14px; } div { font-size: 1.2rem; }</textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

html {

font-size: 14px;

}

div {

font-size: 1.2rem;

}

</div>

|

</div>

</div>

</div>

杩欐牱鍦ㄤ笂闈㈢殑閭d笁涓�宓屽�楃殑div濞冧滑鐨勫瓧浣撳ぇ灏忛兘鏄� 1.2*14px = 16.8px 浜嗐€�

閫傜敤浜庣綉鏍煎竷灞€

Rems 涓嶄粎浠呭彧鏄�鍦ㄨ�剧疆瀛椾綋澶у皬涓婂緢鏂逛究銆傚啀鐐掍釜鏍楀瓙锛屼綘鍙�浠ョ敤鍩轰簬html鏍瑰厓绱犲瓧浣撳ぇ灏忕殑rem浣滀负鏁翠釜缃戞牸甯冨眬鎴栬€匲I搴撶殑澶у皬鍗曚綅锛岀劧鍚庡湪鍏朵粬鐗瑰畾鐨勫湴鏂圭敤em鍗曚綅銆傝繖鏍峰皢浼氱粰浣犲甫鏉ユ洿澶氱殑瀛椾綋澶у皬鍜屼几缂╃殑鍙�鎺ф€э紝

<div>

<div id=“crayon-5a31bbb7a5462921848349” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">.container { width: 70rem; // 70 * 14px = 980px }</textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

.container {

width: 70rem; // 70 * 14px = 980px

}

</div>

|

</div>

</div>

</div>

姒傚康涓婃潵璇达紝杩欎釜鏂规硶鐨勬€濇兂灏辨槸璁╀綘鐨勭晫闈㈡牴鎹�浣犵殑鍐呭�硅繘琛岀缉鏀俱€備絾鏄�锛岃繖鏍峰仛骞朵笉鏄�瀵规墍鏈夌殑鎯呭喌閮芥湁鎰忎箟銆�

vh and vw

鍝嶅簲寮弚eb璁捐�$�讳笉寮€鐧惧垎姣斻€備絾鏄�锛孋SS鐧惧垎姣斿苟涓嶆槸鎵€鏈夌殑闂�棰樼殑鏈€浣宠В鍐虫柟妗堛€侰SS鐨勫�藉害鏄�鐩稿�逛簬鍖呭惈瀹冪殑鏈€杩戠殑鐖跺厓绱犵殑瀹藉害鐨勩€備絾鏄�濡傛灉浣犲氨鎯崇敤瑙嗗彛锛坴iewpoint锛夌殑瀹藉害鎴栬€呴珮搴︼紝鑰屼笉鏄�鐖跺厓绱犵殑锛岄偅璇ヨ偪涔堝姙锛� 杩欏氨鏄�聽vh聽鍜屄�vw聽鍗曚綅涓烘垜浠�鎻愪緵鐨勩€�

1vh聽绛変簬1/100鐨勮�嗗彛楂樺害銆傛牀瀛愶細娴忚�堝櫒楂樺害900px, 1聽vh聽= 900px/100 = 9 px銆傚悓鐞嗭紝濡傛灉瑙嗗彛瀹藉害鏈�750锛� 1vw聽= 750px/100 = 7.5 px銆�

鍙�浠ユ兂璞″埌鐨勶紝浠栦滑鏈夊緢澶氬緢澶氱殑鐢ㄩ€斻€傛瘮濡傦紝鎴戜滑鐢ㄥ緢绠€鍗曠殑鏂规硶鍙�鐢ㄤ竴琛孋SS浠g爜灏卞疄鐜板悓灞忓箷绛夐珮鐨勬�嗐€�

<div>

<div id=“crayon-5a31bbb7a5465313334743” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">.slide { height: 100vh; }</textarea>

</div>

</div>

鍋囪�句綘瑕佹潵涓€涓�鍜屽睆骞曞悓瀹界殑鏍囬�橈紝浣犲彧瑕佽�剧疆杩欎釜鏍囬�樼殑font-size鐨勫崟浣嶄负vm锛岄偅鏍囬�樼殑瀛椾綋澶у皬灏变細鑷�鍔ㄦ牴鎹�娴忚�堝櫒鐨勫�藉害杩涜�岀缉鏀撅紝浠ヨ揪鍒板瓧浣撳拰viewport澶у皬鍚屾�ョ殑鏁堟灉锛屾湁鏈ㄦ湁锛燂紒 瀹炰緥

vmin and vmax

vh鍜屄�vm聽渚濇嵁浜庤�嗗彛鐨勯珮搴﹀拰瀹藉害锛岀浉瀵圭殑锛�vmin聽鍜屄�vmax鍒欏叧浜庤�嗗彛楂樺害鍜屽�藉害涓よ€呯殑鏈€灏忔垨鑰呮渶澶у€笺€傛瘮濡傦紝娴忚�堝櫒鐨勫�藉害璁剧疆涓�1100px锛岄珮搴﹁�剧疆涓�700px锛屄�1vmin聽= 1px锛屄�1vmax聽= 11px銆傚�傛灉瀹藉害璁剧疆涓�800px,楂樺害璁剧疆涓�1080px,聽1vmin灏辩瓑浜�8px,聽1vmax鍒欐湭10.8px銆� 閭d箞闂�棰樻潵浜嗭紝鎴戜滑搴旇�ュ湪浠€涔堝満鏅�涓嬩娇鐢ㄨ繖涓や釜鍗曚綅鍛�锛� 鍋囪�炬湁涓€涓�鍏冪礌锛屼綘闇€瑕佽�╁畠濮嬬粓鍦ㄥ睆骞曚笂鍙�瑙併€傚彧瑕佸�瑰叾楂樺害鍜屽�藉害浣跨敤vmin鍗曚綅锛屽苟璧嬩簣鍏朵綆浜�100鐨勫€煎氨鍙�浠ュ仛鍒颁簡銆傚啀鏉ヤ釜鏍楀瓙锛屽彲浠ヨ繖鏍峰畾涔変竴涓�鑷冲皯鏈変袱涓�杈硅Е鎽稿埌灞忓箷鐨勬柟褰�锛�

<div>

<div id=“crayon-5a31bbb7a5469466244078” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">.box { height: 100vmin; width: 100vmin; }</textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

.box {

height: 100vmin;

width: 100vmin;

}

</div>

|

</div>

</div>

</div>

1

濡傛灉浣犺�佽�╄繖涓�鏂瑰舰妗嗘�嗗�嬬粓閾烘弧鏁翠釜瑙嗗彛鐨勫彲瑙佸尯鍩燂紙鍥涜竟濮嬬粓瑙︽懜鍒板睆骞曠殑鍥涜竟锛�

<div>

<div id=“crayon-5a31bbb7a546f964324215” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">.box { height: 100vmax; width: 100vmax; }</textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

.box {

height: 100vmax;

width: 100vmax;

}

</div>

|

</div>

</div>

</div>

2

缁撳悎浣跨敤杩欎簺鍗曚綅鍙�浠ヤ负鎴戜滑鎻愪緵涓€涓�鏂伴�栨湁鎰忔€濈殑鏂瑰紡鏉ョ伒娲诲湴鍒╃敤鎴戜滑瑙嗗彛鐨勫ぇ灏忋€�

ex聽and聽ch

ex聽鍜屄�ch聽鍗曚綅锛岀被浼间簬聽em聽鍜屄�rem, 渚濊禆浜庡綋鍓嶇殑瀛椾綋鍜屽瓧浣撳ぇ灏忋€� 浣嗘槸锛屼笉鍚岀殑鏄�锛岃繖涓よ揣鏄�鍩轰簬瀛椾綋鐨勫害閲忓崟浣嶏紝渚濊禆浜庤�惧畾鐨勫瓧浣撱€�

ch聽鍗曚綅閫氬父琚�瀹氫箟涓烘暟瀛�0鐨勫�藉害銆備綘鍙�浠ュ湪Eric Meyers鐨勫崥瀹�閲屾壘鍒板叧浜庡畠鐨勪竴浜涙湁鎰忔€濈殑璁ㄨ�猴紝渚嬪�傚皢涓€涓�绛夊�藉瓧浣撶殑瀛楁瘝”N”鐨勫�藉害璁剧疆涓�40ch锛岄偅涔堝湪鍙︿竴绉嶇被鍨嬬殑瀛椾綋閲屽畠鍗村彲浠ュ寘鍚�40涓�瀛楁瘝銆傝繖涓�鍗曚綅鐨勪紶缁熺敤閫斾富瑕佹槸鐩叉枃鐨勬帓鐗堬紝浣嗘槸闄ゆ�や箣澶栵紝鑲�瀹氳繕鏈夊彲浠ュ簲鐢ㄤ粬鐨勫湴鏂广€�

ex聽瀹氫箟涓哄綋鍓嶅瓧浣撶殑灏忓啓x瀛楁瘝鐨勯珮搴︽垨鑰� 1/2 鐨劼�1em銆� 寰堝�氭椂鍊欙紝瀹冩槸瀛椾綋鐨勪腑闂存爣蹇椼€�

3 x-height; the height of the lower case x

杩欎簺鍗曚綅鏈夊緢澶氱敤閫旓紝澶ч儴鍒嗙敤浜庣増寮忕殑寰�璋冦€傛瘮鏂硅�达紝sup聽鍏冪礌锛堜笂瑙掓枃瀛楁爣锛夛紝鍙�浠ラ€氳繃position:relative;bottom: 1ex;瀹炵幇 銆傜被浼肩殑鏂规硶锛屼綘鍙�浠ュ疄鐜颁竴涓�涓嬭�掓枃瀛楁爣銆傛祻瑙堝櫒榛樿�ょ殑鏂瑰紡鏄�鍒╃敤 涓婃爣鍜屼笅鏍囩壒瀹氬瀭鐩村�归綈瑙勫垯锛屼絾鏄�濡傛灉浣犳兂鏇寸粏绮掑害鏇寸簿纭�寰楁帶鍒讹紝浣犲彲浠ュ儚涓嬮潰杩欐牱鍋氾細

<div>

<div id=“crayon-5a31bbb7a5474342604106” class=“crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate” data-settings=" minimize scroll-always">

<textarea wrap=“soft” class=“crayon-plain print-no” data-settings=“dblclick” readonly="">sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex; }</textarea>

<div class=“crayon-main”>

| |

<div class=“crayon-pre”>

sup {

position: relative;

bottom: 1ex;

}

sub {

position: relative;

bottom: -1ex;

}

</div>

|

</div>

</div>

</div>

缁撹��

鎸佺画鍏虫敞涓嶆柇鍙戝睍澹�澶х殑CSS鎶€鏈�鏃犵枒鏄�寰堥噸瑕佺殑锛岃繖鏍蜂綘鎵嶈兘鎺屾彙浣犳墍鎸佹湁鐨勫伐鍏风殑鍏ㄩ儴鎶€鑳姐€傝�翠笉瀹氬皢鏉ヤ綘閬囧埌鐨勬煇涓�鐗规畩鐨勯棶棰樺氨闇€瑕佷娇鐢ㄨ繖浜涘�嶆潅鐨勫崟浣嶆潵瑙e喅銆傝姳鐐规椂闂村幓闃呰�绘柊鐨勬妧鏈�瑙勮寖锛屾敞鍐岃�㈤槄涓€浜涗笉閿欑殑缃戠珯鎴栬€呰祫婧愶紝绫讳技聽cssweekly杩欐牱鐨勩€� 褰撶劧涓嶈�佸繕璁扮幇鍦ㄥ氨鍘绘敞鍐屽儚TUTS +杩欐牱鐨勭綉绔欐潵鑾峰彇姣忓懆鐨勬洿鏂帮紝璇剧▼锛屽厤璐规暀绋嬭繕鏈夎祫婧愶紒

鎵╁睍闃呰�� More CSS unit goodness.

评论
回到顶部