CSSÖÐvisibilityÓëdisplayµÄÇø±ð
CSSÖÐvisibilityÓëdisplayµÄÇø±ð
CSSÖеÄÊôÐÔvisibilityÓëdisplay¶¼¿ÉʵÏÖÏÔʾ¡¢Òþ²ØÔªËصÄЧ¹û£¬µ«ËûÃÇÖ®¼äÒ²ÓкܴóµÄÇø±ð¡£
visibility¹æ¶¨ÔªËصÄÄÚÈÝÊÇ·ñÏÔʾ£»¶ødisplay¹æ¶¨ÔªËر¾ÉíµÄÏÖʵ·½Ê½£¬¿ÉÒÔ¾ö¶¨ÔªËر¾ÉíÊÇ·ñ¿É¼û¡£
visibilityµÄvisible±íʾÏÔʾ£¬hidden±íʾÒþ²Ø¡£µ±visibility±»ÉèÖÃΪ"hidden"ʱ£¬ËäÈ»ÔªËØ²»¿É¼û£¬µ«ËüÒ²»áÕ¼¾ÝÒ³ÃæÉϵĿռ䡣
ÈôÏëÈÃÆäÊͷſռä¿ÉÒÔÉèÖÃstyle.height = "0px"; style.width = "0px";Ò²¿É½«displayÊôÐÔÉèΪ£ºnone¡£
ÒÔÏÂÊÇwww.w3school.com.cnÖжÔvisibilityÓëdisplayµÄÊôÐÔÖµµÄ˵Ã÷£º
1. visibility ÊôÐÔ¹æ¶¨ÔªËØÊÇ·ñ¿É¼û¡£
¿ÉÄܵÄÖµ
Öµ
ÃèÊö
visible
ĬÈÏÖµ¡£ÔªËØÊǿɼûµÄ¡£
hidden
ÔªËØÊDz»¿É¼ûµÄ¡£
collapse
µ±ÔÚ±í¸ñÔªËØÖÐʹÓÃʱ£¬´ËÖµ¿Éɾ³ýÒ»ÐлòÒ»ÁУ¬µ«ÊÇËü²»»áÓ°Ïì±í¸ñµÄ²¼¾Ö¡£±»ÐлòÁÐÕ¼¾ÝµÄ¿Õ¼ä»áÁô¸øÆäËûÄÚÈÝʹÓá£Èç¹û´ËÖµ±»ÓÃÔÚÆäËûµÄÔªËØÉÏ£¬»á³ÊÏÖΪ "hidden"¡£
inherit
¹æ¶¨Ó¦¸Ã´Ó¸¸ÔªËؼ̳Рvisibility ÊôÐÔµÄÖµ¡£
2. display ÊôÐÔ¹æ¶¨ÔªËØÓ¦¸ÃÉú³ÉµÄ¿òµÄÀàÐÍ¡£
¿ÉÄܵÄÖµ
Öµ
ÃèÊö
none
´ËÔªËØ²»»á±»ÏÔʾ¡£
block
´ËÔªËØ½«ÏÔʾΪ¿é¼¶ÔªËØ£¬´ËÔªËØÇ°ºó»á´øÓл»Ðзû¡£
inline
ĬÈÏ¡£´ËÔªËØ»á±»ÏÔʾΪÄÚÁªÔªËØ£¬ÔªËØÇ°ºóûÓл»Ðзû¡£
inline-block
ÐÐÄÚ¿éÔªËØ¡££¨CSS2.1 ÐÂÔöµÄÖµ£©
list-item
´ËÔªËØ»á×÷ΪÁбíÏÔʾ¡£
run-in
´ËÔªËØ»á¸ù¾ÝÉÏÏÂÎÄ×÷Ϊ¿é¼¶ÔªËØ»òÄÚÁªÔªËØÏÔʾ¡£
compact
CSS ÖÐÓÐÖµ compact£¬²»¹ýÓÉÓÚȱ·¦¹ã·ºÖ§³Ö£¬ÒѾ´Ó CSS2.1 ÖÐɾ³ý¡£
marker
CSS ÖÐÓÐÖµ marker£¬²»¹ýÓÉÓÚȱ·¦¹ã·ºÖ§³Ö£¬ÒѾ´Ó CSS2.1 ÖÐɾ³ý¡£
table
´ËÔªËØ»á×÷Ϊ¿é¼¶±í¸ñÀ´ÏÔʾ£¨ÀàËÆ <table>£©£¬±í¸ñǰºó´øÓл»Ðзû¡£
inline-table
´ËÔªËØ»á×÷ΪÄÚÁª±í¸ñÀ´ÏÔʾ£¨ÀàËÆ <table>£©£¬±í¸ñǰºóûÓл»Ðзû¡£
table-row-group
´ËÔªËØ»á×÷Ϊһ¸ö»ò¶à¸öÐеķÖ×éÀ´ÏÔʾ£¨ÀàËÆ <tbody>£©¡£
table-header-group
´ËÔªËØ»á×÷Ϊһ¸ö»ò¶à¸öÐеķÖ×éÀ´ÏÔʾ£¨ÀàËÆ <thead>£©¡£
table-footer-group
´ËÔªËØ»á×÷Ϊһ¸ö»ò¶à¸öÐеķÖ×éÀ´ÏÔʾ£¨ÀàËÆ <tfoot>£©¡£
table-row
´ËÔªËØ»á×÷Ϊһ¸ö±í¸ñÐÐÏÔʾ£¨ÀàËÆ <tr>£©¡£
table-column-group
´ËÔªËØ»á×÷Ϊһ¸ö»ò¶à¸öÁеķÖ×éÀ´ÏÔʾ£¨ÀàËÆ <colgroup>£©¡£
table-column
´ËÔªËØ»á
Ïà¹ØÎĵµ£º
Èç¹û°ÑÎÄ×ÖºÍͼƬ·ÅÔÚͬһ¸öͼ²ãµÄ£¬ÎÄ×Ö¿ÉÒÔ×öµ½¾ÓÖУ¬µ«ÊÇͼƬ¾Í²»ÄÜ£¬ÒòΪͼƬĬÈÏÊÇ×óÉÏ¶ÔÆëµÄ£¡Õâ¾ÍÊÇΪʲôÔÚÖÆ×÷µÄʱºò¿´µ½Í¼Æ¬
»á¿¿ÉϵÄÔÒò¡£Èç¹ûÄãÁͼƬ¾ÓÖÐÁË£¬ÎÄ×־ͻáÏà¶ÔÓÚͼƬÓÒÏÂ¶ÔÆëÁË£¡Èç¹ûÄãÏë2¸ö¶¼¾ÓÖеϰ£¬¾Í²»ÄܰÑËûÃÇ·ÅÔÚͬһ¸ödiv,»òÕßÄãÊÔÏÂ
°ÑËûÃÇ·ÅÔÚ2¸ödivÖУ¬»òÕßÒ»¸öͼƬ·ÅdivÖУ¬ÎÄ ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS±ß¿òÒõÓ°< ......
ÒÔÏÂÊÕ¼¯·ÖÏíµÄÊý¾Ýͼ±íµÄչʾЧ¹û£¬ÊÇÍêÈ«ÓÃhtmlºÍcssÀ´ÊµÏֵġ£Í¨¹ý×ÐϸÑо¿Ñ§Ï°ÕâЩ°¸Àý¶ÔÓÚÎÒÃÇѧϰcss»áÓкܴó°ïÖúµÄ¡£
1¡¢ÍêȫʹÓÃdiv¡¢spanºÍcssÖÆ×÷µÄÊý¾Ýͼ±í¡£
2¡¢ÓкܶàÓô¿cssÖÆ×÷µÄÊý¾Ýͼ±í£¬ÎҸоõÕâ¸öÊÇ×öµÄ×îÆ¯ÁÁµÄÒ»¸ö¡£
3¡¢Õâ¸öÏßÐÎÊý¾Ýͼ±íÍêÈ«»ùÓÚhtmlºÍcssÖÆ×÷µÄ£¬Ã»ÓÐÓ¦ÓÃjs¡£ÕâÑùµÄͼͼ±í¼ÓÔØ¿ì£ ......
Óà UL ÖÆ×÷²Ëµ¥ÏÖÔڷdz£Á÷ÐУ¬ÄÇÎÒÃÇÒ²´Õ´ÕÈÈÄÖ£¬µÚÒ»½²¾Í˵˵Óà UL ÖÆ×÷µ¼º½²Ëµ¥µÄ·½·¨£¬ÕâÒ»½²ÊÇÈëÃŰ棬ֻÊÇʵÏÖ»ù±¾¹¦ÄÜ£¬»¶Ó¸÷λ·¢²¼×Ô¼ºµÄʵÏÖ·½Ê½¡£
ÎÒÃÇÏȶ¨Ò»Ï HTML ´úÂ룺
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="h ......