±¾ÎĽ«½²ÊöHTMLºÍCSSµÄ¹Ø¼ü—ºÐ×ÓÄ£ÐÍ(Box model). Àí½âBox modelµÄ¹Ø¼ü±ãÊÇmarginºÍpaddingÊôÐÔ, ¶øÕýÈ·Àí½âÕâÁ½¸öÊôÐÔÒ²ÊÇѧϰÓÃcss²¼¾ÖµÄ¹Ø¼ü.
×¢: Ϊʲô²»·ÒëmarginºÍpadding? ÔÒòÒ», ÔÚººÓïÖв¢Ã»ÓÐÓëÖ®Ïà¶ÔÓ¦µÄ´ÊÓï; ÔÒò¶þ: ¼´Ê¹ÓÐÕâÑùµÄ´ÊÓï, ÓÉÓÚÔÚ±àдcss´úÂëʱ, ±ØÐëʹÓÃmarginºÍpadding, Èç¹ûÎÒÃÇ×ÜÓúºÓï´ÊÓï´úÌæÆäÀ´½âÊ͵Ļ°, µ½ÁËʵ¼ÊÓ¦ÓÃʱÈÝÒ×»ìÏýmarginºÍpaddingµÄ¸ÅÄî.
Èç¹ûÓÐÒ»µãHtml»ù´¡µÄ»°, ¾ÍÓ¦¸ÃÁ˽âһЩ»ù±¾ÔªËØ(Element), Èçp, h1~h6, br, div, li, ul, imgµÈ. Èç¹û½«ÕâЩԪËØϸ·Ö, ÓÖ¿ÉÒÔ·Ö±ð¹éΪ¶¥¼¶(top-level)ÔªËØ,¿é¼¶(block-level)ÔªËغÍÄÚÁª(inline)ÔªËØ.
1. Block-level element: Ö¸Äܹ»¶ÀÁ¢´æÔÚ, Ò»°ãµÄ¿é¼¶ÔªËØÖ®¼äÒÔ»»ÐÐ(ÈçÒ»¸ö¶ÎÂä½áÊøºóÁíÆðÒ»ÐÐ)·Ö¸ô. ³£ÓõĿ鼶ԪËØ°üÀ¨: p, h1~h6, div, ulµÈ;
2. Inline element: Ö¸ÒÀ¸½ÆäËû¿é¼¶ÔªËØ´æÔÚ, ½ô½ÓÓÚ±»ÁªÔªËØÖ®¼äÏÔʾ, ¶ø²»»»ÐÐ. ³£ÓõÄÄÚÁªÔªËØ°üÀ¨: img, span, li, brµÈ;
3. Top-level element: °üÀ¨html, body, frameset, ±íÏÖÈçBlock-level element, ÊôÓڸ߼¶¿é¼¶ÔªËØ.
¿é¼¶ÔªËØÊǹ¹³ÉÒ»¸öhtmlµÄÖ÷ÒªºÍ¹Ø¼üÔªËØ, ¶øÈÎÒâÒ»¸ö¿é¼¶ÔªËؾù¿ÉÒÔÓÃBox modelÀ´½âÊÍ˵Ã÷.
Box Model: ÈÎÒâÒ»¸ö¿é¼¶ÔªËؾùÓÉcontent(ÄÚÈÝ), padding, background(°üÀ¨±³¾°ÑÕÉ«ºÍͼƬ), border(±ß¿ò), marginÎå¸ö²¿·Ö×é³É. Á¢ÌåͼÈçÏÂ(pj. 1):
À´ÃæͼÈçPJ2:
¸ÃÁ¢ÌåͼÒý×Ô:http://www.hicksdesign.co.uk/ (Under the Creative Commons License)
¸ù¾ÝÒÔÉÏÁ½Í¼, ÏàÐÅ´ó¼Ò¶ÔÓÚBox model»áÓиöÖ±¹ÛµÄÈÏʶ.
ÒÔÏÂ˵Ã÷marginºÍpaddingÊôÐÔ:
1. Margin: °üÀ¨margin-top, margin-right, margin-bottom, margin-left, ¿ØÖƿ鼶ԪËØÖ®¼äµÄ¾àÀë, ËüÃÇÊÇ͸Ã÷²»¿É¼ûµÄ, ¶ÔÓÚFig. 2ËùʾµÄÉÏÓÒÏÂ×ómarginÖµ¾ùΪ40px, Òò´Ë´úÂëΪ:
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
¸ù¾ÝÉÏ, ÓÒ, ÏÂ, ×óµÄ˳ʱÕë¹æÔò, ¼òдΪ
margin: 40px 40px 40px 40px;
Ϊ±ãÓÚ¼ÇÒä, Çë²Î¿¼ÏÂͼ:
µ±ÉÏÏÂ, ×óÓÒmarginÖµ·Ö±ðÒ»ÖÂ, ¿É¼òдΪ:
margin: 40px 40px;
Ç°Ò»¸ö40px´ú±íÉÏÏÂmarginÖµ, ºóÒ»¸ö40px´ú±í×óÓÒmarginÖµ.
µ±ÉÏÏÂ×óÓÒmarginÖµ¾ùÒ»ÖÂ, ¿É¼òдΪ:
margin: 40px;
2. Padding: °üÀ¨padding-top, padding-right, padding-bottom, padding-left, ¿ØÖƿ鼶ԪËØÄÚ²¿, contentÓëborderÖ®¼äµÄ¾àÀë, Æä´úÂë, ¼òдÇë²Î¿¼marginÊôÐÔµÄд·¨.
ÖÁ´Ë, ÎÒÃ
ÓÃfloatʱ·¢ÏÖmargin²»Æð×÷Óã¬Í¼Æ¬ºÍÎÄ×Ö²¢ÅÅʱÀÏÊDz»ÄܶÔÆ룬ÓÚÊÇËѵ½ÁËÕâƪÎÄÕ¡£ -------------------------------------------------------------------------------------------------------------------- Ô´´ÎÄÕ£¬×ªÔØÇë×¢Ã÷À´×ÔÕÅöÎÐñ-öοռä-öÎÉú»î[http://www.zhangxinxu.com] ±¾ÎĵØÖ·£ºhttp://www.zhangxi ......