每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。并且塊級元素容器可以容納多個(gè)嵌套的塊級標(biāo)簽或者行內(nèi)標(biāo)簽。常見的塊元素有 h1 ~ h6 、 p 、 div 、 ul 、 ol 、 li 等，其中 div 標(biāo)記是網(wǎng)頁制作中最常用的塊元素。

行內(nèi)元素不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)的樣式。行內(nèi)元素不能嵌套塊級標(biāo)簽，只能嵌套其他的行內(nèi)標(biāo)簽。常見的行內(nèi)元素有 strong 、 b 、 em 、 i 、 del 、 s 、 ins 、 u 、 a 、 span 等，其中 span 標(biāo)記是最常用的行內(nèi)元素。

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title display /title 6 /head 7 body 8 div 我是一個(gè)div /div 9 span 我是一個(gè)span /span 10 strong 我是一個(gè)strong /strong 11 /body 12 /html 

要是想讓strong標(biāo)簽像div標(biāo)簽一樣獨(dú)占一行可不可以呢，答案是當(dāng)然可以。這就需要用到display這個(gè)屬性了，比較常用的值有none、inline、block與inline-block，這幾個(gè)值得解釋如下

none ：此元素不被顯示，在文檔中被移除。
block ：此元素按塊級元素顯示：前后帶換行符，自己占一行。內(nèi)聯(lián)元素 → 塊元素
inline ：此元素按內(nèi)聯(lián)元素顯示：1個(gè)挨著1個(gè)。塊元素 → 內(nèi)聯(lián)元素
inline-block：按行內(nèi)標(biāo)簽進(jìn)行排版，但是可以設(shè)置寬高，而且高度可以影響行高

現(xiàn)在讓我們把上面的strong元素變成塊級元素試試

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title display /title 6 7 style type= text/css 8 strong { 9 display: block;10 }11 /style 12 /head 13 body 14 div 我是一個(gè)div /div 15 span 我是一個(gè)span /span 16 strong 我是一個(gè)strong /strong 17 /body 18 /html 

可以看到設(shè)置了display屬性為block之后，strong標(biāo)簽就獨(dú)占一行了，相反如果讓div元素變成行內(nèi)元素的話，就需要用到display屬性的inline值了

1 style type= text/css 2 strong {3 display: block;4 }5 6 div {7 display: inline;8 }9 /style 

可以看到div標(biāo)簽與span在同一行顯示了

再來看看inline-block值，字面意思是行內(nèi)塊級元素，從最開始的介紹得知行內(nèi)元素的寬高只能靠自身的內(nèi)容來支撐，這里先給span標(biāo)簽設(shè)置寬高

span {width: 200px;height: 100px;background-color: red;}

從瀏覽器的運(yùn)行結(jié)果來看，給span設(shè)置的寬高并沒有起到任何的作用，現(xiàn)在給span設(shè)置下display屬性inline-block看看

span {width: 200px;height: 100px;background-color: red;display: inline-block;}

可以看到設(shè)置的寬高都起作用了，有了塊級元素的假象，不過這里的span標(biāo)簽還是一個(gè)行內(nèi)元素。有時(shí)候，我們需要暫時(shí)性的隱藏頁面中的元素，這時(shí)就可以設(shè)置元素的display屬性為none，例如需要隱藏頁面中的div元素

div {display: none;}

需要注意的是，CSS中的visibility屬性也可以控制頁面元素的顯示與否

div {visibility: hidden;}

通過瀏覽器的顯示結(jié)果可以很容易得出下面的結(jié)論

display: none;的設(shè)置是直接把當(dāng)前標(biāo)簽從頁面中直接移除了，不影響頁面的布局，而visibility: hidden這個(gè)設(shè)置只是表示元素在頁面上不顯示，但還是占用頁面的空間。

以上就是HTML中塊標(biāo)記和行內(nèi)標(biāo)記的介紹的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。