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
Ïà¹ØÎĵµ£º
1.css ×ÖÌå¼òд¹æÔò
¡¡¡¡µ±Ê¹ÓÃcss¶¨Òå×ÖÌåʱÄã¿ÉÄÜ»áÕâÑù×ö:
¡¡¡¡font-size: 1em;
¡¡¡¡line-height: 1.5em;
¡¡¡¡font-weight: bold;
¡¡¡¡font-style: italic;
¡¡¡¡font-variant: small-caps;
¡¡¡¡font-family: verdana,serif;
¡¡¡¡
ÊÂʵÉÏÄã¿ÉÒÔ¼òдÕâЩÊôÐÔ:
¡¡¡¡font: 1em/1.5em bold italic small-caps ver ......
ÈËÒ»µ©Ï°¹ßÁËijЩ¶«Î÷¾ÍºÜÄÑÈ¥¸Ä£¬ÒÔ¼°¸÷ÖÖ¸÷ÑùµÄÔÒò£¬ÐµÄä¯ÀÀÆ÷Ô½À´Ô½¶à£¬¶øÀϵÄ×ÜÌÔ̲»ÁË¡£Ôö³¤×ÜÊÇ¿ìÓÚÏûÍöµ¼ÖÂÁËä¯ÀÀÆ÷¼æÈÝÊdzÉÁË̸²»ÍêµÄ»°Ì⡣˵µ½ä¯ÀÀÆ÷¼æÈÝ£¬CSS HACK×ÔÈ»¶øÈ»µØ±»ÎÒÃÇÏëÆð¡£½ñÌ죬ÎÒÃÇͨ³£¶¼ÓÐÒ»¸öÍŶӻòÕß½«ÓÐÒ»¸öÍŶӵÄÈËÔÚÒ»¸ö¹«Ë¾ÀïÃæ×öÏàͬµÄÊ£¬ÐèÒªÎÒÃÇÓÐͳһµÄ¹æ·¶À´½øÐÐCoding£¬ÒÔ·½ ......
ÔÚtable ÖпØÖƵ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÒªÓõ½cellspacing¡¢cellpadding£¬Ä¬ÈÏÇé¿öcellspacing¡¢cellpadding¾ù²»Îª0£¬µ«¾³£µÄ×´¿öΪÁ˲»ÈÃtableµ¥Ôª¸ñÖ®¼äµÄ¼ä¾àÓ°Ïìµ½ÃÀ¹Û£¬ÎÒÃǾ³£»á°Ñcellspacing¡¢cellpaddingÉèÖÃΪ0£¬Òò´Ë¾³£¿´µ½“< table cellspacing=0 cellpadding=0>”ÕâÑùµÄ´úÂë¡£ÕâÑù×öÎÞÐÎÖÐÔö¼ÓÁË´ ......
ÓÃfloatʱ·¢ÏÖmargin²»Æð×÷Óã¬Í¼Æ¬ºÍÎÄ×Ö²¢ÅÅʱÀÏÊDz»ÄÜ¶ÔÆë£¬ÓÚÊÇËѵ½ÁËÕâÆªÎÄÕ¡£ -------------------------------------------------------------------------------------------------------------------- Ô´´ÎÄÕ£¬×ªÔØÇë×¢Ã÷À´×ÔÕÅöÎÐñ-öοռä-öÎÉú»î[http://www.zhangxinxu.com] ±¾ÎĵØÖ·£ºhttp://www.zhangxi ......