HTML <div> 和<span>
HTML 塊級元素<div> 和行內(nèi)元素<span>
塊級元素寬度充滿整個瀏覽器可見區(qū)域 ,一般一行只能有一個塊級元素?
?行內(nèi)元素的寬度一般以元素內(nèi)的文字內(nèi)容為準 ,塊級元素內(nèi)可以放置多個行內(nèi)元素
實例
先看一下塊級元素<div> 和行內(nèi)元素<span>的特性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <div style="border: 1px solid red;"> hello </div> <span style="border: 1px solid blue;">world</span> </body> </html>
程序運行結(jié)果:
塊級元素<div>
塊級元素會獨占一行,默認情況下,寬度會自動填滿父元素寬度。因此,多個跨級元素都是從上到下在多行顯示的。
塊級元素:div, p, form,? ul, li, ol, dl, table ……
行內(nèi)元素<span>
行內(nèi)元素不會獨占一行,其寬度隨里面的內(nèi)容而變化,多個行內(nèi)元素會緊挨著排在一行內(nèi),直到一行排不下才會換行
行內(nèi)元素:span,? strong,? em, br, img, input, label, select, textarea, cite……
HTML 分組標簽
? ? ?標簽 | ? ? ?描述 |
? ??<div> | 定義了文檔的區(qū)域,塊級 (block-level) |
? ??<span> | 用來組合文檔中的行內(nèi)元素, 內(nèi)聯(lián)元素(inline) |
我們前面學習了那么多標簽,我們下一節(jié)會教大家怎么利用那些標簽來做個簡單的網(wǎng)頁布局