CSS中display的屬性差異

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的盒子沒換行,並且沒有依照原本設定的長寬變化

我是1
我是2
我是3

——–分隔線——–

我是4
我是5
我是6

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的三個盒子,則是依照並排呈現且根據我們設定的高跟寬去做設定

我是4
我是5
我是6

——–分隔線——–

我是7
我是8
我是9

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的盒子不會佔任何的空間,被隱藏起來

我是7
我是8
我是9

預設的display屬性分類

blockinline
特點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可以參考本篇文章

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Shopping Cart