CSS：display屬性和position屬性的介紹

先介紹一下display屬性

1.display:none 表示該元素不存在，也不會顯示和佔用空間

2.display: inline表示該元素設置為行內元素，給元素設置寬高是沒有反應的

3.display: block 表示該元素設置為塊狀元素，可以自己設定寬度和高度；如果沒有給定寬度高度，則會繼承父元素的屬性，搞定一般以子元素的高度為準

4.display: list-item 表示該元素設置為列表來顯示

5.display:table 表示該元素會用塊級表格的方式來展示

6.display: inline-block 表示該元素既有inline的行內特性又有block的寬高特性（行內塊元素）

7.display:flexflex是一種彈性布局屬性，設為Flex布局以後，子元素的float、clear和vertical-align屬性將失效

接下來介紹介紹position屬性

1.position:static 這個是默認的屬性（塊級元素和行內元素都遵守各自的特性）

2.position:relative相對定位，原來的位置會保留，可以根據top，right，bottom，left來進行位置的變化

3.position:absolute絕對定位，設置了這個屬性后，原來的空間會被佔用，後面的元素會頂上來，該元素就會脫離文檔流；不管你設置的這個元素是塊級元素還是行內元素，只要給了這個屬性，該屬性就可以設置寬度和高度。如果父級元素設置了相對定位，那麼該元素就會相對父級來定位，如果父級元素沒有設置相對定位的話就再往上找，一直找不到，那麼該元素就會相對body來定位。

4.display:fixed固定定位，該屬性是相對於瀏覽器來定位的

如果有什麼什麼問題，歡迎打開下面的網站來共同學習交流經驗

http://www.mackxin.com/html/code.html

關注分享，體驗樂趣

分享是一種態度