溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html中inline元素的特點(diǎn)

發(fā)布時(shí)間：2020-06-24 19:09:19 來源：億速云 閱讀：393 作者：元一 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)html中inline元素的特點(diǎn)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

display:inline

它可以讓行內(nèi)顯示為塊的元素，變?yōu)樾袃?nèi)顯示，例如

DIV1

DIV2

這里DIV1和DIV2分別占一行，但是你給他們加上屬性后變了

DIV1 DIV2

和 display:inline 對(duì)應(yīng)的是 display:block，block 會(huì)讓應(yīng)用了該 CSS 屬性的 HTML 標(biāo)記變成塊級(jí)別元素，例如 SPAN 是行內(nèi)顯示的，但是你加了 display:block 屬性就不一樣了

[font style= "display:block "] SPAN1 [/font]

[font style= "display:block "] SPAN2 [/font]

block一般一個(gè)塊占一行，除非float

inline是自動(dòng)排為一行，就象段內(nèi)的文字一樣，可成為多行。

display:inline比較經(jīng)典的用法是用在 <ul> 下的 <li> 中

display:inline 對(duì)應(yīng)不顯示為 display:none

display:block 對(duì)應(yīng)不顯示為 hidden

說通俗點(diǎn) 樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方。

inline元素的特點(diǎn)：

  • 水平方向上根據(jù)direction依次布局。

  • 不會(huì)在元素前后進(jìn)行換行

  • 受white-space控制。

  • margin/padding在豎直方向上無效，水平方向上有效。

  • width/height屬性對(duì)非替換行內(nèi)元素?zé)o效，寬度由元素內(nèi)容決定。

  • 非替換行內(nèi)元素的行框高由line-height確定，替換行內(nèi)元素的行框高由height,margin,padding,border決定。

  • vertical-align屬性生效。

inline元素除了上述還有一條比較重要的特點(diǎn)：

浮動(dòng)（float）或絕對(duì)定位（position：absolute）時(shí)會(huì)轉(zhuǎn)換為block

<body>
    <p>HTML 不是一種編程語言，而是一種標(biāo)記語言</p>
    <p>我的第一個(gè)段落。<a href="http://www.runoob.com/">鏈接</a>這是段落末尾</p>
    <p>HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容.HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁</p>
</body>
<style>
    a{background:red; height:50px; width:50px;}
</style>

html中inline元素的特點(diǎn)

看完上述內(nèi)容，你們對(duì)html中inline元素的特點(diǎn)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手