當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端一HTML:十八:元素的显示方式

發布時間：2025/6/15 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了前端一HTML:十八:元素的显示方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 塊級元素

? ? ? ?特點: 單獨占一行, 可以給這個元素設置寬高。

? ? ? ?div, p, h1(h2,系列標簽), ul,li, ol, dl標簽都是塊級元素標簽。

? ? ? 顯示方式: ? display: block;

如下: 有兩個div塊,每個div的寬高都是200px,但由于div是塊級元素標簽，即使設置了寬，還是單獨占了一行。

? ??

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>元素的顯示方式</title><style>div{width: 200px;height: 200px;background: pink;}p{width: 200px;height: 200px;background: red;}h1{width: 200px;height: 200px;background: blue;}</style> </head> <body><div></div><div></div><p></p><h1></h1> </body> </html>

2. 行內元素

? ? ?特點: 可以多個標簽放在同一行,但是給標簽設置寬高沒有作用。

? ? ??span, u, i，strong，em都是行內元素標簽

? ? ?顯示方式: ? display: inline;

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>元素的顯示方式</title><style>span, u, i{width: 200px;height: 200px;background: red;}</style> </head> <body><span>水滸傳</span><u>三國演義</u><i>小霸王學習機</i><strong>寶塔鎮河妖</strong><em></em></body> </html>

?3.行內塊級元素

? 特點: 可以多個標簽放在同一行,并且標簽可以設置寬高。

? img標簽就是行內塊級元素

?顯示方式:?display: inline-block;

? 4. 元素顯示方式的轉換:

? ? 只需要修改display屬性就可以了。

總結

以上是生活随笔為你收集整理的前端一HTML:十八:元素的显示方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。