div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨
div+cssä¯ÀÀÆ÷¼æÈÝÎÊÌâ½â¾ö·½·¨
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ vertical-align:middle; ½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß
line-height:200px; È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐÐ
2. margin¼Ó±¶µÄÎÊÌâ ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£½â¾ö·½°¸ÊÇÔÚÕâ¸ödivÀïÃæ¼ÓÉÏdisplay:inline; ÀýÈ磺 <#div
id=”imfloat”> ÏàÓ¦µÄcssΪ #IamFloat{ float:left; margin:5px;/*IEÏÂÀí½âΪ10px*/ display:inline;/*IEÏÂÔÙÀí½âΪ5px*/}
3.¸¡¶¯ie²úÉúµÄË«±¶¾àÀë #box{ float:left; width:100px; margin:0 0
0 100px; //ÕâÖÖÇé¿öÖ®ÏÂIE»á²úÉú200pxµÄ¾àÀë display:inline; //ʹ¸¡¶¯ºöÂÔ} ÕâÀïϸ˵һÏÂblockÓëinlineÁ½¸öÔªËØ£ºblockÔªËØµÄÌØµãÊÇ,×ÜÊÇÔÚÐÂÐÐÉÏ¿ªÊ¼,¸ß¶È,¿í¶È,Ðиß,±ß¾à¶¼¿ÉÒÔ¿ØÖÆ(¿éÔªËØ);InlineÔªËØµÄÌØµãÊÇ,ºÍÆäËûÔªËØÔÚͬһÐÐÉÏ,²»¿É¿ØÖÆ(ÄÚÇ¶ÔªËØ); #box{ display:block; //¿ÉÒÔΪÄÚÇ¶ÔªËØÄ£ÄâΪ¿éÔªËØ display:inline; //ʵÏÖͬһÐÐÅÅÁеÄЧ¹û diplay:table;
4 IEÓë¿í¶ÈºÍ¸ß¶ÈµÄÎÊÌâ IE ²»ÈϵÃmin-Õâ¸ö¶¨Ò壬µ«Êµ¼ÊÉÏËü°ÑÕý³£µÄwidthºÍheightµ±×÷ÓÐminµÄÇé¿öÀ´Ê¹¡£ÕâÑùÎÊÌâ¾Í´óÁË£¬Èç¹ûÖ»Óÿí¶ÈºÍ¸ß¶È£¬Õý³£µÄä¯ÀÀÆ÷ÀïÕâÁ½¸öÖµ¾Í²»»á±ä£¬Èç¹ûÖ»ÓÃmin-widthºÍmin-heightµÄ»°£¬IEÏÂÃæ¸ù±¾µÈÓÚûÓÐÉèÖÿí¶ÈºÍ¸ß¶È¡£ ±ÈÈçÒªÉèÖñ³¾°Í¼Æ¬£¬Õâ¸ö¿í¶ÈÊDZȽÏÖØÒªµÄ¡£Òª½â¾öÕâ¸öÎÊÌ⣬¿ÉÒÔÕâÑù£º #box{ width: 80px; height:
35px;}html>body #box{ width: auto; height: auto; min-width: 80px;
min-height: 35px;}
5.Ò³ÃæµÄ×îС¿í¶È min -widthÊǸö·Ç³£·½±ãµÄCSSÃüÁËü¿ÉÒÔÖ¸¶¨ÔªËØ×îСҲ²»ÄÜСÓÚij¸ö¿í¶È£¬ÕâÑù¾ÍÄܱ£Ö¤ÅŰæÒ»Ö±ÕýÈ·¡£µ«IE²»ÈϵÃÕâ¸ö£¬¶øËüʵ¼ÊÉϰÑwidthµ±×ö×îС¿í¶ÈÀ´Ê¹¡£ÎªÁËÈÃÕâÒ»ÃüÁî
Ïà¹ØÎĵµ£º
Ò»×éǶÌ×Ñ¡ÔñÆ÷µÄʵ¼ÊÌØÐÔ¿ÉÒÔ¼ÆËã³öÀ´¡£»ù±¾µÄ£¬Ê¹ÓÃIDÑ¡ÔñÆ÷µÄÖµÊÇ100£¬Ê¹ÓÃclassÑ¡ÔñÆ÷µÄÖµÊÇ10£¬Ã¿¸öhtmlÑ¡ÔñÆ÷µÄÖµÊÇ1¡£
ËüÃÇ¼ÓÆðÀ´¾Í¿ÉÒÔ¼ÆËã³öÌØÐÔµÄÖµ¡£
pµÄÌØÐÔÊÇ1£¨Ò»¸öhtmlÑ¡ÔñÆ÷£©
div pµÄÌØÐÔÊÇ2£¨Á½¸öhtmlÑ¡ÔñÆ÷£©
.treeµÄÌØÐÔÊÇ10£¨1¸öclassÑ¡ÔñÆ÷£©
div p.treeµÄÌØÐÔÊÇ1+1+10=12£¬£¨Á½¸öhtmlÑ¡ÔñÆ÷ ......
test.html£º
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id=&qu ......
ÔÚ½øÐÐdiv+cssÍøÒ³²¼¾ÖµÄʱºò£¬²»¿É±ÜÃâµÄÐèÒª²åÈëÒ»¶¨µÄ±íµ¥ÔªËØ£¬inputÊÇÆäÖÐ×î³£¼ûµÄÒ»ÖÖ¡£ÎÒÃÇÔÚ²¼¾ÖÖУ¬³£»áÓöµ½Îı¾ÊäÈë¿òÓëͬ´¦Ò»ÐеÄÎı¾²»¶ÔÆëµÄÎÊÌâ¡£Õâ¸öÎÊÌâÉèÖÃinputµÄvertical-align:middleÊôÐÔÀ´½â¾ö¡£
ÎÒÃÇÀ´¿´ÏÂÃæµÄÀý×Ó£¬ÈçºÎ½â¾öÎı¾ÊäÈë¿òÓëÎı¾¶ÔÆëµÄÎÊÌ⣡
<!DOCTYPE html PUBLIC "-//W3C//DTD ......
¿ª·¢¹ýAndroidÓ¦ÓõÄͬѧÃǶ¼ÖªµÀ£¬Android¹¤³Ì-res-layout×ÊÔ´Îļþ¼ÐÏ´æ·Å×Å¿ØÖÆview²¼¾ÖµÄxmlÎļþ£¬ÎÒÃÇ¿ÉÒÔͬ¹ýgetViewById(int i)·½·¨£¬´ÓXMLÖй¹Ôìview¼°Æä×ÓÀ࣬ÔÚÕâ¸ö¹ý³Ìµ±ÖУ¬XMLÎļþÖеÄÒ»ÇÐlayoutÊôÐÔÒ²½«±»¸³ÓèÕâ¸öview¡£µ±È»£¬ÎÒÃÇÒ²Äܹ»Í¨¹ý´úÂëÀ´ÎªÄ³Ò»¸öviewÀ´ÉèÖÃlayout£¬ÄÇÊǺ󻰡£Í¨¹ý¶Ô¼ ......
¾²Ì¬¶¨Î»£ºposition:static£¨ÎªpositionÊôÐÔµÄĬÈÏÖµ£©¡£
¶¯Ì¬¶¨Î»£ºposition:relative»òposition:absolute»òposition:fixed¡£
×æÔªËØ£ºÈÎÒâ°üº¬¸ÃÔªËØµÄÔªËØ¡£ ¸¸ÔªËØ£ºÖ±½Ó°üº¬¸ÃÔªËØµÄ×æÔªËØ¡£ ͬ±²ÔªËØ£ºÓµÓй²Í¬µÄ¸¸ÔªËصÄÔªËØ¡£
×¢£ºÕâЩ¸Å
ÄîΪ×÷Õß ......