Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

ѧϰ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


Ïà¹ØÎĵµ£º

CSSÖÐ10¼þÄãÐèÒªÖªµÀµÄÊÂ


1.  CSSµÄÒªµãÊÇÔÚÄãµÄÒ³ÃæÖÐʹÓüò½àµÄHTML´úÂë,È»ºó±àдCSS"¿ØÖƹæÔò"À´Ñùʽ»¯Ò³ÃæÖеĶÔÏó.Ò³Ãæ±£³ÖÇåÎúÓÐÌõ²»ÎÉ¿´ÉÏÈ¥·Ç³£°ô.ÕâÑùÄãµÄHtmlÒ³Ãæ¿ÉÒÔÔÚÒÆ¶¯É豸ºÍ±ê×¼ä¯ÀÀÆ÷ÖÐÔËÐÐ.Õâ¾ÍÊÇCSSµÄÒªµã.
²»¹ýCSSµÄÒÕÊõÔÚÓÚÄܹ»ÀûÓÃCSS¿ØÖƹæÔò¿ìËÙÓÐЧµØ²Ù×ÝÒ³Ãæ¶ÔÏó.°ÑCSS¹æÔòÓëHTML±ê¼ÇÆ¥ÅäÆðÀ´µÄ²Ù×ö¾ÍºÃÏñÊÇÒ»ÖÖ¶ ......

¸÷ÖÖCSS bugÓë¼¼ÇÉ


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= ......

ÓÃjs¸Ä±äcssÑùʽ

<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 ......

×Ô¶¨ÒåCSDN BlogµÄCSSÑùʽ

Ô­ÎÄ´«ËÍÃÅ£º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 ......

CSS¶ÔIE6¡¢IE7¡¢IE8Ö§³ÖÏêϸµÄÒ×ÓõIJο¼

來Ô´£º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%µÄÊг¡ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ