ѧϰCSSÁ˽ⵥλemºÍpxµÄÇø±ð
ÔÚ¹úÄÚÍøÕ¾ÖУ¬°üÀ¨Èý´óÃÅ»§£¬ÒÔ¼°“ÒýÁì”ÖйúÍøÕ¾Éè¼Æ³±Á÷µÄÀ¶É«ÀíÏ룬ChinaUIµÈ¶¼ÊÇʹÓÃÁËpx×÷Ϊ×ÖÌ嵥λ¡£Ö»ÓаٶȺôõ×öÁ˸ö¿Éµ÷µÄ±íÂÊ¡£¶øÔÚ´óÑó±Ë°¶£¬¼¸ºõËùÓеÄÖ÷Á÷Õ¾µã¶¼Ê¹ÓÃem×÷Ϊ×ÖÌ嵥룬Ҳ¾ÍÊǿɵ÷µÄ¡£Ã»´í£¬px±Èem¸ü¼ÓÈÝÒ×ʹÓ㬴󲿷ֶÁÕß²»ÖªµÀemΪºÎÎï»òÕßËüÏ൱ÓÚ¶àÉÙpx¡£¹úÍâÈËÊ¿Èç´ËÖØÊÓÍøÕ¾Ò×ÓÃÐÔ(Accessibility)£¬²»½öÒòΪÆä¸ùÉúµÙ¹ÌµÄÈËÎľ«Éñ£¬Ö±½ÓÔÒò¿ÉÄÜÊÇÒòΪÓÐÒ»²¿·¨ÂÉÀ´Ô¼ÊøËûÃÇ—ÀýÈçÃÀ¹úµÄSection 508£¬Ç¿ÖÆÍøÕ¾´ïµ½Ò»¶¨µÄÒ×ÓÃÐÔ¡£
¹Ø¼üµã£º
¡¡¡¡1. IEÎÞ·¨µ÷ÕûÄÇЩʹÓÃpx×÷Ϊµ¥Î»µÄ×ÖÌå´óС;
¡¡¡¡2. ¹úÍâµÄ´ó²¿·ÖÍøÕ¾Äܹ»µ÷ÕûµÄÔÒòÔÚÓÚÆäʹÓÃÁËem×÷Ϊ×ÖÌ嵥λ;
¡¡¡¡3. FirefoxÄܹ»µ÷ÕûpxºÍem£¬µ«ÊÇ96%ÒÔÉϵÄÖйúÍøÃñʹÓÃIEä¯ÀÀÆ÷(»òÄÚºË)¡£
¡¡¡¡pxÏñËØ(Pixel)¡£Ïà¶Ô³¤¶Èµ¥Î»¡£ÏñËØpxÊÇÏà¶ÔÓÚÏÔʾÆ÷ÆÁÄ»·Ö±æÂʶøÑԵġ£
¡¡¡¡emÊÇÏà¶Ô³¤¶Èµ¥Î»¡£Ïà¶ÔÓÚµ±Ç°¶ÔÏóÄÚÎı¾µÄ×ÖÌå³ß´ç¡£È統ǰ¶ÔÐÐÄÚÎı¾µÄ×ÖÌå³ß´çδ±»ÈËΪÉèÖã¬ÔòÏà¶ÔÓÚä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå³ß´ç¡£
¡¡¡¡ÈÎÒâä¯ÀÀÆ÷µÄĬÈÏ×ÖÌå¸ß¶¼ÊÇ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´¦Àíºº×Öʱ£¬¶ÔÓÚ¸¡µãµÄȡֵ¾«È·¶ÈÓÐÏÞ¡£²»ÖªµÀÓÐûÓÐÆäËûµÄ½âÊÍ¡£
×ÊÁÏÒýÓÃ:http://www.knowsky.com/348005.html
Ïà¹ØÎĵµ£º
1. CSSµÄÒªµãÊÇÔÚÄãµÄÒ³ÃæÖÐʹÓüò½àµÄHTML´úÂë,È»ºó±àдCSS"¿ØÖƹæÔò"À´Ñùʽ»¯Ò³ÃæÖеĶÔÏó.Ò³Ãæ±£³ÖÇåÎúÓÐÌõ²»ÎÉ¿´ÉÏÈ¥·Ç³£°ô.ÕâÑùÄãµÄHtmlÒ³Ãæ¿ÉÒÔÔÚÒÆ¶¯É豸ºÍ±ê×¼ä¯ÀÀÆ÷ÖÐÔËÐÐ.Õâ¾ÍÊÇCSSµÄÒªµã.
²»¹ýCSSµÄÒÕÊõÔÚÓÚÄܹ»ÀûÓÃCSS¿ØÖƹæÔò¿ìËÙÓÐЧµØ²Ù×ÝÒ³Ãæ¶ÔÏó.°ÑCSS¹æÔòÓëHTML±ê¼ÇÆ¥ÅäÆðÀ´µÄ²Ù×ö¾ÍºÃÏñÊÇÒ»ÖÖ¶ ......
1¡¢ÈÝÆ÷²»À©Õ¹ÎÊÌâ
Õâ¸öÊǾ³£ÔÚÎÒÇÐͼµÄʱºòÓöµ½µÄÎÊÌ⣬È磺
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content= ......
<style>
.a
{
background-color:#000000;
}
.b
{
background-color:#ffffff;
}
</style>
<ul>
<li id="aaa1" onclick="setClassName(this,'a')"> <a href="#">aaaa</a> </li>
<li id="aaa2" onclick="setClassName(this,'a')"> <a href="#"&g ......
ÔÎÄ´«ËÍÃÅ£ºhttp://blog.csdn.net/dux003/archive/2009/11/08/4786371.aspx
csdn blog css×Ô¶¨ÒåÉèÖÃ
¿ÉÒÔÔÚ²©¿ÍµÄÅäÖÃÒ³ÃæµÄ×Ô¶¨ÒåcssÀ¸ÖÐÌîÈëcssÑùʽ´úÂëÀ´×Ô¶¨Ò²blogµÄ·ç¸ñ
csdn blogµÄÒ³Ãæ¼Ü¹¹»ù±¾ÊÇÓÉdivʵÏֵģ¬Õû¸öÒ³ÃæÖ÷ÒªÓÉÈý¸ödiv×é³É£¬ËüÃǵÄid·Ö±ðÊÇ:
csdnblog_header, csdnblog_sidebar, csdnblog_conten ......
來Ô´£ºhttp://www.webjx.com/css/divcss-17091.html
ÖÐÎÄÔÎÄ£ºCSSÔÚInternet Explorer 6, 7 ºÍ8ÖеIJî±ð
Òë×Ô£ºCSS Differences in Internet Explorer 6, 7 and 8
¹ØÓÚä¯ÀÀÆ÷µÄ×îÀëÆæµÄͳ¼Æ½á¹ûÖ®Ò»¾ÍÊÇInternet Explorer
°æ±¾6£¬7ºÍ8¹²´æ¡£½ØÖÁ±¾ÎÄ£¬Internet Explorer¸÷¸ö°æ±¾×ܹ²Õ¼¾ÝÁË´óÔ¼65%µÄÊг¡ ......