ÏêÊöCSSÖе¥Î»pxºÍemµÄÇø±ð
¹úÄÚµÄÉè¼Æʦ´ó¶¼Ï²»¶ÓÃpx£¬¶ø¹úÍâµÄÍøÕ¾´ó¶¼Ï²»¶ÓÃem£¬ÄÇôÁ½ÕßÓÐʲôÇø±ð£¬ÓÖ¸÷×ÔÓÐʲôÓÅÁÓÄØ£¿
1¡¢IEÎÞ·¨µ÷ÕûÄÇЩʹÓÃpx×÷Ϊµ¥Î»µÄ×ÖÌå´óС£»
2¡¢¹úÍâµÄ´ó²¿·ÖÍøÕ¾Äܹ»µ÷ÕûµÄÔÒòÔÚÓÚÆäʹÓÃÁËem×÷Ϊ×ÖÌ嵥λ£»
3¡¢FirefoxÄܹ»µ÷ÕûpxºÍem£¬µ«ÊÇ96%ÒÔÉϵÄÖйúÍøÃñʹÓÃIEä¯ÀÀÆ÷£¨»òÄںˣ©¡£
pxÏñËØ£¨Pixel£©£¬Ïà¶Ô³¤¶Èµ¥Î»¡£ÏñËØpxÊÇÏà¶ÔÓÚÏÔʾÆ÷ÆÁÄ»·Ö±æÂʶøÑԵġ££¨Òý×ÔCSS2.0Êֲᣩ
emÊÇÏà¶Ô³¤¶Èµ¥Î»¡£Ïà¶ÔÓÚµ±Ç°¶ÔÏóÄÚÎı¾µÄ×ÖÌå³ß´ç¡£È統ǰ¶ÔÐÐÄÚÎı¾µÄ×ÖÌå³ß´çδ±»ÈËΪÉèÖã¬ÔòÏà¶ÔÓÚä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå³ß´ç¡££¨Òý×ÔCSS2.0Êֲᣩ
ÈÎÒâä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå¸ß¶¼ÊÇ16px¡£ËùÓÐδ¾µ÷ÕûµÄä¯ÀÀÆ÷¶¼·ûºÏ£º1em=16px¡£ÄÇô12px=0.75em£¬10px=0.625em¡£ÎªÁ˼ò»¯font-sizeµÄ»»Ë㣬ÐèÒªÔÚCSSÖеÄbodyÑ¡ÔñÆ÷ÖÐÉùÃ÷ Font-size=62.5%£¬Õâ¾ÍʹemÖµ±äΪ 16px*62.5%=10px£¬ÕâÑù12px=1.2em£¬10px=1em£¬Ò²¾ÍÊÇ˵ֻÐèÒª½«ÄãµÄÔÀ´µÄpxÊýÖµ³ýÒÔ10£¬È»ºó»»ÉÏem×÷Ϊµ¥Î»¾ÍÐÐÁË¡£
emÓÐÈçÏÂÌص㣺
1¡¢emµÄÖµ²¢²»Êǹ̶¨µÄ£»
2¡¢em»á¼Ì³Ð¸¸¼¶ÔªËصÄ×ÖÌå´óС¡£
ËùÒÔÎÒÃÇÔÚдCSSµÄʱºò£¬ÐèҪעÒâÁ½µã£º
1¡¢bodyÑ¡ÔñÆ÷ÖÐÉùÃ÷Font-size=62.5%£»
2¡¢½«ÄãµÄÔÀ´µÄpxÊýÖµ³ýÒÔ10£¬È»ºó»»ÉÏem×÷Ϊµ¥Î»£»
3¡¢ÖØмÆËãÄÇЩ±»·Å´óµÄ×ÖÌåµÄemÊýÖµ¡£±ÜÃâ×ÖÌå´óСµÄÖظ´ÉùÃ÷¡£
Ò²¾ÍÊDZÜÃâ1.2 * 1.2 = 1.44µÄÏÖÏó¡£±ÈÈç˵ÄãÔÚ#contentÖÐÉùÃ÷ÁË×ÖÌå´óСΪ1.2em£¬ÄÇôÔÚÉùÃ÷pµÄ×ÖÌå´óСʱ¾ÍÖ»ÄÜÊÇ1em£¬¶ø²»ÊÇ1.2em£¬ÒòΪ´Ëem·Ç±Ëem£¬ËüÒò¼Ì³Ð#contentµÄ×ÖÌå¸ß¶ø±äΪÁË1em=12px¡£
µ«ÊÇ12pxºº×ÖÀýÍ⣬¾ÍÊÇÓÉÒÔÉÏ·½·¨µÃµ½µÄ12px£¨1.2em£©´óСµÄºº×ÖÔÚIEÖв¢²»µÈÓÚÖ±½ÓÓÃ12px¶¨ÒåµÄ×ÖÌå´óС£¬¶øÊÇÉÔ´óÒ»µã¡£Õâ¸öÎÊÌâJoruxÒѾ½â¾ö£¬Ö»ÐèÔÚbodyÑ¡ÔñÆ÷ÖаÑ62.5%»»³É63%¾ÍÄÜÕý³£ÏÔʾÁË¡£ÔÒò¿ÉÄÜÊÇIE´¦Àíºº×Öʱ£¬¶ÔÓÚ¸¡µãµÄÈ¡Öµ¾«È·¶ÈÓÐÏÞ¡£²»ÖªµÀÓÐûÓÐÆäËûµÄ½âÊÍ¡£
Ïà¹ØÎĵµ£º
CSSµÄÓÅ»¯Í¨³£°üÀ¨Á½·½Ãæ: ¸ñʽ»¯CSSºÍ¾«¼òCSS
¡£
¾«¼òCSSµÄ°ì·¨ÊǰѾßÓÐÏàͬÊôÐÔµÄÔªËغϲ¢ÔÚÒ»Æ𣬵«Õâ»á½µµÍ´úÂëµÄ¿É¶ÁÐÔ£¬Ê¹´úÂëµÄºóÆÚά»¤ºÜÂé·³£¬ÉÔ²»×¢Òâ¾Í³ö´í¡£
¸ñʽ»¯CSSÒ»°ã¾ÍÊǶàÐÐģʽ»òµ¥ÐÐģʽµÄÑ¡Ôñ£¬±ÈÈçÎÒ¸öÈ˾ÍÍêÈ«Êܲ»Á˶àÐÐģʽ
ÏÂÃæÊÇһЩÔÚÏßµÄCSSÓÅ»¯¹¤¾ß£¬ÄÜÈÃÄã·½±ãµÄ¶ÔCSSÎļþ½ ......
1¡¢IE·Ö²»Çå¼Ì³Ð¹ØϵºÍ¸¸×Ó¹ØϵµÄ²î±ð£¬È«²¿¶¼ÊǼ̳йØϵ¡£
2¡¢ÔÚ¸øÄãµÄ±êÇ©·è¿ñ¼ÓÑ¡Ôñ·ûµÄʱºò£¬±ðÍüÁËÔÚCSSÀï¸øÑ¡Ôñ·û¼ÓÉÏ×¢ÊÍ¡£µÈÄãÒÔºóÐÞ¸ÄÄãµÄCSSµÄʱºò¾ÍÖªµÀΪʲôҪÕâô×öÁË¡£ÁíÍâÌáÐÑÄú£¬²»ÒªÌ«·è¿ñÁË¡£
3¡¢Èç¹ûÄã¸øÒ»¸ö±êÇ©ÉèÖÃÁËÒ»¸öÉîÉ«µ÷µÄ±³¾°Í¼Æ¬ºÍÁÁÉ«µ÷µÄÎÄ×ÖЧ¹û¡£½¨ÒéÕâ¸öʱºò¸øÄãµÄ±êÇ©ÔÙÉèÖÃÒ»¸öÉîÉ ......
1.»ù±¾Óï·¨£º
Ñ¡Ôñ·ûÃû×Ö { ÉùÃ÷; }
Ñ¡Ôñ·ûÃû×ÖÃüÃû¹æÔò£º
CSSÑ¡Ôñ·û¿ÉÒÔʹÓÃÓ¢ÎÄ×ÖĸµÄ´óдÓëСд,Êý×Ö,Á¬×ÖºÅ,Ï»®Ïß,ðºÅ,¾äºÅ.
2.·ÖÀࣺ
ÔÚAndy BuddµÄ¡¶CSS MASTERY¡·£¨ÖÐÒ롶¾«Í¨CSS¡·£©ÖУ¬½«CSSÑ¡Ôñ·û·ÖΪ£º³£ÓÃÑ¡Ôñ·û¡¢Í¨ÓÃÑ¡Ôñ·ûºÍ¸ß¼¶Ñ¡Ôñ·û¡£³£ÓÃÑ¡Ôñ·û°üÀ¨£ºÀàÐÍÑ¡Ôñ·û¡¢ÀàÑ¡Ôñ·û¡¢IDÑ¡Ôñ·û¡¢ºó´ ......
×¢Ã÷£ºÈç¹ûÒªÏëÒªÔÚIE6ÎÞÏÞ¼¶µÄ»°ÐèҪд¶àһЩJS£¬ÆäËûÓÎÀÀÆ÷¶¼¿ÉÒÔʹÓÃͬ¶Îjs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equ ......
text-align ˮƽ¶ÔÆë right left center
vertical-align ´¹Ö±¶ÔÆë top middle bottom
ÊôÐÔ£º
AbsBottom ͼÏñµÄϱßÔµÓëͬһÐÐÖÐ×î´óÔªËصÄϱßÔµ¶ÔÆë¡£
AbsMiddle ͼÏñµÄÖмäÓëͬһÐÐÖÐ×î´óÔªËصÄÖмä¶ÔÆë¡£
Baseline ͼÏñµÄϱßÔµÓëµÚÒ»ÐÐÎı¾µÄϱßÔµ¶ÔÆë¡£
Bottom ͼÏñµÄϱßÔµÓëµÚÒ»ÐÐÎı¾µÄϱ ......