網(wǎng)頁(yè)中不同元素類(lèi)型之間可以相互轉(zhuǎn)換嗎？

網(wǎng)頁(yè)是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的。如果希望行內(nèi)元素具有塊元素的某些特性，例如可以設(shè)置寬高，或者需要塊元素具有行內(nèi)元素的某些特性，例如不獨(dú)占一行排列，可以使用display屬性對(duì)元素的類(lèi)型進(jìn)行轉(zhuǎn)換。

display屬性常用的屬性值及含義如下。

● inline：此元素將顯示為行內(nèi)元素（行內(nèi)元素默認(rèn)的display屬性值）。

● block：此元素將顯示為塊元素（塊元素默認(rèn)的display屬性值）。

● inline-block：此元素將顯示為行內(nèi)塊元素，可以對(duì)其設(shè)置寬高和對(duì)齊等屬性，但是該元素不會(huì)獨(dú)占一行。

● none：此元素將被隱藏，不顯示，也不占用頁(yè)面空間，相當(dāng)于該元素不存在。

使用display屬性可以對(duì)元素的類(lèi)型進(jìn)行轉(zhuǎn)換，使元素以不同的方式顯示。

示例代碼如下：

  <title>元素的轉(zhuǎn)換</title>

  <style type="text/css">

  div,span{          /*同時(shí)設(shè)置div和span的樣式*/   

  width:200px;      /*寬度*/

  height:50px;      /*高度*/

  background:#FCC;    /*背景顏色*/

  margin:10px;      /*外邊距*/

  }

  .d_one,.d_two{display:inline;}   /*將前兩個(gè)div轉(zhuǎn)換為行內(nèi)元素*/

  .s_one{display:inline-block;}    /*將第一個(gè)span轉(zhuǎn)換為行內(nèi)塊元素*/

  .s_three{display:block;}      /*將第三個(gè)span轉(zhuǎn)換為塊元素*/

</style>

在上面的例子中，定義了三對(duì)<div>和三對(duì)<span>標(biāo)簽，為它們?cè)O(shè)置相同的寬度、高度、背景顏色和外邊距。同時(shí)，對(duì)前兩個(gè)<div>應(yīng)用“display:inline;”樣式，使它們從塊元素轉(zhuǎn)換為行內(nèi)元素，對(duì)第一個(gè)和第三個(gè)<span>分別應(yīng)用“display: inline-block;”和“display:inline;”樣式，使它們分別轉(zhuǎn)換為行內(nèi)塊元素和行內(nèi)元素。示例代碼運(yùn)行效果如圖1所示。

圖1 元素的轉(zhuǎn)換

從圖1可以看出，前兩個(gè)<div>排列在了同一行，靠自身的文本內(nèi)容支撐其寬高，這是因?yàn)樗鼈儽晦D(zhuǎn)換成了行內(nèi)元素。而第一個(gè)和第三個(gè)<span>則按固定的寬高顯示，不同的是前者不會(huì)獨(dú)占一行，后者獨(dú)占一行，這是因?yàn)樗鼈兎謩e被轉(zhuǎn)換成了行內(nèi)塊元素和塊元素。

在上面的例子中，使用display的相關(guān)屬性值，可以實(shí)現(xiàn)塊元素、行內(nèi)元素和行內(nèi)塊元素之間的轉(zhuǎn)換。如果希望某個(gè)元素不被顯示，還可以使用“display:none;”進(jìn)行控制。例如，希望上面例子中的第三個(gè)<div>不被顯示，可以在CSS代碼中增加如下樣式：

.d_three{ display:none;}       /*隱藏第三個(gè)div*/

保存HTML頁(yè)面，刷新網(wǎng)頁(yè)，效果如圖2所示。

圖2 定義display為none后的效果

從圖2可以看出，當(dāng)定義元素的display屬性為none時(shí)，該元素將從頁(yè)面消失，不再占用頁(yè)面空間。

注意：

行內(nèi)元素只可以定義左右外邊距，當(dāng)定義上下外邊距時(shí)無(wú)效。

猜你喜歡：

子結(jié)構(gòu)元素怎樣設(shè)置不同于結(jié)構(gòu)元素的樣式？

jQuery修改元素樣式的代碼演示

H5中article元素的作用是什么？

黑馬程序員前端培訓(xùn)