¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª
display ÊôÐÔÊÇÓÃÓÚ¿ØÖƲ¼¾ÖµÄ×îÖØÒª µÄ CSS ÊôÐÔ¡£
¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª
display ÊôÐԹ涨ÊÇ·ñ/ÈçºÎÏÔʾԪËØ¡£
ÿ¸ö HTML ÔªËض¼ÓÐÒ»¸öĬÈ쵀 display Öµ,¾ßÌåÈ¡¾öÓÚËüµÄÔªËØÀàÐÍ¡£´ó¶àÊýÔªËصÄĬÈÏ display ֵΪ block »ò inline¡£
¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª
¿é¼¶ÔªËØ×ÜÊÇ´ÓÐÂÐпªÊ¼,²¢Õ¼¾Ý¿ÉÓõÄÈ«²¿¿í¶È(¾¡¿ÉÄÜÏò×óºÍÏòÓÒÉìÕ¹)¡£
¿é¼¶ÔªËصÄһЩÀý×Ó:
ÄÚÁªÔªËز»´ÓÐÂÐпªÊ¼,½öÕ¼ÓÃËùÐèµÄ¿í¶È¡£
ÐÐÄÚÔªËصÄһЩÀý×Ó:
display:none; ͨ³£Óë JavaScript Ò»ÆðʹÓÃ,ÒÔÒþ²ØºÍÏÔʾԪËØ,¶øÎÞÐèɾ³ýºÍÖØд´½¨ËüÃÇ¡£Èç¹ûÄúÏëÖªµÀÈçºÎʵÏÖ´ËÄ¿±ê,Çë¹Ø×¢ÎÒ,ºóÐø»á¸üÐÂÏà¹ØÎÄÕ¡£
ĬÈÏÇé¿öÏÂ,<script>ÔªËØʹÓÃdisplay:none;¡£
¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¨C
ÈçÇ°ËùÊö,ÿ¸öÔªËض¼ÓÐÒ»¸öĬÈÏ display Öµ¡£µ«ÊÇ,Äú¿ÉÒÔ¸²¸ÇËü¡£
½«ÐÐÄÚÔªËظü¸ÄΪ¿éÔªËØ,·´Ö®ÒàÈ»,¶ÔÓÚʹҳÃæÒÔÌض¨·½Ê½ÏÔʾͬʱÈÔ×ñÑ Web ±ê×¼ºÜÓÐÓá£
Ò»¸ö³£¼ûµÄÀý×ÓÊÇΪʵÏÖˮƽ²Ëµ¥¶øÉú³ÉÐÐÄÚµÄ <li>ÔªËØ:
li {
display: inline;
}
×¢Òâ:ÉèÖÃÔªËØµÄ display ÊôÐÔ½ö»á¸ü¸ÄÔªËصÄÏÔʾ·½Ê½,¶ø²»»á¸ü¸ÄÔªËصÄÖÖÀà¡£Òò´Ë,´øÓÐ display:block; µÄÐÐÄÚÔªËز»ÔÊÐíÔÚÆäÖаüº¬ÆäËû¿éÔªËØ¡£
ÏÂÀý½« ÔªËØÏÔʾΪ¿éÔªËØ:
span {
display: block;
}
ÏÂÀý½« ÔªËØÏÔʾΪ¿éÔªËØ:
a {
display: block;
}
Äã¿ÉÒÔ×Ô¼ºÊÔÒ»ÊÔ,ÉèÖÃdisplay:block;ºóµÄÐÐÄÚÔªËز»ÄܸıäÆäÔªËØÖÖÀà,Òò´Ë²»ÄÜÔÚÐÐÄÚÔªËØÖÐǶÌ׿éÔªËØ.
¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¨C
ͨ¹ý½« display ÊôÐÔÉèÖÃΪ none ¿ÉÒÔÒþ²ØÔªËØ¡£¸ÃÔªËؽ«±»Òþ²Ø,²¢ÇÒÒ³Ã潫ÏÔʾΪºÃÏñ¸ÃÔªËز»ÔÚÆäÖÐ,´ó¸ÅÒâ˼ÊÇ:ÉèÖÃdisplay:none;ºóµÄÔªËØ,½«²»ÔÚÕ¼¾ÝÔÀ´µÄ¿Õ¼ä,ÓпÉÄÜ»áÓ°Ïì½çÃæµÄÕûÌå²¼¾Ö.
visibility:hidden;Ò²¿ÉÒÔÒþ²ØÔªËØ¡£
µ«ÊÇ,¸ÃÔªËØÈÔ½«Õ¼ÓÃÓë֮ǰÏàͬµÄ¿Õ¼ä¡£ÔªËؽ«±»Òþ²Ø,µ«ÈÔ»áÓ°Ïì²¼¾Ö:´ó¸ÅÒâ˼ÊÇÉèÖÃvisibility:hidden;ºóµÄÔªËØÈÔ½«Õ¼¾ÝÔÀ´µÄ¿Õ¼ä.
Äã¿ÉÒÔÇ××ÔÊÔÒ»ÊÔ:´úÂëÈçÏÂ:
<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
float: left;
text-align: center;
width: 185px;
border: 1px solid gray;
margin: 4px;
padding: 6px;
}
button {
width: 100%;
}
</style>
</head>
<body>
<h1>display:none Óë visiblity: hidden µÄÇø±ð</h1>
<p><b>visibility:hidden</b> Òþ²ØÔªËØ,µ«ÈÔÕ¼¾Ý²¼¾ÖÖеĿռ䡣</p>
<p><b>display:none</b> ´ÓÎĵµÖÐɾ³ýÔªËØ¡£Ëü²»»áÕ¼¾ÝÈκοռ䡣</p>
<div class="imgbox" id="imgbox1">Box 1<br>
<img src="/i/css/imgbox-1.gif" alt="Box 1" style="width:100%">
<button ¦Ïnclick="removeElement()">ɾ³ý</button>
</div>
<div class="imgbox" id="imgbox2">Box 2<br>
<img src="/i/css/imgbox-2.gif" alt="Box 2" style="width:100%">
<button ¦Ïnclick="changeVisibility()">Òþ²Ø</button>
</div>
<div class="imgbox">Box 3<br>
<img src="/i/css/imgbox-3.gif" alt="Box 3" style="width:100%">
<button ¦Ïnclick="resetElement()">ÖØÖÃËùÓÐ</button>
</div>
<script>
function removeElement() {
document.getElementById("imgbox1").style.display = "none";
}
function changeVisibility() {
document.getElementById("imgbox2").style.visibility = "hidden";
}
function resetElement() {
document.getElementById("imgbox1").style.display = "block";
document.getElementById("imgbox2").style.visibility = "visible";
}
</script>
</body>
</html>
Äã¿ÉÒÔͨ¹ýµã»÷ɾ³ý°´Å¥´Ó¶øÀ´¹Û²ìBox1¼°½çÃæ²¼¾ÖµÄ±ä»¯,ÓÉÓÚBox1ÉèÖÃdisplay:none;ºó½«²»ÔÚÕ¼¾Ý½çÃæ¿Õ¼ä,Òò´ËÉèÖÃÁ˸¡¶¯(float:left;)µÄBox2ºÍBox3µÄÔªËؽ«Ïò×óÒƶ¯Õ¼Âú¿Õ¼ä¡£
µã»÷Òþ²Ø°´Å¥Ä㽫·¢ÏÖBox2µÄλÖò¢Ã»Óб»Box3Õ¼¾Ý,ÒòΪBox2ÉèÖÃÁËvisibility:hidden;ÊôÐÔ¡£
¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¡ª¨C
ÊôÐÔ | ÃèÊö |
---|---|
display | Ö¸¶¨Ó¦ÈçºÎÏÔʾԪËØ¡£ |
visibility | Ö¸¶¨ÔªËØÊÇ·ñÓ¦¸Ã¿É¼û¡£ |
±¾ÎÄʵÀý½²ÊöÁËjspÖÐpageÖ¸ÁîÓ÷¨¡£·ÖÏí¸ø´ó¼Ò¹©´ó¼Ò²Î¿¼¡£¾ßÌåÈçÏ£º Ò»¡¢JSP ...
Ç°ÑÔ ¹ØÓÚWindow£¬ÄãÁ˽â¶àÉÙÄØ?¿´¿´ÏÂÃæÕâЩÎÊÌâÄ㶼ÄÜ´ðÉÏÀ´Âð¡£ Èç¹ûÄãÓöµ½Õâ...
Ò»¡¢MVC MVCģʽµÄÒâ˼ÊÇ£¬Èí¼þ¿ÉÒÔ·Ö³ÉÈý¸ö²¿·Ö¡£ ÊÓͼ£¨View£©£ºÓû§½çÃæ¡£ ¿Ø...
git¹¤×÷Çø£¬ÔÝ´æÇø£¬°æ±¾¿âÖ®¼äµÄ¹Øϵ£º ÎÒÃǽ¨Á¢µÄÏîÄ¿Îļþ¼Ð¾ÍÊǹ¤×÷Çø£¬ÔÚ³õ...
Ò»¡¢¼ò½é ±¾Éè¼ÆΪӲ±ÒͼÏñʶ±ðͳ¼Æ×°ÖÃͨ¹ýÊýÂëÏà»ú»ñȡƽÆÌÎÞÖصþ¶Ñ»ýµÄÓ²±ÒµÄ...
´Ó¹¦ÄܲâÊÔ¡¢ÐÔÄܲâÊÔ¡¢½çÃæ²âÊÔ¡¢°²È«ÐÔ²âÊÔ¡¢Ò×ÓÃÐÔ¡¢¼æÈÝÐÔ²âÊÔ¡¢Õ𶯲âÊÔÆß...
Ê×ÏȸøÆË¿ËÅÆÖÐÿÕÅÅÆÉ趨һ¸ö±àºÅ£¬ÏÂÃæË㷨ʵÏֵıàºÅ¹æÔòÈçÏ£º u ºìÌÒ°´ÕÕ´Ó...
ÎÒÃÇÖªµÀ΢Èí½«»áÔÚ½ñÄê¸øWindows10¸ü»»È«ÐÂÉè¼ÆµÄUI£¬ÈÃWindows10µÄ½çÃæ¸ü¼ÓÕû...
´ó¼ÒºÃ£¬½ñÌìÎÒÃÇÀ´¼òµ¥µÄÁÄÒ»ÁÄ»º´æÎÊÌ⡣ʲôÊÇ»º´æÄØ?ËüÔÚϵͳÉè¼ÆÖÐÊÇÔÚÒ»¸ö...
½ñÈÕ¹úÄÚÁìÏȵÄÖÇÄÜÊý¾Ý·þÎñÔËÓªÉ̾õ·Ç¿Æ¼¼Íê³É½üÒÚÔªAÂÖÈÚ×Ê¡£±¾ÂÖÈÚ×ÊÓɺ͸ß×Ê...