display屬性是我們在前端開發中常常使用的乙個屬性，其中，最常見的有：
下面，我將按照順序將上述幾種屬性做乙個完整的講解。
none這個值表示此元素將不被顯示。比如，當我們在瀏覽網頁時，如果看到了某個煩人的廣告遮擋了我們的實現，更為可氣的是，它還沒有關閉的選項，這時（以chrome為例），我們就可以按下f12，開啟開發者工具，點選element，然後使用左上角的選擇工具選中想要刪除的廣告，可以看到element中會有高亮的一行或幾行**，右鍵，點選add attribute，然後輸入：style="display:none"，這時就可以發現廣告不見啦！ 當然display:none的用法絕不是專門用於這裡的，它還可以用於二級下拉列表的製作中將二級下拉列表先設定位display:none;,當滑鼠滑過一級選單時，再顯示出來（詳見《如何實現導航選單中的二級下拉列表》）。還可以用於登陸模態框的製作等等。
使用了display：block;之後， 此元素將顯示為塊級元素，此元素前後會帶有換行符。我們先來回顧以下塊級元素是什麼，他有什麼特點。
既然要區分塊級元素和行內元素，就得先說說標準文件流了。標準文件流：簡稱標準流，指的是在不使用其他的與排列和定位相關的css規則時，各種元素的排列規則。於是，我們將「各種元素」分為塊級元素和行內元素。（注：實際上還有空元素，如
用於換行，為一條水平線，這裡對空元素不做過多討論）
塊級元素特點：
行內元素特點：
ok!簡單回顧了塊級元素和行內元素之後，我們就可以進行下一步講解了。
應用：
如果我們經常會製作導航欄，這時就要使用ul li 和a組合的方式，但是是行內元素，我們無法設定它的寬和高，這時，就可以在的樣式表中，將之設定為display：block。這樣就可以設定它的寬和高，以及上下左右的margin和padding以達到我們想要的效果了。
效果如下：
此元素會被顯示為內聯元素，元素前後沒有換行符。在第二部分中，我們介紹了行內元素和塊級元素。顯然，display:inline的作用即可以將乙個塊級元素轉換成行內元素，那麼這個塊級元素將不能再設定寬和高以及上下方向的margin和padding。
display:inline-block是什麼呢？大家對這個屬性一定是不陌生的。根據名字，實際上我們就可以才出來它是結合了inline和block的特性於一身。即設定了inline-block屬性的元素既具有block元素可以設定width和height屬性的特性，又保持了inline元素不換行的特性。
舉例說明，我們之前在做橫向導航選單的時候，一般是用ul li a組合，然後將li設定為float，這樣就可以得到橫向的導航標籤了。而現在我們可以通過li和display:inline-block;來實現。
**如下：
效果圖如下：
確實實現了橫向的排列，實際上，也可以設定寬和高，大家可以自己嘗試。但是，很明顯有乙個問題---我將padding和margin的值都設定為0，為什麼他們之間還會有距離呢？實際上，這是inline元素自身出現的問題，而inline-block結合了inline和block屬性，當然也就存在這個問題了。這些空隙是空白符，在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合併成乙個。我們編寫**時寫的空格，換行都會產生空白符。所以自然而然的兩個元素之間會有空白符，如果將上述例子中的a標籤寫成一行，空白符消失，選單之間也就緊湊起來了。
解決方法：我們要明白空白符歸根結底是乙個字元，只要我們將ｕｌ中的字元的大小設定位０，那麼空白符也就不會存在了，但是這是a的字型大小也會繼承ul的字型大小，那麼就不見了，該怎麼辦，只需要將a中再設定乙個字型不為0的大小覆蓋
即可。
最終得到的效果圖如下：
我們還可以通過inline-block完成乙個常見的三列布局。
html**如下：
我是headercss**如下：我是left
我是center
我是right
我是footer
#header,#footer#content//解決inline元素產生的空白符問題最終效果圖如下：#left,#right#center//這裡一定要重新設定font-size。
規定應該從父元素繼承 display 屬性的值。舉例如下：
html**如下：
css**如下：
即我們先設定了id為parent的元素的display屬性值為inline-block，然後將其子元素的display屬性值設定為inherit（繼承），於是，子div的display屬性值繼承了父元素的display屬性值為inline-block。（注意，我在id為parent的div元素中設定了font-size:0px;這樣可以有效解決由inline元素帶來的空白符問題。）
CSS中Visibility和Display的區別
大多數人很容易將css屬性display和visibility混淆，它們看似沒有什麼不同，其實它們的差別卻是很大的。visibility屬性用來確定元素是顯示還是隱藏，這用visibility visible hidden 來表示，visible表示顯示，hidden表示隱藏。當visibility...
iOS開發中 selector的理解與應用
selector selector 是什麼？1一種型別 sel 2代表你要傳送的訊息 方法 跟字串有點像,也可以互轉.nsselectorfromstring nsselectorfromstring 3可以理解為類似函式指標的東西 是能讓objective c動態呼叫方法的玩意.是 object ...
Vue中slot的理解與實際應用
最近重新回歸了前端開發，在開發過程中發現在元件封裝過程中slot使用頻率相當的高，像比較主流的element ui也是提供了不少的插槽來幫助使用者來更靈活的開發，本著學習知識以及和大家一起共同提高的態度，把自己對於slot元件的理解寫成文章和大家一起分享。如果對於slot的基本概念已經十分了解了，可...