✍ 📁 🙈 🙉 🙊 : [CSS] display:none和visibility:hidden的差別

[CSS] display:none
visibility:hidden 的差別

<div id="Dis" style="width:100%; height:400px;border: 1px solid blue; " >
    <div id="box1">display:block</div>
    <div id="box2">display:block</div>
    <div id="box3">display:block</div>
    <div id="box4">display:block</div>
</div>
  
<label class="container">display:block
  <input type="radio" checked="checked" name="radio" value="block" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:none
  <input type="radio" name="radio" value="none" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inline
  <input type="radio" name="radio" value="inline" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inline-block
  <input type="radio" name="radio" value="inline-block" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:list-item
  <input type="radio" name="radio" value="list-item" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inline-table	
  <input type="radio" name="radio" value="inline-table" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>
<label class="container">display:inherit	
  <input type="radio" name="radio" value="inherit" onclick="Fflex(this)">
  <span class="checkmark"></span>
</label>

box1.innerHTML ="display:" + x.value;
box2.innerHTML ="display:" + x.value;
box3.innerHTML ="display:" + x.value;
box4.innerHTML ="display:" + x.value;
}

</script>
 
<style>
#box1, #box2, #box3, #box4{background-color: yellow;color:red;
     border: 1px solid blue;width:130px; height:80px;   
     padding: 5px;font-size: 20px ;display:block; }
</style>

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}
</style>

<div style="font-size: 30px;text-align:center;color:blue;
            font-weight: bold;">
css display:none or visibility:hidden<br>
 都可以隱藏欄位或物件 差別
</div>

<div style="font-size: 20px">
<pre> visibility:hidden  物件內容隱藏了,的位置保持著不會消失
 display:none       物件內容連原本所在的位置都一起被隱藏了    
</pre></div>

#txt{font-size:25px}

#ta{width:100%;font-size:25px}
#ta td{text-align:center}
</style>

x.style.visibility= vv ;
x.style.display= dd;

tt1.innerHTML = "id3.style.display=" + dd ;
tt2.innerHTML = "ccs     id3{ display:" + dd +" }";

tt3.innerHTML = "id3.style.visibility=" + vv;
tt4.innerHTML = "ccs     id3{visibility:" + vv +" }";

//alert( "dd="+dd +" vv="+vv +"---" +x.style.display) 
}
handleClick( "inline","visible") ;
</script>

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}
</style>
<br>
<center>
<label class="container">inline 
  <input type="radio" checked="checked" name="radio"
     onclick="handleClick('inline','visible')" >
  <span class="checkmark"></span>
</label>
<label class="container">block
  <input type="radio" name="radio"
     onclick="handleClick('block','visible')" >
  <span class="checkmark"></span>
</label>
<label class="container">none
  <input type="radio" name="radio"
     onclick="handleClick('none','visible')" >
  <span class="checkmark"></span>
</label>
<label class="container">visibility:hidden
  <input type="radio" name="radio"
     onclick="handleClick('inline','hidden')" >
  <span class="checkmark"></span>
</label>
</center>

Edit

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單