display詳解

css中的display屬性

　　display屬性是咱們在前端開發中經常使用的一個屬性，其中，最多見的有：

• none
• block
• inline
• inline-block
• inherit

　　下面，我將按照順序將上述幾種屬性作一個完整的講解。

第一部分：display:none

　　none這個值表示此元素將不被顯示。好比，當咱們在瀏覽網頁時，若是看到了某個煩人的廣告遮擋了咱們的視線，更爲可氣的是，它尚未關閉的選項，這時（以chrome爲例），咱們就能夠按下F12，打開開發者工具，點擊element，而後使用左上角的選擇工具選中想要刪除的廣告，能夠看到element中會有高亮的一行或幾行代碼，右鍵，點擊Add Attribute，而後輸入：style="display:none"，這時就能夠發現廣告不見啦！ 固然display:none的用法毫不是專門用於這裏的，它還能夠用於二級下拉菜單的製做中將二級下拉菜單先設置位display:none;,當鼠標滑過一級菜單時，再顯示出來（詳見《如何實現導航菜單中的二級下拉菜單》）。還能夠用於登錄模態框的製做等等。

 

第二部分：display:block

　　使用了display：block;以後， 此元素將顯示爲塊級元素，此元素先後會帶有換行符。咱們先來回顧如下塊級元素是什麼，他有什麼特色。

　　既然要區分塊級元素和行內元素，就得先說說標準文檔流了。標準文檔流：簡稱標準流，指的是在不使用其餘的與排列和定位相關的css規則時，各類元素的排列規則。因而，咱們將「各類元素」分爲塊級元素和行內元素。（注：實際上還有空元素，如<br>用於換行，<hr>爲一條水平線，這裏對空元素不作過多討論）

　　塊級元素特色：

• 老是以一個塊的形式表現出來，佔領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
• 能夠設置高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。
• 當寬度（width）缺省時，它的寬度時其容器的100%，除非咱們給它設定了固定的寬度。
• 塊級元素中能夠容納其餘塊級元素或行內元素。
• 常見的塊級元素由<p><div><h1><li>等等。
• 塊級元素的display屬性值默認爲block。

　　行內元素特色：

• 它不會單獨佔據一整行，而是隻佔領自身的寬度和高度所在的空間。若干同級行內元素會從左到右（即某個行內元素能夠和其餘行內元素共處一行），從上到下依次排列。
• 行內元素不能夠設置高度、寬度，其高度通常由其字體的大小來決定，其寬度由內容的長度控制。
• 行內元素只能設置左右的margin值和左右的padding值，而不能設置上下的margin值和上下的padding值。所以咱們能夠經過設置左右的padding值來改變行內元素的寬度。
• 常見的行內元素由<a><em><img>等等。
• 行內元素通常不能夠包含塊級元素。
• 塊級元素的display屬性值默認爲inline。

　　ok!簡單回顧了塊級元素和行內元素以後，咱們就能夠進行下一步講解了。

　　經過對一個行內元素設置display:　block;能夠將行內元素設置爲塊級元素，進而設置它的寬高和上下左右的padding和margin。　

應用：

　      若是咱們常常會製做導航欄，這時就要使用ul li 和a組合的方式，可是<a>是行內元素，咱們沒法設置它的寬和高，這時，就能夠在<a>的樣式表中，將之設置爲display：block。這樣就能夠設置它的寬和高，以及上下左右的margin和padding以達到咱們想要的效果了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<! 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

　　此元素會被顯示爲內聯元素，元素先後沒有換行符。在第二部分中，咱們介紹了行內元素和塊級元素。顯然，display:inline的做用便可以將一個塊級元素轉換成行內元素，那麼這個塊級元素將不能再設置寬和高以及上下方向的margin和padding。

　　

第四部分：display：inline-block

　　display:inline-block是什麼呢？你們對這個屬性必定是不陌生的。根據名字，實際上咱們就能夠纔出來它是結合了inline和block的特性於一身。即設置了inline-block屬性的元素既具備block元素能夠設置width和height屬性的特性，又保持了inline元素不換行的特性。

　　舉例說明，咱們以前在作橫向導航菜單的時候，通常是用ul li a組合，而後將li設置爲float，這樣就能夠獲得橫向的導航標籤了。而如今咱們能夠經過li和display:inline-block;來實現。

　　代碼以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<! 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的大小覆蓋

便可。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<! DOCTYPE  html> < html  lang="en"> < head >      < meta  charset="UTF-8">      < title >Title</ title >      < style >         < strong > ul{font-size: 0;}</ strong >          ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}          li{display: inline-block;border: thin solid red;< strong >font-size: 15px;</ strong >}      </ 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 >

　　最終獲得的效果圖以下：

 

　　

　　咱們還能夠經過inline-block完成一個常見的三列布局。

　　html代碼以下：

1 2 3 4 5 6 7

< div  id="header">我是header</ div > < div  id="content">      < div  id="left">我是left</ div >      < div  id="center">我是center</ div >      < div  id="right">我是right</ div > </ div > < div  id="footer">我是footer</ div >

　　css代碼以下：

1 2 3 4

#header,#footer{height: 50px;width:800px;margin:0 auto;background: #ccc;text-align: center;line-height: 50px;} #content{width:800px;height: 500px;margin: 0 auto;background: #aaa;< strong >font-size: 0;</ strong >}//解決inline元素產生的空白符問題 #left,#right{display: inline-block;width: 200px;height: 500px;background: #fadaac;font-size: 30px;} #center{display: inline-block;width: 400px;height: 500px;background: #dadada;< strong >font-size: 30px;</ strong >}//這裏必定要從新設置font-size。

　　最終效果圖以下：

第五部分：display:inherit

　　規定應該從父元素繼承 display 屬性的值。舉例以下：

html代碼以下：

1 2 3 4

< div  id="parent">      < div  id="first_son"></ div >      < div  id="second_son"></ div > </ div >

css代碼以下：

1 2 3

#parent{ < strong >display: inline-block;</ strong > font-size: 0; background: #cadafa;width: 400px;height: 300px;} #first_son{< strong >display: inherit;</ strong > background: #eaedac;width: 200px;height: 100px;} #second_son{< strong >display: inherit;</ strong > background: #da5dd8;width: 200px;height: 100px;}

效果圖以下：

　　

　　即咱們先設置了id爲parent的元素的display屬性值爲inline-block，而後將其子元素的display屬性值設置爲inherit（繼承），因而，子div的display屬性值繼承了父元素的display屬性值爲inline-block。（注意，我在id爲parent的div元素中設置了font-size:0px;這樣能夠有效解決由inline元素帶來的空白符問題。）