CSSµÄpositionÏê½â
position ÓÐÈý¸öÖµ£¬static£¨¾²Ì¬£©¡¢relative£¨Ïà¶Ô£©¡¢absolute£¨¾ø¶Ô£© fix(¹Ì¶¨²¼¾Ö)£»ÓÉÓÚstaticÊÇËùÓÐÒ³ÃæÔªËØµÄĬÈÏÖµ£¬Òò´ËÉèÖÃÔªËØµÄ¶¨Î»ÀàÐÍʱ¼¸ºõ²»ÓÃÕâ¸öÖµ£¬³ý·ÇÓÃÓÚ¸²¸Ç֮ǰµÄ¶¨Òå¡£
¶ÔÓÚºóÁ½Õߣ¬Ò»°ãÓ¦ÓãºÔÚÒ»¸öÏà¶Ô¶¨Î»µÄÔªËØÀïÃæ·ÅÖÃÒ»¸ö¾ø¶Ô¶¨Î»µÄÔªËØ£¬Èçͼ£º
×ÓÔªËØB¿ÉÒÔͨ¹ýtop¡¢right¡¢bottom¡¢leftÀ´¾«È·¶¨Î»£¬¶¨Î»µÄ²Î¿¼Ä¿±ê¾ÍÊÇÆä¾ßÓÐÏà¶Ô¶¨Î»ÊôÐԵĸ¸¼¶ÔªËØA£»²¢ÇÒÉèÖÃÕâÐ©Æ«ÒÆºó£¬²úÉúµÄ¿Õ϶»á±»ºóÃæµÄÔªËØÌî³ä£¨Èç¹ûºóÃæµÄÔªËØ×ã¹»³ß´çµÄ»°£©¡£ÓÉÓÚBÔªËØ¾ßÓÐabsolute¶¨Î»ÊôÐÔ£¬Ï൱ÓÚ´ÓÎĵµÁ÷ÖгéÈ¡³öÀ´£¬¸¡¶¯ÔÚÔÆ½ÃæÅŰæÉÏ£¬Ðγɓ²ã”£¬Èç¹ûÓжà¸ö“²ã”£¬²ãÓë²ãÖ®¼ä¾Í±ØÈ»»áÓÐ˸²¸ÇË£¬ËÔÚÉÏËÔÚϵľºÕù¹ØÏµ£¬Òò´Ë£¬Îª½â¾öÕâ¸ö¾ºÕù£¬¾Í²úÉúÁË z-index£¨¿Õ¼ä×ø±êϵµÄZÖᣩ ÊôÐÔ£¬ËµÄÖµ´ó£¬Ë¾ÍÔÚÉÏÃæ¡£ÁíÍ⣬Èç¹û¸¸¼¶ÔªËØAûÓÐÉèÖÃrelative£¬ÄÇôBÔªËØ¾Í»áÒÔbody±êÇ©µ±×÷²Î¿¼µã¡£
¶ÔÓÚ¾ßÓÐposition:relativeÊôÐÔµÄÔªËØA£¬Æätop¡¢right¡¢bottom¡¢leftËĸö·½ÏòµÄλÖÃÆ«ÒƾͻáÒÔ¸ÃÔªËØµÄÔÀ´Î»ÖÃ×÷Ϊ²Î¿¼µã£¬¶ø²»ÊÇÏñÉÏÃæËµµÄ£¬ÒÔ¾ßÓÐrelative¶¨Î»ÊôÐԵĸ¸¼¶ÔªËØ»òbody×÷Ϊ²Î¿¼µã¡£ÔÚÉèÖÃÁËÆ«Òƺó²úÉúÁË¿Õ϶£¬ÆäÖÜΧµÄÔªËØ²¢²»»áÌî³äÕâЩ¿Õ϶£¬¼´Ê¹ËüÃÇ×ã¹»³ß´ç(ÑÝʾ)¡£ÖµµÃ×¢ÒâµÄÊÇ£¬´ËÊ±ÔªËØAµÄmargin£¬margin½«×÷ÓÃÓÚ¸ÃÔªËØµÄÔÀ´Î»Öã¬ÓÉÓÚÔλÖòúÉúÆ«ÒÆ£¬¸ÃÔªËØµÄ×îÖÕλÖý«ÊÇmarginÓëtop¡¢right¡¢bottom¡¢left¹²Í¬×÷ÓúóµÄλÖ㬲¢ÇÒÆäÖÜÎ§ÔªËØµÄλÖÃÒ²½«²úÉúÓ°Ïì¡£
»Ø¹ýÍ·À´ÔÙ¿´¿´ relative ÀïÃæµÄ absolute£¬±ÈÈçÉÏÃæµÄA¡¢BÁ½¸öÔªËØ£¬Èç¹ûÁ½¸öÔªËØ¶¼ÉèÖÃÁËtop¡¢right¡¢bottom¡¢left£¬¶ÔÓÚÔªËØBÀ´Ëµ£¬ÆäλÖÃÆ«ÒƵIJο¼µãÊÇÔªËØAÆ«ÒÆºóµÄλÖ㬲»ÊÇÔªËØAµÄÔλÖã¬Í¬Ñù£¬Èç¹ûÔªËØBÓÐmargin£¬Æä²Î¿¼µãÒ²ÊÇÔªËØAÆ«ÒÆºóµÄλÖã¬ÕâµãºÜÖØÒª£¬Õâ²ÅÊÇabsoluteµÄ¸ÅÄî(ÑÝʾ)¡£
ÉîÈëÆÊÎöJqueryÖеÄoffset()ºÍposition()
2009-5-30
16:57
jquery ÖÐÓÐÁ½¸ö»ñÈ¡ÔªËØÎ»Öõķ½·¨offset()ºÍposition()£¬ÕâÁ½¸ö·½·¨Ö®¼äÓÐʲôÒìͬ£¿Ê¹ÓõÄʱºòÓ¦¸Ã×¢ÒâÄÄЩÎÊÌ⣿ʲôʱºòʹÓÃoffset(),ʲôʱºòÓÖʹÓÃposition()ÄØ£¿
ÏÈ¿´¿´ÕâÁ½¸ö·½·¨µÄ¶¨Òå¡£
offset():
»ñȡƥÅäÔªËØÔÚµ±Ç°ÊÓ¿ÚµÄÏà¶ÔÆ«ÒÆ¡£
·µ»ØµÄ¶ÔÏó°üº¬Á½¸öÕûÐÎÊôÐÔ£ºtop ºÍ left¡£´Ë·½·¨Ö»¶Ô¿É¼ûÔªËØÓÐЧ¡£
position():
»ñȡƥÅäÔªËØÏà¶Ô¸¸ÔªËØµÄÆ«ÒÆ¡£
·µ»ØµÄ¶ÔÏó°üº¬Á½¸öÕûÐÎÊôÐÔ£ºtop ºÍ left¡£Îª¾«È·¼ÆËã½á¹û£¬ÇëÔÚ²¹°×
Ïà¹ØÎĵµ£º
Ç¿ÁÒÍÆ¼öÒ»¿îCSSµ¼º½²Ëµ¥£¬Óõ½Õþ¸®Ñ§Ð£ÀàÍøÕ¾Éϳ¬¼¶²»´í¡£
ÓеãÀàËÆÕ¾³¤Íø²Ëµ¥µÄζµÀ£¬Ö»²»¹ýÑÕÉ«²»Ò»Ñù¶øÒÑ£¬ÕâÖֲ˵¥»¹²»ÊÇÕæÕýÒâÒåÉϵēÏÂÀ”²Ëµ¥£¬Ó¦¸Ã½Ð»¬³ö²Ëµ¥<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ......
ʹÓÃAnt¹¹½¨ÅúÁ¿Ñ¹Ëõjs¡¢cssÎļþ
ʹÓÃAntÅúÁ¿Ñ¹Ëõjs¡¢cssÎļþ
2010 Äê 01 ÔÂ 27 ÈÕ
ÌṩÁËÒ»¸öant½Å±¾£¬ËüÖ÷ÒªÓÃÓÚÅúÁ¿Ñ¹ËõÅú¶¨Ä¿Â¼ÏµÄjs¡¢cssÎļþ£¬´Ëant½Å±¾Ê¹Óõ½ÁË YUI Compressor¡¢antcontrib
.
Ant Contrib
Ö÷ҪʹÓÃËüËùÌṩµÄforeach¡¢propertyregexÕâÁ½¸ötarget
yui compressor ²Î¿¼×ÊÁÏ
ѹËõ»á´ø ......
ÓÉÓÚ¸÷ä¯ÀÀÆ÷µÄĬÈÏCSSÑùʽ²»Ò»Ñù£¬ÎÒÃDZØÐëдһ¸öCSS ResetͳһÆðÀ´¡£
ͨ³£ÎÒµÄ×ö·¨ÊÇÔÚcommon.cssÀïдȫ¾Ö¿ØÖÆ£¬ÕâÀïÃæÒ²°üÀ¨headerºÍfooter£¬ÆäËüCSSÎļþ¾Íͨ¹ý@import url(”
common.css”);ÒýÓá£
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-
family ......
CSS Hack ÊÇÔÚ±ê×¼ CSS û°ì·¨¼æÈݸ÷ä¯ÀÀÆ÷ÏÔʾЧ¹ûʱ²Å»áÓÃÉϵIJ¹¾È·½·¨,ÔÚ¸÷ä¯ÀÀÆ÷³§É̽âÎö CSS ûÓдï³ÉÒ»ÖÂǰ,ÎÒÃÇÖ»ÄÜÓÃÕâÑùµÄ·½·¨À´Íê³ÉÕâÑùµÄÈÎÎñ¡£ÍøÉÏÄã¿ÉÄÜÄÜËÑË÷µ½Ò»´ó¶ÑµÄ CSS Hack£¬µ«ÊÇÎÒ½ñÌì·¢²¼µÄÄã¿ÉÄܲ¢²»¶¼ºÜÁ˽⣬ÒòΪÕâЩ¶¼ÊÇÖ»Õë¶Ôµ¥¶ÀÒ»¸öä¯ÀÀÆ÷µÄ CSS Hack¡£
ΪÁËÏòÄãչʾÕâЩ CSS Hack ÊÇ·ñÕý³£Ô ......
¡¾Web¡¿css¼æÈÝÓë²î±ð¡¡IE6,IE7,IE8,FireFox,Opera,Safari
2010-01-16 18:50
¡¾Web¡¿css¼æÈÝÓë²î±ð¡¡IE6,IE7,IE8,FireFox,Opera,Safari
2010-01-13 11:07
ÍâÖÃ
.main{ float:left;#float:none;_float:none;
html*.main{ float:left;#float:none;_float:none; }
*+html .main{ float:left;#float:none;_float:none; } ......