ÏêÊö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 ºÐÄ£ÐÍ
¡¡¡¡ÍøÒ³Éè¼ÆÖеÄÿ¸öÔªËØ¶¼Êdz¤·½ÐεĺÐ×Ó¡£ºÐ×ӵijߴçÊÇÔõÑù¾«È·¼ÆËãµÄ£¬Çë¿´ÏÂͼ£º
¡¡¡¡
¡¡¡¡Èç¹ûÊÇ Firebug Óû§µÄ»°(»ù±¾ºÍǰ¶ËÓйصͼ»áÓõ½ Firebug °É – ÌǰéÎ÷ºìÊÁ)£¬¾Í»áºÜÊìϤÏÂÃæµÄͼ±íÁË¡£
¡¡¡¡Õâ¸öͼ±íºÜºÃµØÕ¹Ê¾ÁË×÷ÓÃÓÚÒ³ÃæÉÏÈÎÒâºÐ×ÓµÄÊýÖµ¡£
¡¡¡¡
¡¡¡¡×¢ÒâÒÔÉÏÁ½¸öÀý×ÓÖУ¬margi ......
CSSµÄÓÅ»¯Í¨³£°üÀ¨Á½·½Ãæ: ¸ñʽ»¯CSSºÍ¾«¼òCSS
¡£
¾«¼òCSSµÄ°ì·¨ÊǰѾßÓÐÏàͬÊôÐÔµÄÔªËØºÏ²¢ÔÚÒ»Æð£¬µ«Õâ»á½µµÍ´úÂëµÄ¿É¶ÁÐÔ£¬Ê¹´úÂëµÄºóÆÚά»¤ºÜÂé·³£¬ÉÔ²»×¢Òâ¾Í³ö´í¡£
¸ñʽ»¯CSSÒ»°ã¾ÍÊǶàÐÐģʽ»òµ¥ÐÐģʽµÄÑ¡Ôñ£¬±ÈÈçÎÒ¸öÈ˾ÍÍêÈ«Êܲ»Á˶àÐÐģʽ
ÏÂÃæÊÇһЩÔÚÏßµÄCSSÓÅ»¯¹¤¾ß£¬ÄÜÈÃÄã·½±ãµÄ¶ÔCSSÎļþ½ ......
css»ñÈ¡Ò³ÃæÖÐÐÄλÖÃ
.fixed
{
FONT-SIZE: 30pt;
color : #1A6841;
left:expression(eval(document.body.clientWidth)/2-150);
top:expression(eval(document.body.clientHeight)/2-25);
width:300px;
height:50px;
border:green 1px solid;
background:#99CCFF;
+position:absolute;
+left:expression(ev ......
1¡¢IE·Ö²»Çå¼Ì³Ð¹ØÏµºÍ¸¸×Ó¹ØÏµµÄ²î±ð£¬È«²¿¶¼ÊǼ̳йØÏµ¡£
2¡¢ÔÚ¸øÄãµÄ±êÇ©·è¿ñ¼ÓÑ¡Ôñ·ûµÄʱºò£¬±ðÍüÁËÔÚCSSÀï¸øÑ¡Ôñ·û¼ÓÉÏ×¢ÊÍ¡£µÈÄãÒÔºóÐÞ¸ÄÄãµÄCSSµÄʱºò¾ÍÖªµÀΪʲôҪÕâô×öÁË¡£ÁíÍâÌáÐÑÄú£¬²»ÒªÌ«·è¿ñÁË¡£
3¡¢Èç¹ûÄã¸øÒ»¸ö±êÇ©ÉèÖÃÁËÒ»¸öÉîÉ«µ÷µÄ±³¾°Í¼Æ¬ºÍÁÁÉ«µ÷µÄÎÄ×ÖЧ¹û¡£½¨ÒéÕâ¸öʱºò¸øÄãµÄ±êÇ©ÔÙÉèÖÃÒ»¸öÉîÉ ......
1.»ù±¾Óï·¨£º
Ñ¡Ôñ·ûÃû×Ö { ÉùÃ÷; }
Ñ¡Ôñ·ûÃû×ÖÃüÃû¹æÔò£º
CSSÑ¡Ôñ·û¿ÉÒÔʹÓÃÓ¢ÎÄ×ÖĸµÄ´óдÓëСд,Êý×Ö,Á¬×ÖºÅ,Ï»®Ïß,ðºÅ,¾äºÅ.
2.·ÖÀࣺ
ÔÚAndy BuddµÄ¡¶CSS MASTERY¡·£¨ÖÐÒë¡¶¾«Í¨CSS¡·£©ÖУ¬½«CSSÑ¡Ôñ·û·ÖΪ£º³£ÓÃÑ¡Ôñ·û¡¢Í¨ÓÃÑ¡Ôñ·ûºÍ¸ß¼¶Ñ¡Ôñ·û¡£³£ÓÃÑ¡Ôñ·û°üÀ¨£ºÀàÐÍÑ¡Ôñ·û¡¢ÀàÑ¡Ôñ·û¡¢IDÑ¡Ôñ·û¡¢ºó´ ......