CSS²¼¾Ö ¿é¼¶ÔªËؼ°ÄÚÁªÔªËØ
Block element ¿é¼¶ÔªËØ
¹ËÃû˼Òå¾ÍÊÇÒÔ¿éÏÔʾµÄÔªËØ£¬¸ß¶È¿í¶È¶¼ÊÇ¿ÉÒÔÉèÖõġ£±ÈÈçÎÒÃdz£ÓõÄ<div>¡¢<p>¡¢<ul>ĬÈÏ״̬϶¼ÊÇÊôÓڿ鼶ԪËØ¡£¿é¼¶ÔªËرȽϰԵÀ£¬Ä¬ÈÏ״̬ÏÂÿ´Î¶¼Õ¼¾ÝÒ»Õû¸öÐУ¬ºóÃæµÄÄÚÈÝÒ²±ØÐëÔÙÐÂÆðÒ»ÐÐÏÔʾ¡£µ±È»·Ç¿é¼¶ÔªËØÒ²¿ÉÒÔͨ¹ýcssµÄdisplay:block;½«Æä¸ü¸Ä³É¿é¼¶ÔªËØ¡£´ËÍ⻹ÓиöÌØÊâµÄ£¬floatÒ²¾ßÓд˹¦ÄÜ¡£
Inline element ÄÚÁªÔªËØ
ͨË×µãÀ´Ëµ¾ÍÊÇÎı¾µÄÏÔʾ·½Ê½£¬Óë¿é¼¶ÔªËØÏà·´£¬ÄÚÁªÔªËصĸ߶ȿí¶È¶¼ÊDz»¿ÉÒÔÉèÖõģ¬Æä¿í¶È¾ÍÊÇ×ÔÉíÎÄ×Ö»òÕßͼƬµÄ¿í¶È¡£ÎÒÃdz£Óõ½µÄ<a>¡¢<span>¡¢<em>¶¼ÊôÓÚÄÚÁªÔªËØ¡£ÄÚÁªÔªËصÄÏÔʾÌصã¾ÍÊÇÏñÎı¾Ò»ÑùµÄÏÔʾ£¬²»»á¶À×ÔÕ¼¾ÝÒ»¸öÐС£µ±È»¿é¼¶ÔªËØÒ²Äܱä³ÉÄÚÁªÔªËØ£¨±¾ÎÄΪתÔØ£¬¸öÈËÈÏΪ·Ç¾ø¶ÔÒâÒåÉϵÄÄÚÁª£©£¬ÄǾÍÊÇͨ¹ýcssµÄdisplay:inline;ºÍfloatÀ´ÊµÏÖ¡£
ÔÚ¡¶CSSȨÍþÖ¸ÄÏ¡·ÕâÑù¶¨Òåµ½£¬“Èκβ»Êǿ鼶ԪËصĿɼûÔªËض¼ÊÇÄÚÁªÔªËØ£¬Æä±íÏÖµÄÌØÐÔÊÇ“Ðв¼¾Ö”ÐÎʽ¡£”ÎÒ¸öÈ˲»Ì«Ï°¹ß“Ðв¼¾Ö”µÄ˵»°£¬ÒòΪÎÒÈÏΪ¿é¼¶ÔªËØ´Ó±íÏÖÉϸüÏñ“ÐДÏÔʾ£¬¶øÄÚÁªÔªËظüÏñÊÇ“Îı¾”µÄÏÔʾÊôÐÔ¡£ÕâÆäÖÐÒ»µã¼ÇסºÜ¹Ø¼ü£¬“ÄÚÁªÔªËصĸ߶ȿí¶È¶¼ÊDz»¿ÉÒÔÉèÖõģ¬Æä¿í¶È¾ÍÊÇ×ÔÉíÎÄ×Ö»òÕßͼƬµÄ¿í¶È”¡£ÒòΪÔÚÄãÉèÖÿí¶È¸ß¶È´ó°ëÌìºóû·´Ó¦²Å·¢ÏÖ£¬ÔÀ´ÕâÖ»ÊǸöÄÚÁªÔªËØ¡£
ÄÚÁªÔªËØÊÇʲôÒâ˼ÄØ£¿Ê²Ã´Êǿ鼶±ðÔªËØ¡£
¡¶CSSȨÍþÖ¸ÄÏ¡·ÖÐÎÄ×ÖÏÔʾ£ºÈκβ»Êǿ鼶ԪËصĿɼûÔªËض¼ÊÇÄÚÁªÔªËØ¡£Æä±íÏÖµÄÌØÐÔÊÇ“Ðв¼¾Ö”ÐÎʽ£¬ÕâÀïµÄ“Ðв¼¾Ö”µÄÒâ˼¾ÍÊÇ˵Æä±íÏÖÐÎʽʼÖÕÒÔÐнøÐÐÏÔʾ¡£±ÈÈ磬ÎÒÃÇÉ趨һ¸öÄÚÁªÔªËØborder-bottom:1px solid #000;ʱÆä±íÏÖÊÇÒÔÿÐнøÐÐÖظ´£¬Ã¿Ò»ÐÐÏ·½¶¼»áÓÐÒ»ÌõºÚÉ«µÄϸÏß¡£Èç¹ûÊǿ鼶ԪËØÄÇôËùÏÔʾµÄµÄºÚÏßÖ»»áÔÚ¿éµÄÏ·½³öÏÖ¡£
p¡¢h1¡¢»òdivµÈÔªËس£³£³ÆΪ¿é¼¶ÔªËØ£¬ÕâЩԪËØÏÔʾΪһ¿éÄÚÈÝ£»Strong,spanµÈÔªËسÆΪÐÐÄÚÔªËØ£¬ËüÃǵÄÄÚÈÝÏÔʾÔÚÐÐÖУ¬¼´“ÐÐÄÚ¿ò”¡££¨¿ÉÒÔʹÓÃdisplay=block½«ÐÐÄÚÔªËØת»»³É¿éÔªËØ£¬display=none±íʾÉú³ÉµÄÔªËظù±¾Ã»Óпò£¬Ò²¼È²»ÏÔʾԪËØ£¬²»Õ¼ÓÃÎĵµÖеĿռ䣩
A£ºÐÐÄÚ¾ÍÊÇÔÚÒ»ÐÐÄÚµÄÔªËØ£¬Ö»ÄÜ·ÅÔÚÐÐÄÚ£»¿é¼¶ÔªËØ£¬¾ÍÊÇÒ»¸öËÄ·½¿é£¬¿ÉÒÔ·ÅÔÚÒ³ÃæÉÏÈκεط½¡£
B£
Ïà¹ØÎĵµ£º
CSS ÖÐÓиöÖØÒªµÄ¸ÅÄ¾ÍÊǺÐ×Óģʽ(Box model)¡£
ºÐ×ÓÀïÓÉÀïÖÁÍâÒÀ´ÎÊÇ£º
content ÄÚÈÝ(±ÈÈçÎı¾¡¢Í¼Æ¬µÈ)
padding Äڱ߾à
border ±ß¿ò
margin Íâ±ß¾à
paddingÊôÐÔÓÃÀ´ÉèÖÃÔªËØÄÚÈݵ½ÔªËر߿òµÄ¾àÀë¡£
  ......
CSS¼òд¾ÍÊÇÖ¸½«¶àÐеÄCSSÊôÐÔÉùÃ÷»¯³ÉÒ»ÐУ¬ÓÖ³ÆΪCSS´úÂëÓÅ»¯¡£CSS¼òдµÄ×î´óºÃ´¦¾ÍÊÇÄܹ»ÏÔ׿õÉÙ
CSSÎļþµÄ´óС£¬Æäʵ»¹ÓкܶàÆäËûÒæ´¦¡£Ó·Ö׶øÔÓÂÒµÄCSSÑùʽ±í»áʹÄãÓöµ½ÎÊÌâÊÇÄÑÒÔµ÷ÊÔ¡£ÓÈÆäÊǵ±Ò»
¸öÍŶÓÔÚ½øÐÐÉè¼ÆµÄʱºò£¬ÄãµÄÓ·Ö×µÄCSS´úÂë»áʹÄãµÄÍŶÓÆäËû³ÉÔ±µÄ¹¤×÷ЧÂÊϽµ¡£
¡¡¡¡½ñÌ죬ÕûÀíÁËһЩCSS¼òÐ ......
Css³£ÓÃÊôÐÔ£º
1. color, background-color£º±íʾÑÕÉ«µÄ¹Ø¼ü×Ö£¬16½øÖÆÊý£¨http://www.clagnut.com/blog/260ÖÐÌṩµÄcolor
scheme¹¤¾ß£©
2. font-family£º¸ÃÊôÐÔµÄÖµ¿ÉÒÔÊÇÒ»×é×ÖÌ壬°´Ï²»¶³Ì¶ÈÅÅÐòµÄ×ÖÌåÁÐ±í¡£Ò»Ð©ÖÐÎÄ×ÖÌåµÄÁÐ±í£º
WindowsµÄһЩ£º
·
ÐÂ ......
ie6²¢²»ÊDz»Ö§³Öpng£¬ËüÖ§³ÖË÷ÒýÑÕÉ«µÄPNG-8£¬¶øÊDz»Ö§³ÖRGBÑÕÉ«µÄPNG-24¡£
ie6ÀïµÄPNG-24ͼƬ×ö±³¾°Ö÷ÒªÓÐÒÔϼ¸¸öÎÊÌ⣺
Ò»¡¢ie6Àïpng±³¾°Í¸Ã÷ÎÊÌ⣺½â¾ö°ì·¨ÓÃÂ˾µ¡£Õâ¸öÒ»°ã¸ßÊÖÃǶ¼ÖªµÀ¡£
×¢Ò⣺src Õâ¸ö·¾¶ÊÇÖ¸¼ÓÔØÂ˾µµÄÒ³ÃæÏà¶ÔÓÚͼƬµÄ·¾¶£¬¶ø²»ÊÇcssÎļþÏà¶ÔÓÚͼƬµÄ·¾¶¡£Õâ¸úÒ»°ãµÄͼƬ¼ÓÔØÓÐÇø±ð¡£
fi ......
Õâ¸ö“ä¯ÀÀÆ÷ĬÈÏHTMLµÄCSSÑùʽÊôÐÔ”£¬ÔÚÄãÐèÒª»¹ÔĬÈÏÖµµÄʱºò£¬±È½ÏÓÐÓ᣿ªÊ¼µÄʱºòÓ¦ÓÃͨÅäÑ¡ÔñÆ÷ *
{margin:0;padding:0;}£¬µ±ÐèҪʹÓñ߾àµÄʱºò£¬¾ÍÐèÒª»¹ÔHTMLĬÈÏCSSÖµÁË¡£
µ«Í¨ÅäÑ¡ÔñÆ÷ÔÚ´óÐÍÍøÕ¾µÄ¹¹½¨ÖУ¬Ó°
ÏìÐÔÄÜ£¬¿ÉÒԲο¼52CSS.comµÄÏà¹ØÎÄÕ£¬´ó¼Ò»¹ÊÇÐèÒª½÷É÷һЩ¡£
¡¡¡¡Ò ......