display顯示屬性理解
display顯示屬性理解
display屬性設定一個元素應如何顯示，是我們在前端開發中常常使用的一個屬性，其中，最常見的有：
目錄
- display:none;表示此元素將不被顯示。
- display：block;將元素顯示為塊元素。（又叫塊級元素）
- display:inline;將元素顯示為內聯元素。（又叫行內元素）
- display:inline-block;將元素顯示為內聯塊元素。
- display:inherit;規定應該從父元素繼承 display 屬性的值。
一.隱藏元素display:none;
主要區別visibility：hidden; 和display:none
display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
visibility屬性指定一個元素應可見還是隱藏。預設元素是可見的：visibility:visible;
比如，當我們在瀏覽網頁時，如果看到了某個煩人的廣告遮擋了我們的實現，更為可氣的是，它還沒有關閉的選項，這時（以chrome為例），我們就可以按下F12，開啟開發者工具，點選element，然後使用左上角的選擇工具選中想要刪除的廣告，可以看到element中會有高亮的一行或幾行程式碼，右鍵，點選Add Attribute，然後輸入：style="display:none"，這時就可以發現廣告不見啦！
二.塊元素display:block;
塊元素特性：
- 塊元素的display屬性值預設為block。
- 總是以一個塊的形式表現出來，佔領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
- 可以設定高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。支援margin：auto;
- 當寬度（width）預設時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。
- 塊元素中可以容納其他塊級元素或行內元素。
- 常見的塊元素由<p><div><h1><li>等等。
三.內聯元素display:inline;
內聯元素特性：
- 內聯元素的display屬性值預設為inline。
- 它不會單獨佔據一整行，而是隻佔領自身的寬度和高度所在的空間。若干同級內聯元素會從左到右（即某個行內元素可以和其他行內元素共處一行），從上到下依次排列。
- 內聯元素不可以設定高度、寬度，其高度一般由其字型的大小來決定，其寬度由內容的長度控制。
- 內聯元素只能設定左右的margin值和左右的padding值，而不能設定上下的margin值和上下的padding值。因此我們可以通過設定左右的padding值來改變行內元素的寬度。
- 常見的內聯元素由<a><em><img>等等。
- 內聯元素一般不可以包含塊級元素。
通過對一個行內元素設定display: block;可以將行內元素設定為塊級元素，進而設定它的寬高和上下左右的padding和margin。
應用：
如果我們經常會製作導航欄，這時就要使用ul li 和a組合的方式，但是<a>是行內元素，我們無法設定它的寬和高，這時，就可以在<a>的樣式表中，將之設定為display：block。這樣就可以設定它的寬和高，以及上下左右的margin和padding以達到我們想要的效果了。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{padding: 0;margin:0;list-style: none;}
- ul li{float: left;}
- a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
- </style>
- </head>
- <body>
- <ul>
- <li><a href="">1</a></li>
- <li><a href="">2</a></li>
- <li><a href="">3</a></li>
- <li><a href="">4</a></li>
- <li><a href="">5</a></li>
- </ul>
- </body>
- </html>
效果如下：
四.內聯塊元素display:inline-block;
內聯塊元素特性：
- 不強制換行,沒有寬度內容撐開寬高
- 支援寬、高、margin、padding，但不支援margin：auto;
- 內聯塊元素居中可使用父容器居中。
- 即使margin padding都設定為0；程式碼換行仍然會產生空白符，解決方法：設定父元素字型大小為0畫素
- IE6,7只支援inline元素設定為inline-block，其它型別元素均不可以
- 常見內聯塊元素
根據名字，實際上我們就可以才出來它是結合了inline和block的特性於一身。即設定了inline-block屬性的元素既具有block元素可以設定width和height屬性的特性，又保持了inline元素不換行的特性。舉例說明，我們之前在做橫向導航選單的時候，一般是用ul li a組合，然後將li設定為float，這樣就可以得到橫向的導航標籤了。而現在我們可以通過li和display:inline-block;來實現。
程式碼如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
- li{display: inline-block;border: thin solid red;}
- </style>
- </head>
- <body>
- <ul>
- <li><a href="">1</a></li>
- <li><a href="">2</a></li>
- <li><a href="">3</a></li>
- <li><a href="">4</a></li>
- <li><a href="">5</a></li>
- </ul>
- </body>
- </html>
效果圖如下：
確實實現了橫向的排列，實際上，也可以設定寬和高，大家可以自己嘗試。但是，很明顯有一個問題---我將padding和margin的值都設定為0，為什麼他們之間還會有距離呢？實際上，這是inline元素自身出現的問題，而inline-block結合了inline和block屬性，當然也就存在這個問題了。這些空隙是空白符，在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合併成一個。我們編寫程式碼時寫的空格，換行都會產生空白符。所以自然而然的兩個元素之間會有空白符，如果將上述例子中的a標籤寫成一行，空白符消失，選單之間也就緊湊起來了。
解決方法：我們要明白空白符歸根結底是一個字元，只要我們將ｕｌ中的字元的大小設定位０，那麼空白符也就不會存在了，但是這是a的字型大小也會繼承ul的字型大小，那麼就不見了，該怎麼辦，只需要將a中再設定一個字型不為0的大小覆蓋即可。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- ul{font-size: 0;}
- ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
- li{display: inline-block;border: thin solid red;font-size: 15px;}
- </style>
- </head>
- <body>
- <ul>
- <li><a href="">1</a></li>
- <li><a href="">2</a></li>
- <li><a href="">3</a></li>
- <li><a href="">4</a></li>
- <li><a href="">5</a></li>
- </ul>
- </body>
- </html>
最終得到的效果圖如下：
