原始網址：http://www.w3schools.com/css/css_display_visibility.asp
翻譯：
CSS Layout - The display Property
display 屬性是控制佈局的最重要的 CSS 屬性。
The display Property
display 屬性用以指定元素如何被顯示。
根據不同的元素類型，每一個 HTML 元素都有一個默認的顯示（display）值。絕大多數的元素的默認顯示值是 block 或 inline 。
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
background-color: #4caf50;
border: 1px solid #a6d8a8;
color: white;
cursor: pointer;
font-size: 16px;
margin: auto;
padding: 10px;
text-align: center;
}
#panel {
display: none;
cursor: auto;
}
.w3-codespan {
background-color: #f1f1f1;
color: crimson;
font-size: 110%;
padding-left: 4px;
padding-right: 4px;
}
</style>
<script>
function myShowFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</head>
<body>
<p class="flip" onclick="myShowFunction()">Click to show panel</p>
<div id="panel">
<p>This panel contains a <div> element, which is hidden by default (<code class="w3-codespan">display: none</code>).</p>
<p>It is styled with CSS, and we use JavaScript to show it (change it to (<code class="w3-codespan">display: block</code>).</p>
</div>
</body>
</html>Block-level Elements
塊級元素總是以新行起始並且將整行據爲己有（沿左右方向無限延伸）。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #a6d8a8;
}
</style>
</head>
<body>
<div>The <div> element is a block-level element.</div>
</body>
</html>常見的塊級元素如下所示：
<div><h1>-<h6><p><form><header><footer><section>
Inline Elements
行內元素不以新行起始，它只佔據必要的寬度。
常見的行內元素如下所示：
<span><a><img>
Display: none;
我們通常使用 JavaScript 來控制 display: none; 以隱藏或顯示元素而非對元素進行刪除和再創建。請參考本頁面中的示例以瞭解如何實現元素的隱藏或顯示。
<script> 元素使用 display: none; 作爲默認值。
Override The Default Display Value
正如上文提及的那樣，每一個元素都有一個默認顯示（display）值。但是，我們可以將其覆蓋。
將行內元素變更爲塊級元素（反之）對製作特定的頁面是非常有用的，並且使用這種方式是遵守 web 標準的。
常用的示例是變更 <li> 元素爲行內元素以顯示水平菜單：
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>| 注意：設置 display 屬性只是變更了元素的顯示方式而非變更了元素的類型。因此，以 display: block; 修飾的行內元素是不能包裹塊級元素的。 |
下列示例演示了將 <span> 元素作爲塊級元素來使用：
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>A display property with a value of "block" results in</span>
<span>a line break between the two elements.</span>
</body>
</html>下列示例演示了將 <a> 元素作爲塊級元素來使用：
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
}
</style>
</head>
<body>
<p>Display links as block elements:</p>
<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>
</body>
</html>Hide an Element - display:none or visibility:hidden?
設置 display 屬性爲 none 可以隱藏當前元素。元素被隱藏之後，頁面在顯示時如同該元素不存在：
h1.hidden {
display: none;
}visibility: hidden; 也可以隱藏元素。
然而，被隱藏的元素仍然要佔據相同的空間。雖然元素將被隱藏，但是仍然會影響佈局：
h1.hidden {
visibility: hidden;
}使用 display: none; 和 visibility: hidden; 的示例對比：
<!-- iframe_a.html -->
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
</body>
</html><!-- iframe_b.html -->
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<iframe src="iframe_a.html" width="49.5%"></iframe>
<iframe src="iframe_b.html" width="49.5%"></iframe>
</div>
</body>
</html>