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
Ïà¹ØÎĵµ£º
The CSS Anthology 101 Essential Tips Tricks Hacks 3rd Edition
The Ultimate CSS Reference
Teach Yourself Visually Html And CSS
Everything You Know About CSS is Wrong
The CSS Anthology 101 Essential T ......
ÔÑùʽ£º
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</titl ......
5ÖÖ·½·¨Á¢¿Ìд³ö¸üºÃµÄCSS´úÂë
Òý×Ô:http://bbs.seuuo.com/thread-2625-1-3.html
µ±È»£¬Ã¿¸öÈ˶¼¿ÉÒÔ±àдCSS´úÂ룬ÉõÖÁÄãÏÖÔÚÒѾÈÃËüΪÄãµÄÏîÄ¿¹¤×÷ÁË¡£µ«ÊÇCSS»¹¿ÉÒÔ¸üºÃÂ𣿿ªÊ¼ÓÃÕâ5¸öTips¸Ä½øÄãµÄCSS°É£¡
1.ÖØÖÃ
Ê×ÏÈ£¬ºÜÈÏÕæµÄ¸æËßÄ㣬×ÜÊÇÒªÖØÖÃijЩ·ÖÀà¡£ÎÞÂÛÄãÊÇʹÓà Eric Meyer Reset¡¢YUI Reset»òÕßÄã×Ô¼º±à ......
ÕâÊÇÎÒÔÚÒ»¸öÍøÕ¾ÉÏ¿´µ½µÄ,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;
}
......
CSS¼òд¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆΪCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙCSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö׶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶÓÆäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òд¼¼Ç ......