HTML <div> 和<span>
HTML 塊級(jí)元素<div> 和行內(nèi)元素<span>
塊級(jí)元素寬度充滿整個(gè)瀏覽器可見(jiàn)區(qū)域 ，一般一行只能有一個(gè)塊級(jí)元素?
?行內(nèi)元素的寬度一般以元素內(nèi)的文字內(nèi)容為準(zhǔn) ，塊級(jí)元素內(nèi)可以放置多個(gè)行內(nèi)元素
實(shí)例
先看一下塊級(jí)元素<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>
程序運(yùn)行結(jié)果：
塊級(jí)元素<div>
塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下，寬度會(huì)自動(dòng)填滿父元素寬度。因此，多個(gè)跨級(jí)元素都是從上到下在多行顯示的。
塊級(jí)元素：div, p, form,? ul, li, ol, dl, table ……
行內(nèi)元素<span>
行內(nèi)元素不會(huì)獨(dú)占一行，其寬度隨里面的內(nèi)容而變化，多個(gè)行內(nèi)元素會(huì)緊挨著排在一行內(nèi)，直到一行排不下才會(huì)換行
行內(nèi)元素：span,? strong,? em, br, img, input, label, select, textarea, cite……
HTML 分組標(biāo)簽
| ? ? ?標(biāo)簽 | ? ? ?描述 |
| ? ??<div> | 定義了文檔的區(qū)域，塊級(jí) (block-level) |
| ? ??<span> | 用來(lái)組合文檔中的行內(nèi)元素， 內(nèi)聯(lián)元素(inline) |
我們前面學(xué)習(xí)了那么多標(biāo)簽，我們下一節(jié)會(huì)教大家怎么利用那些標(biāo)簽來(lái)做個(gè)簡(jiǎn)單的網(wǎng)頁(yè)布局
