CSSºÐÄ£ÐÍÏêϸ½²½â
CSS ºÐÄ£ÐÍ
¡¡¡¡ÍøÒ³Éè¼ÆÖеÄÿ¸öÔªËØ¶¼Êdz¤·½ÐεĺÐ×Ó¡£ºÐ×ӵijߴçÊÇÔõÑù¾«È·¼ÆËãµÄ£¬Çë¿´ÏÂͼ£º
¡¡¡¡
¡¡¡¡Èç¹ûÊÇ Firebug Óû§µÄ»°(»ù±¾ºÍǰ¶ËÓйصͼ»áÓõ½ Firebug °É – ÌǰéÎ÷ºìÊÁ)£¬¾Í»áºÜÊìϤÏÂÃæµÄͼ±íÁË¡£
¡¡¡¡Õâ¸öͼ±íºÜºÃµØÕ¹Ê¾ÁË×÷ÓÃÓÚÒ³ÃæÉÏÈÎÒâºÐ×ÓµÄÊýÖµ¡£
¡¡¡¡
¡¡¡¡×¢ÒâÒÔÉÏÁ½¸öÀý×ÓÖУ¬margin ¶¼Êǰ×É«µÄ¡£Margin ±È½ÏÌØ±ð£¬Ëü²»»áÓ°ÏìºÐ×Ó±¾ÉíµÄ´óС£¬µ«ÊÇËü»á
¡¡¡¡Ó°ÏìºÍºÐ×ÓÓÐ¹ØµÄÆäËûÄÚÈÝ£¬Òò´Ë margin ÊǺÐÄ£Ð͵ÄÒ»¸öÖØÒªµÄ×é³É²¿·Ö¡£
¡¡¡¡ºÐ×Ó±¾ÉíµÄ´óСÊÇÕâÑù¼ÆËãµÄ£º
¡¡¡¡¿í¶È = ×ÔÉí¿í¶È+×óÄڱ߾à+ÓÒÄڱ߾à+×ó±ß¿ò+Óұ߿ò
¡¡¡¡¸ß¶È = ×ÔÉí¸ß¶È+ÉÏÄڱ߾à+ÏÂÄڱ߾à+Éϱ߿ò+ϱ߿ò
¡¡¡¡ÖµÎ´ÉùÃ÷µÄÇé¿ö
¡¡¡¡Èç¹ûδÉùÃ÷ padding »òÕß border£¬ÄÇËûÃÇ»òÕßֵΪÁã(ʹÓà css reset ʱ)£¬»òÕßΪä¯ÀÀÆ÷µÄĬÈÏÖµ(ºÜ¿ÉÄܲ»ÊÇÁ㣬ÓÈÆäÊÇÄÇЩͨ³£Ã»ÓÐÖØÖÃµÄ±íµ¥ÔªËØ)
¡¡¡¡¿é¼¶ºÐµÄĬÈÏ¿í¶È
¡¡¡¡Èç¹ûδÉùÃ÷¿í¶È£¬²¢ÇÒºÐ×ÓÊǾ²Ì¬»òÕßÏà¶Ô¶¨Î»µÄ£¬¿í¶È»á±£³Ö 100%µÄ ¿í¶È£¬padding ºÍ border »áÏòÄÚÍÆ¶¯£¬¶ø²»ÊÇÏòÍâÀ©Õ¹¡£
¡¡¡¡µ«ÊÇ£¬Èç¹ûÃ÷È·ÉèÖúÐ×ӵĿí¶ÈΪ 100%£¬ÄÇô padding ¾Í»áÏòÍâÑÓÕ¹¡£
¡¡¡¡
¡¡¡¡The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.
¡¡¡¡Òª×¢ÒâµÄÊÇ£¬ºÐ×ÓµÄĬÈÏ¿í¶È²¢²»ÕæµÄÊÇ 100%£¬¶øÊÇʣϵĿÉÄÜÖµ(Ó¦¸ÃÊÇ˵£¬Ê£ÓàÕæÊµ´æÔڵĿí¶È - ÌǰéÎ÷ºìÊÁ)¡£Ó¦¸ÃÁ˽âÕâ¸öÌØÊâÖµ£¬ÒòΪºÜ¶àÇé¿öÏ£¬Ëü¶ÔÓÚÉèÖÃ/²»ÉèÖÿí¶È¶¼ÊǷdz£ÓÐÓõġ£
¡¡¡¡ÎÒÓöµ½µÄ×î´óµÄÂé·³¾ÍÊÇ textarea(Îı¾¿ò) ÔªËØÁË£¬ËüÃÇÐèÒªÉèΪ¿í¶ÈΪËùÐèµÄ”cols”ÊôÐÔ£¬²¢ÇÒ²»Äܰüº¬×ÓÔªËØ¡£Òò´Ëͨ³£ÐèÒªÃ÷È·µÄÉèÖà textarea µÄ¿í¶ÈΪ 100%£¬µ«ÓÐ padding ʱ£¬¾Í»áÑÓÕ¹ textarea µÄ¿í¶È¡£¹Ì¶¨¿í¶È»·¾³Ï£¬Í¨³£¿ÉÒÔÉèÖÃΪºÏÊʵÄÏñËØÖµ¿í¶È£¬µ«ÊDZä¿íÇé¿ö¾ÍûÄÇôÐÒÔËÁË¡£
http://www.csswang.com/css/61.html
Ïà¹ØÎĵµ£º
ʲôÇé¿öÏ»á³öÏÖ»»ÐУº
µ±ÔªËØÉèÖÃÁ˹̶¨¸ß¶È£¬²¢ÇÒÎı¾³¤¶È´óÓÚ±êÇ©ÔªËØµÄ¿í¶Èʱ£¬Îı¾»á×Ô¶¯»»ÐС£
cssÇ¿ÖÆ»»ÐÐʹÓÃÑùʽ£ºwhite-space:nowrap;¸ÃÑùʽ´ÓЧ¹ûÉÏÊÇûÓÐä¯ÀÀÆ÷²îÒ죬ʹÓøÃÑùʽºóËùÓÐÎÄ×ÖÔÚieºÍfirefox϶¼ÔÚÒ»ÐÐÄÚÏÔʾ¡£µ«ÊÇÔÚIEÏÂʹÓøÃÊôÐÔÖµºó±êÇ©ÔªËØ¿í¶È»á±»³Å´ó£¬´Ó¶ø¿ÉÄܵ¼ÖÂÔÀ´Ò³Ãæ²¼¾Ö±»ÆÆ»µ¡£
......
ÔÚtable ÖпØÖƵ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÒªÓõ½cellspacing¡¢cellpadding£¬Ä¬ÈÏÇé¿öcellspacing¡¢cellpadding¾ù²»Îª0£¬µ«¾³£µÄ×´¿öΪÁ˲»ÈÃtableµ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÓ°Ïìµ½ÃÀ¹Û£¬ÎÒÃǾ³£»á°Ñcellspacing¡¢cellpaddingÉèÖÃΪ0£¬Òò´Ë¾³£¿´µ½“< table cellspacing=0 cellpadding=0>”ÕâÑùµÄ´úÂë¡£ÕâÑù×öÎÞÐÎÖÐÔö¼ÓÁË´ ......
CSS£¬²ãµþÑùʽ±íµÄ×÷ÓÃÊÇʲô£¿ÎÒÃÇÏÈͨ¹ýÒ»¸öÀý×ÓÀ´Ìå»áһϣº
¿´´úÂ룺
index.html
<!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=" ......
/*¿ØÖÆÍ¼Æ¬µÄ´óС*/
.contentimg{
max-width:600px;
/*max-height:100px;*/
}
*html.contentimg{
width:expression(this.width>50&&this.width>this.height?60:auto);
/*height:expresion(this.height>50?50:auto);
*/
}
µ÷ÓÃ
$("#"+id.substring(0,id.length-5)+"arCon"). ......
¿´µ½ÎÊ´ËÎÊÌâµÄºÜ¶à£¬ËùÒÔ»¨µãʱ¼äÕûÀíÏ£¬»¶Ó´ó¼ÒÌáÒâ¼û£¬×ö²¹³äÐ޸ģ¬Ð»Ð»£¡
/*lesliezmzÕûÀíµÄ·½·¨ 2010-01-19*/
µ±writing-modeΪtb-rl ʱ£¬ÎĵµÁ÷ÊÇ´ÓÉϵ½Ï£¬´ÓÓÒµ½×óÊéд¡£È»ºóÉèÖÃtext-align: center¾Í¿ÉÒÔʵÏÖ´¹Ö±·½ÏòÉϵľÓÖС£ËãÊÇÒ»¸öС¼¼Çɰɡ£
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ......