這篇文章將為大家詳細講解有關(guān)CSS標(biāo)簽中顯示模式的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、城陽網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站制作、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為城陽等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

標(biāo)簽的顯示模式（重點）

div和span標(biāo)簽

1.樣式完全相同，標(biāo)簽不同，顯示的結(jié)果完全不同

2.每個div會獨占一行，多個span會并列一排

1.塊元素

特點：寬度默認(rèn)是100%，高度默認(rèn)是0，可以設(shè)置寬度和高度，會繼承父級的寬度，換行顯示—div ul li p h

示意圖

總結(jié)：塊元素可以添加寬高的屬性，獨占一行

2.行元素

特點：寬高默認(rèn)都是0，不能設(shè)置寬和高，一行顯示----span b i u a

示意圖

總結(jié)：對寬高不敏感，不能獨占一行

3.行內(nèi)的塊元素

特點：只能設(shè)置寬和高，不能換行顯示—img input

示意圖

多學(xué)一招：從大的方面來說，其實行內(nèi)的塊元素也屬于行內(nèi)元素，對行內(nèi)元素的某些操作，同樣可以操作行內(nèi)的塊元素，例：text-align:center;line-height:1000px;

4.模式轉(zhuǎn)換

語法：display:值

取值：block轉(zhuǎn)成塊元素，inline轉(zhuǎn)成行元素，inline-block轉(zhuǎn)成行內(nèi)的塊元素，none隱藏元素

多學(xué)一招：使用該屬性隱藏元素后，在頁面中將不占據(jù)空間

小案例：簡易導(dǎo)航的制作

    案例示意圖

代碼

	
	
	
		a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
		body{text-align:center;}
	



導(dǎo)航
導(dǎo)航
導(dǎo)航
導(dǎo)航
導(dǎo)航
導(dǎo)航

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