dz̸CSSÖÐmarginµÄÊôÐÔ¼°Ê¹Ó÷½·¨
ÏëÐÞ¸ÄÒ»ÏÂ×Ó×Ô¼ºµÄCSS£¬ÒòΪ²©¿Í±êÌâÕýºÃ°ÑÍøÒ³Í¼Æ¬ÉϵÄÎÄ×ÖÕýºÃµµÁËÒ»²¿·Ö£¬¿´ÆðÀ´ºÜ²»Ë¬¡£×îºóȷʵÊÇÓÉ“marginÃüÁî”À´¿ØÖƵģ¬ÓÚÊÇÉÏÍøÑ§Ï°ÁËÒ»ÏÂ×ÓÕâ¸öµÄÓ÷¨¡£marginÔÚÖÐÎÄÖÐÎÒÃÇ·Òë³ÉÍâ±ß¾à»òÕßÍâ²¹°×£¨±¾ÎÄÖÐÒýÓÃÍâ±ß¾à£©¡£ËûÊÇÔªËØºÐÄ£ÐÍ£¨box model£©µÄ»ù´¡ÊôÐÔ¡£
Ò»¡¢marginµÄ»ù±¾ÌØÐÔ
marginÊôÐÔ°üÀ¨margin-top,margin-right,margin-bottom,margin-left,margin£¬¿ÉÒÔÓÃÀ´ÉèÖÃboxµÄmargin area¡£ÊôÐÔmargin¿ÉÒÔÓÃÀ´Í¬Ê±ÉèÖÃboxµÄËıßÍâ±ß¾à£¬¶øÆäËûµÄmarginÊôÐÔÖ»ÄÜÉèÖÃÆä×Ô¸÷µÄÍâ±ß¾à¡£
marginÊôÐÔ¿ÉÒÔÓ¦ÓÃÓÚ¼¸ºõËùÓеÄÔªËØ£¬³ýÁ˱í¸ñÏÔʾÀàÐÍ£¨²»°üÀ¨ table-caption, table and inline-table£©µÄÔªËØ£¬¶øÇÒ´¹Ö±Íâ±ß¾à¶Ô·ÇÖû»ÄÚÁªÔªËØ£¨non-replaced inline element£©²»Æð×÷Óá£
»òÐíÓÐÅóÓѶԷÇÖû»ÔªËØ£¨non-replaced element£©ÓеãÒÉ»ó£¬ÉÔ΢°ïÖú´ó¼ÒÀí½âһϡ£·ÇÖû»ÔªËØ£¬W3CÖÐûÓиø³öÃ÷È·µÄ¶¨Ò壬µ«ÎÒÃÇ´Ó×ÖÃæ¿ÉÒÔÀí½âµ½£¬·ÇÖû»ÔªËضÔÓ¦×ÅÖû»ÔªËØ£¨replaced element£©£¬Ò²¾ÍÊÇ˵ÎÒÃǸ㶮ÁËÖû»ÔªËصĺ¬Ò壬¾Í¶®ÁË·ÇÖû»ÔªËØ¡£Öû»ÔªËØ£¬W3CÖиø³öÁ˶¨Ò壺
ÒýÓÃ:
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
´Ó¶¨ÒåÖÐÎÒÃÇ¿ÉÒÔÀí½âµ½£¬Öû»ÔªËØ£¨replaced element£©Ö÷ÒªÊÇÖ¸img£¬input£¬textarea£¬select£¬objectµÈÕâÀàĬÈϾÍÓÐCSS¸ñʽ»¯Íâ±í·¶Î§µÄÔªËØ¡£½ø¶ø¿ÉÖª£¬·ÇÖû»ÔªËØ£¨non-replaced element£©¾ÍÊdzýÁËimg£¬input£¬textarea£¬select£¬objectµÈÖû»ÔªËØÒÔÍâµÄÔªËØ¡£
marginʼÖÕÊÇ͸Ã÷µÄ¡£
¶þ¡¢marginµÄ»ù±¾Ð´·¨
Íâ±ß¾àµÄmargin-widthµÄÖµÀàÐÍÓУºauto | length | percentage
percentage£º°Ù·Ö±ÈÊÇÓɱ»Ó¦ÓÃboxµÄcontaining block£¨×¢£ºÒ»¸öÔªËØµÄcontaining blockÊǸÃÔªËØ²úÉúµÄbox(es)ÔÚ¼ÆËãλÖúʹóСʱ²Î¿¼µÄÒ»¸ö¾ØÐΣ¬ÏêϸÔĶÁ¿É¿´£º¡¶Containing Block¡·£©µÄ´óСËù¾ö¶¨¡£¶ÔÓÚmargin-topºÍmargin-bottomҲͬÑù³ÉÁ¢¡£
marginµÄĬÈÏֵΪ0£¬²¢ÇÒmarginÖ§³Ö¸ºÖµ¡£
ÉÏÃæÎÒÃÇÔøÌáµ½ÊôÐÔmargin¿ÉÒÔÓÃÀ´Í¬Ê±Ö¸¶¨boxµÄËıßÍâ±ß¾à¡£Èç¹ûÊôÐÔmarginÓÐËĸöÖµ£¬ÄÇôֵ½«°´ÕÕÉÏ-ÓÒ-ÏÂ-×óµÄ˳Ðò×÷ÓÃÓÚËıߣ¬¼´´ÓÔªËØµÄÉϱ߿ªÊ¼£¬°´ÕÕ˳ʱÕëµÄ˳ÐòÎ§ÈÆÔªËØ¡£±í´ïʽÈçÏ£º
margin£ºtop right bottom left£»
ËĸöÊýÖµÖмäÒÔ¿Õ¸ñ·Ö¸ô¡£Ð§¹ûµÈͬÓÚ£º
margin-top:value;
margin-right:value;
margin-bottom:value;
margin-l
Ïà¹ØÎĵµ£º
ÕâÊÇÎÒÔÚÒ»¸öÍøÕ¾ÉÏ¿´µ½µÄ,CSS¿ØÖÆÒ»¸ö²Ëµ¥,ºÜ¾µäʵÓÃ
CssÎļþÈçÏÂ:css.css
@charset "UTF-8";
/* navigation.css
$Revision: 1.0 $
(c) 2008 Fortinet, Inc. All rights reserved.
*/
/* Navigation Styles ------------------------------------------- */
#wrapper
{
width:1000px;margin:0 auto;
}
......
Òª×ö¸öBSµÄÍøÕ¾ÏîÄ¿£¬¶ñ²¹Ò»ÏÂCSS¡£
CSS³£ÓÃÊôÐÔ£º
×ÖÌåÊôÐÔ
£º(font)
´óС font-size: x-large;(ÌØ´ó) xx-small;(¼«Ð¡) Ò»°ãÖÐÎÄÓò»µ½£¬Ö»ÒªÓÃÊýÖµ¾Í¿ÉÒÔ£¬µ¥Î»£ºPX¡¢PD
Ñùʽ font-style: oblique;(ƫбÌå) italic;(бÌå) normal;(Õý³£)
ÐÐ¸ß line-height: normal;(Õý³£) µ¥Î»£ºPX¡¢PD¡¢EM
´Öϸ font-weight: bold ......
CSS¼òд¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆÎªCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙCSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö×¶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶӯäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òд¼¼Ç ......
!importantÓï·¨Õë¶ÔµÄÊÇ“ºóÃæµÄÊôÐÔ¸²¸ÇÇ°ÃæµÄÊôÐÔ”ÕâÒ»Óï·¨£¬Ò²¾ÍÊÇ˵±êʶÁË!importantµÄÊôÐÔ£¬ÊDz»±»ºóÃæµÄÏàͬÊôÐÔËù¸²¸ÇµÄ£¬¶øIE6²»ÈÏʶÕâ¸ö£¬µ¼ÖÂÆäËûä¯ÀÀÆ÷ºÜÈÝÒ׸ù¾ÝÕâµã“ÆÛ¸º”IE6£º
div{¡¡
¡¡¡¡¡¡¡¡text-decoration:overline;¡¡
¡¡¡¡¡¡¡¡*text-decoration:line-through!important;¡¡
¡ ......