CSS display與Inline與block-level element

Posted on 2014-11-08 Edited on 2023-11-24 In CSS Views: Disqus:

一、display屬性用途為表示一個element的顯示樣式如：

<!DOCTYPE html>
<html>
<head>
    <style>
        .block p {
            display: block;
            background-color: red;
        }

        .inline p {
            display: inline;
            background-color: blue;
        }

        .inline-block p {
            display: inline-block;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="block">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>

    <div class="inline">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>

    <div class="inline-block">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>

</body>
</html>

JS Bin

<p>tag的預設顯示樣式為block

1.block 塊級樣式：

可以指定寬度，會佔據整個父元素的寬度，所以不管內容多短，

一次就會佔據一整行，最常用來當作容器。

2.inline 行內樣式：

沒有自己的寬度也不能指定寬度，父元素寬度多長就多長，

是靠文字的多寡來撐起寬度的。

3.inline-block 行塊樣式：

不想要佔據整行，又想要有自己的寬度，

於意義上為一個block的元素外面包裹著inline的屬性。

二、display進階樣式

4.table

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>brooke</title>
    <style>
        .table {
            display: table;
            border: 5px solid #955;
        }

        .table-row {
            display: table-row;
            border: 5px solid #559; /*none effect*/
            text-align: center;
        }

        .table-cell {
            display: table-cell;
            border: 5px solid #595;
            vertical-align: middle;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="table-cell">
                1
            </div>
            <div class="table-cell">
                2
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                3
            </div>
            <div class="table-cell">
                4
            </div>
        </div>
    </div>
</body>
</html>

顧名思義就是像table一樣操作。

5.list-item

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <ul>
        <li><p>aaa</p></li>
        <li><p>aaa</p></li>
        <li><p>aaa</p></li>
    </ul>
</body>
</html>

元素li的diaplay預設樣式就是list-item

6.inline-flex

其功能為把一個圖片的高拉成圖片的原始寬度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        ul {
            padding: 0;
            width: 100%;
            text-align: center;
        }

            ul > li {
                list-style-type: none;
                width: 18%;
                margin: 0 7%;
                display: inline-flex;
            }

                ul > li > img {
                    width: 100%;
                }
    </style>
    <title>JS Bin</title>
</head>
<body>
    <ul>
        <li class="menu1"><img src="http://i.imgur.com/u7OpSw2.png?1" alt="Alternate Text"></li>
        <li class="menu2"><img src="http://i.imgur.com/u7OpSw2.png?1" alt="Alternate Text"></li>
        <li class="menu3"><img src="http://i.imgur.com/u7OpSw2.png?1" alt="Alternate Text"></li>
    </ul>
</body>
</html>

相等於

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        ul {
            padding: 0;
            width: 100%;
            text-align: center;
        }

            ul > li {
                list-style-type: none;
                width: 18%;
                margin: 0 7%;
                display: inline-block;
            }

                ul > li > img {
                    width: 100%;
                    height: 260px;
                }
    </style>
    <title>JS Bin</title>
</head>
<body>
    <ul>
        <li class="menu1"><img src="http://i.imgur.com/u7OpSw2.png?1" alt="Alternate Text"></li>
        <li class="menu2"><img src="http://i.imgur.com/u7OpSw2.png?1" alt="Alternate Text"></li>
        <li class="menu3"><img src="http://i.imgur.com/u7OpSw2.png?1" alt="Alternate Text"></li>
    </ul>
</body>
</html>

由inline-flex和inline-block的特性，就相等於flex和block的特性。

還有其他常用的display樣式如：

none、initial、inherit

更多樣式請參考CSS display Property

二、列出Inline與block-level element

1、Inline元素有

b, big, i, small, tt, iframe,

abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var,

a, bdo, br, img, map, object, q, script, span, sub, sup,

button, input, label, select, textarea

2、block-level元素有

Address, article, aside, audio, blockquote,

canvas, dd, div, dl, fieldset,

figcaption, figure, footer, form,

h1, h2, h3, h4, h5, h6

header, hgroup, hr, main, nav,

noscript, ol, output, p, pre,

section, table, tfoot, ul, video

DD, DT, LI, TBODY, TD,

TFOOT, TH, THEAD, TR,

BUTTON, DEL, INS, MAP, OBJECT, SCRIPT