在撰寫網頁的時候,大家都知道要透過<br/>來讓文字換行,,不然文字就會全部擠在同一行。不過可能也會發現,如果網頁設定的是<section>,那麼即使沒有換行符也會自動換行。其實這就是block和inline的差異,以下就來看看這兩種差在哪裡吧。
首先我們開啟一個HTML檔案試試看吧,這裡不從頭開始寫,而是先從http://example.com/複製網頁原始碼試試看。

複製這個原始碼到新的檔案,另存為html檔,用瀏覽器開啟就會看到一樣的網頁囉。
在這裡我們先添加幾個超連結進去看看。

這裡先不指定連結位置,先看看效果就好。這時候整理一下網頁,果然出現了三個超連結在底部。

首先在這裡就可以看出差異了,網頁中間的部分在HTML裡面是包在<div>裡面的,而超連結和<div>之間並沒有換行符,不過卻會自動換行;然而三個超連結之間並不會自動換行。
這是因為一個是區塊block,一個是inline。像是<div></div>這樣包裹一整段內容的CSS設定稱為block,這就像是拼圖一樣,透過設定block產生了一整個獨立的區域出來,而每一個區塊之間都會自動保持距離。
而超連結則是直接將CSS代碼輸入在HTML裡面,這種方式稱作inline,inline之間並不會自動換行。
不過如果將inline的東西放入block裡面,那麼就會產生一樣的效果。這裡就試試看用<li>將每一個超連結都包起來吧。

<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
在看看效果,果然可以發現三個超連結自動換行了,這就是block的應用。

那麼有沒有將block轉換成inline的方式呢?有的,可以透過CSS選取器,讓block的內容強迫用inline的方式呈現。嘗試在head的部分加入display:inline;試試看。

li {
display: inline;
}
果然,超連結又變成並排顯示的樣子了。

以上就是今天的內容,關於block和inline的應用和轉換方式就是這樣。