首頁技術(shù)文章正文

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

更新時(shí)間:2021-05-28 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

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

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

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

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

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

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

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

1622187101859_21.jpg

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

從圖1可以看出,前兩個(gè)<div>排列在了同一行,靠自身的文本內(nèi)容支撐其寬高,這是因?yàn)樗鼈儽晦D(zhuǎn)換成了行內(nèi)元素。而第一個(gè)和第三個(gè)<span>則按固定的寬高顯示,不同的是前者不會獨(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頁面,刷新網(wǎng)頁,效果如圖2所示。

1622187108319_22.jpg

圖2 定義display為none后的效果

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

注意:

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






猜你喜歡:

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

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

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

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

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!