CSS 布局 - display 屬性
————————————————————————————————————————
display 屬性是用于控制布局的最重要 的 CSS 屬性，
————————————————————————————————————————
display 屬性
display 屬性規定是否/如何顯示元素，
每個 HTML 元素都有一個默認的 display 值，具體取決于它的元素型別，大多數元素的默認 display 值為 block 或 inline，
————————————————————————————————————————
塊級元素（block element）
塊級元素總是從新行開始，并占據可用的全部寬度（盡可能向左和向右伸展），
塊級元素的一些例子：
- <div>
- <h1>
- <h6>
- <p>
- <form>
- <header>
- <footer>
- <section> ———————————————————————————————————————————
行內元素（inline element）
行內元素不從新行開始，僅占用所需的寬度，
行內元素的一些例子：
- <span>
- <a>
- <img>
–———————————————————————————————————————————
Display: none;
display:none; 通常與 JavaScript 一起使用，以隱藏和顯示元素，而無需洗掉和重新創建它們，如果您想知道如何實作此目標，請關注我，后續會更新相關文章，
默認情況下，<script>元素使用display:none;，
————————————————————————————————————————–
覆寫默認的 Display 值
如前所述，每個元素都有一個默認 display 值，但是，您可以覆寫它，
將行內元素更改為塊元素，反之亦然，對于使頁面以特定方式顯示同時仍遵循 Web 標準很有用，
一個常見的例子是為實作水平選單而生成行內的 <li>元素：
實體
li {
display: inline;
}
注意:設定元素的 display 屬性僅會更改元素的顯示方式，而不會更改元素的種類，因此，帶有 display:block; 的行內元素不允許在其中包含其他塊元素，
下例將 元素顯示為塊元素：
span {
display: block;
}
下例將 元素顯示為塊元素：
a {
display: block;
}
你可以自己試一試，設定display:block;后的行內元素不能改變其元素種類，因此不能在行內元素中嵌套塊元素.
————————————————————————————————————————–
隱藏元素 - display:none 還是 visibility:hidden？
通過將 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;屬性，
————————————————————————————————————————–
CSS Display/Visibility 屬性：
| 屬性 | 描述 |
|---|---|
| display | 指定應如何顯示元素， |
| visibility | 指定元素是否應該可見， |
好看的人都關注我了，你還在等什么呢！！點贊評論加關注，博主帶你上高速
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277049.html
標籤：其他
上一篇：javaScript執行背景關系