小編今天的分享主題是顯示屬性、列表屬性、定位屬性；

首先，我們先來了解一下關於顯示屬性

顯示屬性，它表示了一個框或者盒的表現，具有2層含義，分別是顯示方式和顯示效果；

1.顯示方式，即display屬性，具體是指一個框的表示形式，它自己固定的取值候選：

a)none：表示讓這個元素不顯示，隱藏起來，同時這個元素是不佔據這個文檔的空間的。

b)block：表示讓這個元素以塊級元素的形式顯示，在它後面的元素是會另外起一行，這個時候的元素是可以自己定義它的高度和寬度的。如果你想設置一個行內元素的高和寬，或者想讓一個隱藏了的元素顯示的話，這個方式就是非常好的。

c）inline：表示讓這個元素以行內元素的形式顯示，這個時候後面的元素會緊跟着前面的元素，並列顯示，同事也不能設置高度和寬度。

d）inline-block：表示讓這個元素以行內塊的形式顯示，其實就是一個行內元素，不過這個行內元素可以設置高度和寬度了。如果你不想讓這個元素的後面元素另外起一行又想改變這個元素的高度和寬度，那這個方法是極好的。

以上4個候選取值，就是display的取值詳解，語法規範就是display：
none/block/inline/inline-block，具體的按照實實際開發需求。練習的時候，可以每個都試一試，看看它們分別是什麼效果。

2.顯示效果，就是元素顯示了之後，再設置它的一些效果，先簡單的介紹4個效果：

a）visibility屬性，即表示這個元素的顯示與否，取值有visible（顯示的，也是默認值）、hidden（不顯示），這個屬性看似和上訴的顯示方式挺像的，它們有一個非常明顯的區別就是，display為none時，它是不佔據空間的；而visibility為hidden時，它雖然是看不見的，但是它會佔據頁面空間，可能會影響文檔的排版問題，這需要特別的注意。

b）opacity屬性，即表示這個元素的透明度，取值範圍就是0至1，其中0表示完全透明，1表示完全不透明，記住取值越大，越不透明。

c）vertical-align屬性，即表示這個元素的垂直對齊，取值可以有：top/middle/bottom baseline；基線對齊

d）cursor屬性即光標，表示當你的鼠標在經過這個元素時候，鼠標顯示的樣式；取值有：pointer(手的形狀)、default(默認)、crosshair(顯示為“+”)、text(顯示為“I”)、wait(顯示為等待)、help（顯示為“？”）