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

display屬性共有4個值：

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

1.塊級元素

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

<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>