CSS學習筆記05 CSS display屬性
HTML標記一般分為塊標記和行內標記兩種類型，它們也稱塊元素和行內元素。
塊元素
每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁布局和網頁結構的搭建。並且塊級元素容器可以容納多個嵌套的塊級標簽或者行內標簽。常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標記是網頁制作中最常用的塊元素。
行內元素
行內元素不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構的樣式。行內元素不能嵌套塊級標簽，只能嵌套其他的行內標簽。常見的行內元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>標記是最常用的行內元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 </head> 7 <body> 8 <div>我是一個div</div> 9 <span>我是一個span</span> 10 <strong>我是一個strong</strong> 11 </body> 12 </html>
要是想讓strong標簽像div標簽一樣獨占一行可不可以呢，答案是當然可以。這就需要用到display這個屬性了，比較常用的值有none、inline、block與inline-block，這幾個值得解釋如下
none ：此元素不被顯示，在文檔中被移除。
block ：此元素按塊級元素顯示：前後帶換行符，自己占一行。內聯元素 → 塊元素
inline ：此元素按內聯元素顯示：1個挨著1個。塊元素 → 內聯元素
inline-block：按行內標簽進行排版，但是可以設置寬高，而且高度可以影響行高
block屬性
現在讓我們把上面的strong元素變成塊級元素試試
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 7 <style type="text/css"> 8 strong { 9 display: block; 10 } 11 </style> 12 </head> 13 <body> 14 <div>我是一個div</div> 15 <span>我是一個span</span> 16 <strong>我是一個strong</strong> 17 </body> 18 </html>
inline屬性
可以看到設置了display屬性為block之後，strong標簽就獨占一行了，相反如果讓div元素變成行內元素的話，就需要用到display屬性的inline值了
1 <style type="text/css"> 2 strong { 3 display: block; 4 } 5 6 div { 7 display: inline; 8 } 9 </style>
可以看到div標簽與span在同一行顯示了
inline-block屬性
再來看看inline-block值，字面意思是行內塊級元素，從最開始的介紹得知行內元素的寬高只能靠自身的內容來支撐，這裏先給span標簽設置寬高
span { width: 200px; height: 100px; background-color: red; }
從瀏覽器的運行結果來看，給span設置的寬高並沒有起到任何的作用，現在給span設置下display屬性inline-block看看
span { width: 200px; height: 100px; background-color: red; display: inline-block; }
none屬性
可以看到設置的寬高都起作用了，有了塊級元素的假象，不過這裏的span標簽還是一個行內元素。有時候，我們需要暫時性的隱藏頁面中的元素，這時就可以設置元素的display屬性為none，例如需要隱藏頁面中的div元素
div { display: none; }
需要註意的是，CSS中的visibility屬性也可以控制頁面元素的顯示與否
div { visibility: hidden; }
通過瀏覽器的顯示結果可以很容易得出下面的結論
display: none;的設置是直接把當前標簽從頁面中直接移除了，不影響頁面的布局，而visibility: hidden這個設置只是表示元素在頁面上不顯示，但還是占用頁面的空間。
CSS學習筆記05 CSS display屬性