怎樣實現(xiàn)不同元素類型的轉(zhuǎn)換？

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

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

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

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

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

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

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

示例代碼如下：

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

  <style type="text/css">

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

  width:200px;      /*寬度*/

  height:50px;      /*高度*/

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

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

  }

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

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

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

</style>

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

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

從圖1可以看出，前兩個<div>排列在了同一行，靠自身的文本內(nèi)容支撐其寬高，這是因為它們被轉(zhuǎn)換成了行內(nèi)元素。而第一個和第三個<span>則按固定的寬高顯示，不同的是前者不會獨占一行，后者獨占一行，這是因為它們分別被轉(zhuǎn)換成了行內(nèi)塊元素和塊元素。

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

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

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

圖2 定義display為none后的效果

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

注意：

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

猜你喜歡：

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

H5 nav元素的作用？nav元素一般用于哪些場合？

六大H5常用結(jié)構(gòu)元素【前端技術(shù)文章】

JavaScript中如何搜索數(shù)組元素？

傳智教育前端與移動開發(fā)培訓(xùn)