區(qū)別div和span、relative和absolute、display和visibility
發(fā)布時間:2009-12-17 00:11:02 作者:佚名
我要評論

div和span、relative和absolute、display和visibility是很容易混淆和弄錯的HTML標簽與CSS屬性,今天52CSS.com簡單的羅列出它們的區(qū)別與使用要點,供大家參考。
一、div和span的區(qū)別
div是一個塊級元素,可以包含段落,表格等內(nèi)容,用于放置不同的內(nèi)容。一般我們在網(wǎng)頁通過div來布局定位網(wǎng)頁中的每個區(qū)塊。
span是一個內(nèi)聯(lián)元素,沒有實際意義,它的存在純粹是為了應(yīng)用樣式,給一段內(nèi)容加上<span></span>標記可以通過在span上定義樣式來設(shè)定其內(nèi)容的樣式。
二、relative和absolute的區(qū)別
relative,CSS中的寫法是:position:relative; 他的意思是絕對相對定位,他是參照父級的原始點為原始點,無父級則以BODY的原始點為原始點,配合TRBL進行定位,當(dāng)父級內(nèi)有padding等CSS屬性時,當(dāng)前級的原始點則參照父級內(nèi)容區(qū)的原始點進行定位。
absolute,CSS中的寫法是:position:absolute; 他的意思是絕對定位,他是參照瀏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位,在沒有設(shè)定TRBL,加盟網(wǎng)默認依據(jù)父級的做標原始點為原始點。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性,那么當(dāng)前的absolute則以瀏覽器左上角為原始點進行定位,位置將由TRBL決定。
三、display和visibility的區(qū)別
display:none和visibility:hidden都可以隱藏一個元素
但visibility:hidden只是隱藏了元素的內(nèi)容,但其使用的位置空間仍然被保留。
而display:none則相當(dāng)把元素從頁面中去除,其占用位置也將被刪除。
div是一個塊級元素,可以包含段落,表格等內(nèi)容,用于放置不同的內(nèi)容。一般我們在網(wǎng)頁通過div來布局定位網(wǎng)頁中的每個區(qū)塊。
span是一個內(nèi)聯(lián)元素,沒有實際意義,它的存在純粹是為了應(yīng)用樣式,給一段內(nèi)容加上<span></span>標記可以通過在span上定義樣式來設(shè)定其內(nèi)容的樣式。
二、relative和absolute的區(qū)別
relative,CSS中的寫法是:position:relative; 他的意思是絕對相對定位,他是參照父級的原始點為原始點,無父級則以BODY的原始點為原始點,配合TRBL進行定位,當(dāng)父級內(nèi)有padding等CSS屬性時,當(dāng)前級的原始點則參照父級內(nèi)容區(qū)的原始點進行定位。
absolute,CSS中的寫法是:position:absolute; 他的意思是絕對定位,他是參照瀏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位,在沒有設(shè)定TRBL,加盟網(wǎng)默認依據(jù)父級的做標原始點為原始點。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性,那么當(dāng)前的absolute則以瀏覽器左上角為原始點進行定位,位置將由TRBL決定。
三、display和visibility的區(qū)別
display:none和visibility:hidden都可以隱藏一個元素
但visibility:hidden只是隱藏了元素的內(nèi)容,但其使用的位置空間仍然被保留。
而display:none則相當(dāng)把元素從頁面中去除,其占用位置也將被刪除。
相關(guān)文章
- DIV 和 SPAN 元素最大的特點是默認都沒有對元素內(nèi)的對象進行任何格式化渲染。主要用于應(yīng)用樣式表。兩者最明顯的區(qū)別在于DIV是塊元素,而SPAN是行內(nèi)元素(也譯作內(nèi)嵌元素)。2014-04-03
- 新手在使用web標準(div css)開發(fā)網(wǎng)頁的時候,遇到第一個問題是div與span有什么區(qū)別,什么時候用div,什么時候用span標簽。下面小編就通過本文給大家講解下,感興趣的朋友2021-11-30