什麼是display(顯示模式)?
每一個html標籤元素都會有一個預設的display屬性,標籤基本上大部分可分為兩種顯示模式,一種是行內元素(inline),另一種為區塊元素(block),我們可以在CSS內加入display來賦予新的屬性,以改變其原本特性,利用它來呈現我們想要的排版。
誰是區塊元素(block)? 誰是行內元素(inline)?
在使用並設定display屬性時,應了解標籤原本的屬性是區塊元素還是行內元素,以下為兩者常見的標籤:
常見區塊元素標籤:div、ul li、p、h1
常見行內元素標籤:span、a、input、img
inline、block、inline-block差別在哪呢?
Inline行內元素
.元素可在同一行內呈現,圖片或文字均不換行,也不會影響其版面配置
.不可設定長寬,元素的寬高由它的內容撐開
另外,常聽到行內元素不能設定上下margin/padding,但並非不能設定,是排版不會隨著設定改變,字仍在行內,其他行並不會被推開。
css
.box_inline{
border:1px solid black;
padding:10px;
margin:10px;
background-color: yellow;
display:inline;}
由上圖範例1可以看到:
.設定display:inline
就會使得原本div的block改變成inline屬性
.雖有設定padding及margin,但元素上下並不會把其他行推開,但若設定框線或背景顏色就會發現事實上會使得其他行被蓋到。
Block區塊元素
.元素寬度預設會撐到最大,使其占滿整個容器
.可以設定長寬/margin/padding,但仍會占滿一整行
css
.box_block{
border:1px solid black;
padding:10px;
margin:10px;
background-color: yellow;
width: 150px;
display:block;}
/*div原屬性即為block*/..
..
..
範例2 可以發現雖然可以設定寬高/padding/margin,但其屬性仍會向右占滿容器,下個元素就會換行來呈現,並不會並排。
inline-block行內區塊
.以inline的方式呈現,但同時擁有block的屬性
.可設定元素的寬高/margin/padding
.可水平排列
css
.box_inline-block{
border:1px solid black;
padding:10px;
margin:10px;
background-color: yellow;
display:inline-block;}..
範例 3 可以發現設定display:inline-block
後,即可同時擁有block可設定寬高的屬性,但其排版仍像inline屬性,並不會向右占滿整個容器。
display還有很多其他屬性,我們就先介紹到這裡;}
以上範例也可以在codepen裡面自己嘗試↓↓↓↓↓
https://codepen.io/YTCLion/pen/eYYgyyg
參考資料:
https://www.w3schools.com/cssref/pr_class_display.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/display
http://zh-tw.learnlayout.com/display.html