在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，可能需要給不同的標(biāo)簽設(shè)置不同的顯示模式?？梢酝ㄟ^(guò) display 實(shí)現(xiàn)。

1、塊轉(zhuǎn)行內(nèi)：display:inline;

2、行內(nèi)轉(zhuǎn)塊：display:block;

3、塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

知識(shí)點(diǎn)補(bǔ)充：css標(biāo)簽的顯示模式

標(biāo)簽的顯示模式

a、塊級(jí)元素（最典型的是  div標(biāo)簽）

特點(diǎn)：

默認(rèn)寬度  100%

可以容納塊級(jí)元素和內(nèi)聯(lián)元素

b、行內(nèi)元素 （最典型的是  span標(biāo)簽）

   特點(diǎn)：

c、行內(nèi)塊元素（最典型的是 img標(biāo)簽）

?。?！3種模式的標(biāo)簽是可以轉(zhuǎn)換的

  display  （顯示模型屬性）

a、塊級(jí)標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換為行內(nèi)標(biāo)簽?zāi)Ｊ?/p>

div{display：inline；}

b、 行內(nèi)標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換為塊級(jí)標(biāo)簽?zāi)Ｊ?/p>

span{display：block；}

c、行內(nèi)標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換為行內(nèi)塊標(biāo)簽?zāi)Ｊ?/p>

a{display：inline-block；}

感謝各位的閱讀！關(guān)于“CSS標(biāo)簽顯示模式的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！