web前端入門到實戰：css中display屬性

display屬性共有4個值：

blcok：塊級元素
inline-block：行內塊級元素
inline：行內元素
none：隱藏元素，不占據空間

1.塊級元素

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

<div>
    <p>盡可能的占滿父元素的寬度</p>
</div>

2.行內元素

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

3.行內塊級元素

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

<div>
    <span>行內元素</span>
</div>
<div>
    <span>行內塊級元素</span>
</div>
專門建立的學習Q-q-u-n： 784-783-012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

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>
<ul>
    <li>inline-block</li>
    <li>inline-block</li>
    <li>inline-block</li>
    <li>inline-block</li>
</ul>
</div>