溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下SPAN元素和DIV元素的區(qū)別有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
最顯明的區(qū)別是：DIV是塊元素，SPAN是內(nèi)嵌元素。塊元素相稱于內(nèi)嵌元素在前后各加一個(gè)<br>換行。實(shí)在，塊元素和行內(nèi)元素也不是原封不動(dòng)的，只需給塊元素定義display:inline，塊元素就成了內(nèi)嵌元素，同樣的，給內(nèi)嵌元素定義了display:block就成了塊元素了。
<div>和<span>的區(qū)別
span元素:
容許網(wǎng)頁制造者給出一個(gè)樣式表,但無須加正在HTML元素之上,也便是道span是獨(dú)立于HTML元葷的.span在樣式表做是做為一個(gè)本識符使用,而且也接收styleclass和ID屬性如<spanclass="xx">.....</span>
span是一個(gè)內(nèi)聯(lián)元素,它純潔是為了利用樣式外表成立的。
DIV元素:
基礎(chǔ)上取span類似,或許道具有SPAN一切的功用,此外還具有SPAN不及的特點(diǎn).DIV是一個(gè)塊,也就是所謂的"容器",它具有本人獨(dú)立的段降,獨(dú)立的題目,獨(dú)立的表格,就如<html>.....</html>一樣包含了一切。
代碼示例：
<style> div,span{border:1pxsolid#000;margin:2} </style> <div>div1</div><div>div2</div> <span>span1</span><span>span2</span> <br> <divstyledivstyle="display:inline">div3</div> <divstyledivstyle="display:inline">div4</div> <spanstylespanstyle="display:block">span3</span> <spanstylespanstyle="display:block">span4</span>技能：
有些朋友會(huì)說DIV是層標(biāo)簽，實(shí)在HTML里是沒有層這個(gè)說法的，只不外是為了易于懂得，Dreamweaver里才這樣寫的，每個(gè)對于象都可以成為“層”，只須要給對象定義position屬性(值為absolute或者relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
<imgsrcimgsrcimgsrcimgsrcimgsrcimgsrcimgsrcimgsrc="demo.gif" style="posibion:absolute;left:20;top:20">
特殊提醒
原例代碼運(yùn)轉(zhuǎn)后果如圖2.1.6.3所示，為了更能闡明答題，那里給塊元素和內(nèi)嵌元素皆加了1像素闊的玄色真線邊框，自圖中能夠望到，DIV默覺得塊元素，定義display屬性值為inline后以內(nèi)嵌元素顯示，而SPAN默以為內(nèi)嵌元素，定義display屬性值為block后則以塊元素顯示。
以上是“SPAN元素和DIV元素的區(qū)別有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼