css display屬性

display屬性共有4個值：
blcok：塊級元素
inline-block：行內塊級元素
inline：行內元素
none：隱藏元素，不占據空間

1.塊級元素

常見的塊級元素有div,p,ul,ol,li,h1~h6等
塊級元素會默認占滿父元素的寬度且獨占一行

<div style="border:1px solid red;width: 400px;">
    <p style="background-color: aquamarine">盡可能的占滿父元素的寬度</p>
</div>

2.行內元素

常見的行內元素有span,a等，他的寬度完全由內容撐開，不能為其設置寬高。
除非父元素一行放滿了，行內元素不然不會換行
行內元素受父元素的text-align的影響，父元素設置text-align：center，行內元素會居中顯示
行內元素受父元素的white-space的影響，父元素設置white-space：nowrap，行內元素將不會換行

3.行內塊級元素

行內塊級元素可以像跨級元素一樣設置寬高
常見的行內元素有input,textarea,img等
行內塊級元素如果不設置寬高的話，他的大小默認由內容或者說子元素撐開。它的特性介於塊級元素與行內元素之間
行內塊級元素一樣受父元素的text-align的影響，父元素可以設置父元素的text-align來決定他的對齊方式
行內塊級元素素受父元素的white-space的影響，父元素設置white-space：nowrap，行內塊級元素將不會換行

<div style="text-align: center">
    <span>行內元素</span>
</div>
<div style="text-align: center">
    <span style="display: inline-block">行內塊級元素</span>
</div>

4.實際運用

在輪播圖中，最外層的容器寬度是固定的，且overflow:hidden
第二層容器ul的寬度則是它子元素的寬度之和，因為子元素的個數不確定，所以不能在css中設定確定的寬度值
通常我們都是利用js計算出它子元素的寬度之和再賦予ul元素，今天這個例子我們不用js，利用inline-block寬度由子元素撐開的特性,讓ul的寬度由子元素撐開

設置ul的樣式display:inline-block,同時為了讓所有的li標簽不換行，設置white-space: nowrap
為了能讓ul的white-space: nowrap生效，li標簽需要設置display:inline-block
要消除代碼換行造成的間隔，可以讓父元素的字體大小設置為0，,然后子元素里面再設置字體大小即可

<div style="width: 800px;overflow: hidden;">
<ul style="display: inline-block;white-space:nowrap;font-size: 0px;">
    <li style="display: inline-block;font-size: 16px;">inline-block</li>
    <li style="display: inline-block;font-size: 16px;">inline-block</li>
    <li style="display: inline-block;font-size: 16px;">inline-block</li>
    <li style="display: inline-block;font-size: 16px;">inline-block</li>
</ul>
</div>