內容目錄
display介紹
display是在設計CSS版面常用到的屬性之一，每個HTML標籤都會有一個預設的display值，大部分預設為block跟inline，以下針對常用到的display屬性禁行介紹跟示範
block
被稱為區塊元素，寬度會佔滿整個全部，特性是可以換行，並且可以改變寬度和高度
inline
被稱為區塊元素，寬度只會佔滿自己盒子該有的寬度，特性是不會換行，並且不可以改變寬度
呈現方式
首先我們先用設定三個盒子為一組，分別是長寬80px的盒子，背景粉色，盒子外框為黑。在這裡唯一不同之處在於他們的display分別為block跟inline。
HTML
<div class=”box-1″>我是1</div>
<div class=”box-1″>我是2</div>
<div class=”box-1″>我是3</div>
<p>——–分隔線——–</p>
<div class=”box-2″>我是4</div>
<div class=”box-2″>我是5</div>
<div class=”box-2″>我是6</div>
CSS
.box-1 {
border: 1px solid black;
width: 80px;
height: 80px;
background-color: pink;
}
.box-2 {
border: 1px solid black;
width: 80px;
height: 80px;
background-color: pink;
display: inline;
程式執行結果
最終看到結果是設定為block的盒子換行了，並且照原本設定的長寬變化，設定為inline的盒子沒換行，並且沒有依照原本設定的長寬變化
——–分隔線——–
inline-block
跟inline屬性有點類似，但不同之處在於，設定為inline-block之後，依然可以改變原本盒子的大小，使用方式有點像是 float 的用法，但不用額外加上 clear的屬性
※針對float跟clear的部分可以參考：
呈現方式
依照剛剛的範例，設定三個盒子為一組，分別是長寬80px的盒子，背景粉色，盒子外框為黑。在這裡唯一不同之處在於他們的display分別為inline跟inline-block。
HTML
<div class=”box-2″>我是4</div>
<div class=”box-2″>我是5</div>
<div class=”box-2″>我是6</div>
<p>——–分隔線——–</p>
<div class=”box-3″>我是7</div>
<div class=”box-3″>我是8</div>
<div class=”box-3″>我是9</div>
CSS
.box-2 {
border: 1px solid black;
width: 80px;
height: 80px;
background-color: pink;
display: inline;
}
.box-3 {
border: 1px solid black;
width: 80px;
height: 80px;
background-color: pink;
display: inline-block;
}
程式執行結果
最後呈現出來的是，相同的設定之下，display屬性為inline的三個盒子，使用並排呈現，但沒有依照我們設定的高跟寬呈現，而display屬性為inline-block的三個盒子，則是依照並排呈現且根據我們設定的高跟寬去做設定
——–分隔線——–
none
會隱藏起這個區域，並不會將標籤從網頁中刪除或是重建，也不會因為標籤所在位置打亂任何的排版，不會佔任何的空間
呈現方式
依照剛剛的範例，設定三個盒子為一組，分別是長寬80px的盒子，背景粉色，盒子外框為黑。在這裡唯一不同之處在於，我在中間的盒子也就是”我是8″的盒子中，改變他的display屬性為none
HTML
<div class=”box-3″>我是7</div>
<div class=”box-3 text-none” >我是8</div>
<div class=”box-3″>我是9</div>
CSS
.box-3 {
border: 1px solid black;
width: 80px;
height: 80px;
background-color: pink;
display: inline-block;
}
.text-none{
display: none;
}
程式執行結果
最後呈現出來的是，相同的設定之下，將display屬性設定為none的盒子不會佔任何的空間，被隱藏起來
預設的display屬性分類
| block | inline | |
| 特點 | 1.會換行 2.高度、寬度、行高、margin、padding都可以設定 3.寬度預設為100% | 1.不會換行，可以跟其他標籤並列 2.高跟寬度無法控制，margin只能設定左右，padding設定上下有用會撐大空間 |
| HTML標籤 | <DIV> <H1~H6> <P> <UL> <OL> <LI> <DL> <Dt> <Dd> <Table> <Form> <Blockquote> <Pre>. | <A> <Strong> <Em> <Img> <Input> <Abbr> <I> <Label> <Select> <Span> <B> <Br> <Textarea> |
HTML標籤可以參考本篇文章
margin跟padding可以參考本篇文章