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

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

顯示屬性，它表示了一個框或者盒的表現，具有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（顯示為“？”）

其次，我們了解一下列表屬性

列表，就是講這部分的內容按照一定的順序排列，可以是橫向的也可以是縱向的，她有列表樣式屬性、列表項圖像屬性、列表項位置、列表綜合屬性。

1.列表樣式即list-style-type，分為有序列表、無序列表，有序的列表是按照數值排序、羅馬數字排序，無序列表就是列表項為實心圓、空心圓、實心矩形。

無序列表的取值為：none（無標記）、disc(實心圓)、circle（空心圓）、square（實心矩形）

有序列表的取值為：none（無標記）、decimal（數字）、lower-roman(小寫的羅馬數字)、upper-roman(大寫的羅馬數字)

2.列表項圖像即list-style-image，表示列表項圖像不想取值為數字或者實心圓等時，可以自定義一個圖像；語法規范：list-style-image:url(文件路徑)

3.列表項位置即list-style-position，就是li前面標識的位置，取值有：outside（標識在li外）、inside（標識在li內）

4.列表的總和屬性即list-style，語法規范：list-style:type url position 實例list-style:circle url(xxxx.jpg) inside

以上就是列表的一些樣式了，可以自己打打代碼，看看具體的效果

最后，我們了解一下定位屬性

定位 position，就是元素在文檔的位置，當需要對元素的位置進行修改時，就需要用到定位啦！

定位分為：普通流定位、浮動定位、相對定位、絕對定位、固定定位

定位的屬性就是：position，取值有：static(靜態定位即普通流定位)、relative(相對定位)、absolute（絕對定位）、fixed(固定定位)

display屬性在使用的時候，需要配合topbottomleftright屬性使用，表示偏移量。

z-index屬性，表示當多個元素重疊的時候，誰在前面誰在后面，值越大越靠近用戶

接下來詳解各個定位：

1.相對定位：就是這個元素相對于自己本身的位置偏移指定的量數；具體的實現方式(二步曲)就是先定義定位方式，再定義指定偏移量：即display：relative；lefttopright：xxpx；常常用于彈出菜單的實現

2.絕對定位：就是這個元素相對了已經定義為相對定位的最近的父級；實現的方式同上，display為absolute，常用的場景非常多。

3.固定定位：就是將元素固定在網頁的某個位置處，不跟隨滾動條發生滾動；實現方式同上，display為fixed，常用于網頁固定的小廣告，多數情況下是相對與body實現固定定位的。