display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）
生活随笔
收集整理的這篇文章主要介紹了
display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這段時間一直對display屬性的block,inline,none和visibility屬性的visible，hidden一直很模糊，總覺得很難理解，通過下面這個實例，就可以很好的牢記這幾者之間的區別。
<!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>
????<title>Untitled?Page</title>
</head>
<body>
????<h1>display?屬性分別為block,?inline,?none?值及使用visibility:?hidden;的情況調試</h1>
????<P><SPAN?id="oSpan"?style="background-color:?#CFCFCF;">This?is?a?SPAN</SPAN>?in?a?sentence.</P>
????<P>
????????<input?type=button?value="Inline"?onclick="oSpan.style.display='inline'">
????????<input?type=button?value="Block"?onclick="oSpan.style.display='block'">
????????<input?type=button?value="None"?onclick="oSpan.style.display='none'">
????????<input?type=button?value="Hidden"?onclick="oSpan.style.visibility='hidden'"><input?type=button?value="Visible"?onclick="oSpan.style.visibility='visible'">
????</P>
????<UL>
????????<LI>將元素設為?block，會在該元素后換行。</LI>
????????<LI>將元素設為?inline，會消除元素換行。</LI>
????????<LI>將元素設為?none，隱藏該元素內容。</LI>
????</UL>
</body>
</html>
打開該html頁面,顯示如下圖：
點擊Inline,Block,None,Hidden,Visible按鈕，將會出現不同的結果，如下：
通過對比以上的顯示，可以對display屬性的block,inline,none和visibility屬性的visible，hidden一目了然！
<!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>
????<title>Untitled?Page</title>
</head>
<body>
????<h1>display?屬性分別為block,?inline,?none?值及使用visibility:?hidden;的情況調試</h1>
????<P><SPAN?id="oSpan"?style="background-color:?#CFCFCF;">This?is?a?SPAN</SPAN>?in?a?sentence.</P>
????<P>
????????<input?type=button?value="Inline"?onclick="oSpan.style.display='inline'">
????????<input?type=button?value="Block"?onclick="oSpan.style.display='block'">
????????<input?type=button?value="None"?onclick="oSpan.style.display='none'">
????????<input?type=button?value="Hidden"?onclick="oSpan.style.visibility='hidden'"><input?type=button?value="Visible"?onclick="oSpan.style.visibility='visible'">
????</P>
????<UL>
????????<LI>將元素設為?block，會在該元素后換行。</LI>
????????<LI>將元素設為?inline，會消除元素換行。</LI>
????????<LI>將元素設為?none，隱藏該元素內容。</LI>
????</UL>
</body>
</html>
打開該html頁面,顯示如下圖：
點擊Inline,Block,None,Hidden,Visible按鈕，將會出現不同的結果，如下：
通過對比以上的顯示，可以對display屬性的block,inline,none和visibility屬性的visible，hidden一目了然！
轉載于:https://www.cnblogs.com/wangtory/archive/2007/11/02/947003.html
總結
以上是生活随笔為你收集整理的display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]American Dream 是指
- 下一篇： 世界杯十六强合影壁纸