中文无码日韩欧免费视频APP,国产精品精品自在线拍

技術(shù)頻道 - html技術(shù)

實(shí)例演示CSS Inline與inline-block的區(qū)別

作者:admin 時(shí)間:2022-5-12 23:51:57 瀏覽:

在本文中，我們將看到 Inline 與 inline-block 之間的區(qū)別。

inline-block
inline

實(shí)例演示CSS Inline與inline-block的區(qū)別

內(nèi)容

display 屬性定義了組件將如何放置在網(wǎng)頁(yè)上。

句法

display: value;

inline-block

允許在元素上設(shè)置寬度和高度。
尊重頂部和底部邊距/填充。
在元素后不添加換行符，因此該元素可以位于其他元素旁邊。
它用于將元素顯示為內(nèi)聯(lián)級(jí)塊容器。

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline vs Inline-block</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .menu{
            list-style-type: none;
            text-align: center;
            background-color: red;
        }
        .menu li {
            display: inline-block;
            padding: 25px;
            font-size: 25px;
        }
        span {
            display: inline-block;
            width: 100px;
            background-color: blue;;
            height: 100px;
            color:white;
        }
    </style>
</head>
<body>
    <h1>導(dǎo)航欄 inline-block</h1>
    <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>
     <p>這是一個(gè)簡(jiǎn)單的 <span>示例</span> ，使用了 inline-block 。</p>
</body>
</html>

demo download

輸出

inline與inline-block區(qū)別

inline

它用于將元素顯示為內(nèi)聯(lián)元素。
內(nèi)聯(lián)元素不會(huì)從新行開(kāi)始，只占用必要的寬度。
任何高度和寬度屬性都不會(huì)產(chǎn)生影響。

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline vs Inline-block</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .menu{
            list-style-type: none;
            background-color: red;
        }
        .menu li {
            display: inline;
            padding: 25px;
            font-size: 25px;
        }
        span {
            display: inline;
            width: 100px;/* won't have any effect */
            background-color: blue;;
            height: 100px; /* won't have any effect */
            color:white;
        }
    </style>
</head>
<body>
    <h1>導(dǎo)航欄 inline</h1>
    <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>
    <p>這是一個(gè)簡(jiǎn)單的 <span>示例</span> ，使用了 inline 。</p>
</body>
</html>

demo download

輸出

inline與inline-block區(qū)別

結(jié)論

你可以使用它來(lái)設(shè)置元素是否被視為塊或內(nèi)聯(lián)部分以及用于其子級(jí)的布局，例如流布局、網(wǎng)格或flex。

卡卡網(wǎng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

技術(shù)頻道 - html技術(shù)

實(shí)例演示CSS Inline與inline-block的區(qū)別

內(nèi)容

句法

inline-block

inline

結(jié)論

相關(guān)文章

標(biāo)簽: Inline inline-block css