display 的 block、inline 和 inline-block 的區(qū)別?
2022-08-17 11:03 作者:網(wǎng)星軟件 | 我要投稿
block: 會(huì)獨(dú)占一行,多個(gè)元素會(huì)另起一行,可以設(shè)置 width、height、margin 和 padding 屬性;
(2)inline: 元素不會(huì)獨(dú)占一行,設(shè)置 width、height 屬性無效。但可以設(shè)置水平方向的 margin 和 padding 屬性,不能設(shè)置垂直方向的 padding 和 margin;
(3)inline-block: 將對象設(shè)置為 inline 對象,但對象的內(nèi)容作為 block 對象呈現(xiàn),之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。
對于行內(nèi)元素和塊級元素,其特點(diǎn)如下:
(1)行內(nèi)元素
1.設(shè)置寬高無效;
2.可以設(shè)置水平方向的 margin 和 padding 屬性,不能設(shè)置垂直方向的 padding 和 margin;
3.不會(huì)自動(dòng)換行;
(2)塊級元素
1.可以設(shè)置寬高;
2.設(shè)置 margin 和 padding 都有效;
3.可以自動(dòng)換行;
4.多個(gè)塊狀,默認(rèn)排列從上到下。
標(biāo)簽: