css塊級元素、行內(nèi)元素和行內(nèi)塊級元素

一、行內(nèi)元素和塊級元素

1.1、塊級元素（inline）：

  • 它獨(dú)占一行；

  • 它的寬高可以設(shè)置；

  • 默認(rèn)時，寬度是100%；

  • 例如：<div>、<h1-h6>、<ul>、<ol> 、<li>等。

1.2、行內(nèi)元素（block）：

  • 它的寬度由內(nèi)容決定，高度有內(nèi)容字體大小決定；

  • 它不可以設(shè)置寬高；

  • 它可以和其他的行內(nèi)元素位于同一行；

  • 例如：<span>、<label>、<i>、<e>等。

1.3、行內(nèi)塊級元素（inline-block）：

  • 它即可以和其他的行內(nèi)元素位于同一行，

  • 元素的寬高及與邊的間距都可以設(shè)置；

  • 例如：<input>、<img>、<select>等。

二、塊級元素、行內(nèi)元素、行內(nèi)塊級元素轉(zhuǎn)換

  • 2.1、display：block；轉(zhuǎn)換成塊級元素。

  • 2.2、display：inline；轉(zhuǎn)換成行內(nèi)元素。

  • 2.3、display：inline-block；轉(zhuǎn)換成行內(nèi)塊級元素。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容