CSSµÄºÐ×Óģʽ(Box Model)
CSS ÖÐÓиöÖØÒªµÄ¸ÅÄ¾ÍÊǺÐ×Óģʽ(Box model)¡£
ºÐ×ÓÀïÓÉÀïÖÁÍâÒÀ´ÎÊÇ£º
content ÄÚÈÝ(±ÈÈçÎı¾¡¢Í¼Æ¬µÈ)
padding Äڱ߾à
border ±ß¿ò
margin Íâ±ß¾à
paddingÊôÐÔÓÃÀ´ÉèÖÃÔªËØÄÚÈݵ½ÔªËر߿òµÄ¾àÀë¡£
borderÊôÐÔÓÃÀ´ÉèÖÃÒ»¸öÔªËصıßÏß¡£
marginÊôÐÔÓÃÀ´ÉèÖÃÒ»¸öÔªËØËùÕ¼¿Õ¼äµÄ±ßÔµµ½ÏàÁÚÔªËØÖ®¼äµÄ¾àÀë¡£
CSS±³¾°ÊôÐÔÖ¸µÄÊÇcontentºÍpaddingÇøÓò¡£
CSSÊôÐÔÖеÄwidthºÍheightÖ¸µÄÊÇcontentÇøÓòµÄ¿íºÍ¸ß¡£
Ïà¹ØÎĵµ£º
CSS ºÐÄ£ÐÍ
¡¡¡¡ÍøÒ³Éè¼ÆÖеÄÿ¸öÔªËض¼Êdz¤·½ÐεĺÐ×Ó¡£ºÐ×ӵijߴçÊÇÔõÑù¾«È·¼ÆËãµÄ£¬Çë¿´ÏÂͼ£º
¡¡¡¡
¡¡¡¡Èç¹ûÊÇ Firebug Óû§µÄ»°(»ù±¾ºÍÇ°¶ËÓйصĶ¼»áÓõ½ Firebug °É – ÌÇ°éÎ÷ºìÊÁ)£¬¾Í»áºÜÊìϤÏÂÃæµÄͼ±íÁË¡£
¡¡¡¡Õâ¸öͼ±íºÜºÃµØչʾÁË×÷ÓÃÓÚÒ³ÃæÉÏÈÎÒâºÐ×ÓµÄÊýÖµ¡£
¡¡¡¡
¡¡¡¡×¢ÒâÒÔÉÏÁ½¸öÀý×ÓÖУ¬margi ......
ÊÊÓÃÓÚÖ»ÓÐÒ»ÐÐÎÄ×ÖµÄÇé¿ö.
.ellipsis{
text-overflow:ellipsis; /*µ±¶ÔÏóÄÚÎı¾Òç³öʱÏÔʾʡÂÔ±ê¼Ç(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflowÊÇCSS3µÄÊôÐÔ£¬IE6ÒÔÉÏ°æ±¾¡¢Safari¡¢chrome Ö§³Ö¡£Ëü¿ÉÒÔ´ø2¸ö²ÎÊý£º
clip [²»ÏÔʾʡÂÔ±ê¼Ç£¨...£©£¬¶øÊÇ ......
1.»ù±¾Óï·¨£º
Ñ¡Ôñ·ûÃû×Ö { ÉùÃ÷; }
Ñ¡Ôñ·ûÃû×ÖÃüÃû¹æÔò£º
CSSÑ¡Ôñ·û¿ÉÒÔʹÓÃÓ¢ÎÄ×ÖĸµÄ´óдÓëСд,Êý×Ö,Á¬×ÖºÅ,Ï»®Ïß,ðºÅ,¾äºÅ.
2.·ÖÀࣺ
ÔÚAndy BuddµÄ¡¶CSS MASTERY¡·£¨ÖÐÒ롶¾«Í¨CSS¡·£©ÖУ¬½«CSSÑ¡Ôñ·û·ÖΪ£º³£ÓÃÑ¡Ôñ·û¡¢Í¨ÓÃÑ¡Ôñ·ûºÍ¸ß¼¶Ñ¡Ôñ·û¡£³£ÓÃÑ¡Ôñ·û°üÀ¨£ºÀàÐÍÑ¡Ôñ·û¡¢ÀàÑ¡Ôñ·û¡¢IDÑ¡Ôñ·û¡¢ºó´ ......
A
absolute ¾ø¶ÔµÄ   ......