前端一HTML:十八:元素的显示方式
生活随笔
收集整理的這篇文章主要介紹了
前端一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:十八:元素的显示方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 操作系统四: 内存连续分配
- 下一篇： 操作系统五: 非连续内存分配