HTML中div和span的區(qū)別有哪些

這篇文章主要講解了“HTML中div和span的區(qū)別有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“HTML中div和span的區(qū)別有哪些”吧！

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的10年時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都衛(wèi)生間隔斷等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

HTML div標(biāo)簽

div標(biāo)簽是塊級(jí)元素，擁有塊級(jí)元素的特點(diǎn)。每對(duì)div標(biāo)簽（<div></div>）里的內(nèi)容都可以占據(jù)一行，不會(huì)其他標(biāo)簽在一行顯示；div標(biāo)簽總是從新行開始顯示；

且div標(biāo)簽可以通過css樣式來設(shè)置自身的寬度（也可省略，當(dāng)沒有使用css自定義寬度時(shí)，div標(biāo)簽的寬度為其的容器的100%）、高度，且還可以設(shè)置標(biāo)簽之間的距離（外邊距和內(nèi)邊距）；

我們還可以在div標(biāo)簽中，使用其他標(biāo)簽（行內(nèi)元素、塊級(jí)元素都行），比如：span標(biāo)簽，p標(biāo)簽，也可以是div標(biāo)簽。

div標(biāo)簽的簡(jiǎn)單示例：設(shè)置這些div標(biāo)簽的容器的寬度為500px，高度為500px

1 2 3 4 5 6

<div class="div1">內(nèi)容1，使用div，不設(shè)置寬度，不設(shè)置邊距</div> <div class="div2">內(nèi)容2，使用div，不設(shè)置寬度，設(shè)置內(nèi)邊距padding: 20px</div> <div class="div3">內(nèi)容3，使用div，不設(shè)置寬度，設(shè)置外邊距margin: 20px</div>   <div class="div4">內(nèi)容4，使用div，設(shè)置寬度，設(shè)置外邊距margin: 20px</div>        <div class="div5">內(nèi)容5，使用div，設(shè)置寬度，設(shè)置內(nèi)邊距padding: 20px</div>           <div class="div1">內(nèi)容6，使用div，不設(shè)置寬度，不設(shè)置邊距</div>

效果圖：

簡(jiǎn)單示例2：在div標(biāo)簽了，添加其他html標(biāo)簽

1 2 3 4 5

<div>     <span>span標(biāo)簽</span><span>span標(biāo)簽</span><a href="#">a標(biāo)簽</a><a href="#">a標(biāo)簽</a>     <p>p標(biāo)簽</p>     <div>div標(biāo)簽</div> </div>

效果圖：

HTML span標(biāo)簽

span標(biāo)簽是行內(nèi)元素，擁有行內(nèi)元素的特點(diǎn)。span標(biāo)簽元素會(huì)和其他標(biāo)簽元素會(huì)在一行顯示（塊級(jí)元素除外），不會(huì)另起一行顯示（如上例）。

span標(biāo)簽的寬度、高度都無法通過css樣式設(shè)置，它的寬高受其本身內(nèi)容（文字、圖片）控制，隨著內(nèi)容的寬高改變而改變；span標(biāo)簽無法控制外邊距和內(nèi)邊距，雖然可以設(shè)置左右的外邊距和內(nèi)邊距，但上下的外邊距和內(nèi)邊距無法設(shè)置。

且，span標(biāo)簽里只能容納文本或者是其他的行內(nèi)元素，不能容納塊級(jí)元素。

span標(biāo)簽的簡(jiǎn)單示例：

設(shè)置span.span1容器的內(nèi)邊距padding: 20px，span.span1容器內(nèi)的span標(biāo)簽的外邊距margin: 20px;

1 2 3

<span>span標(biāo)簽</span><span>span標(biāo)簽</span><a href="#">a標(biāo)簽</a><a href="#">a標(biāo)簽</a> <div>div標(biāo)簽</div> <span class="span1">span標(biāo)簽內(nèi)，添加<span>span標(biāo)簽</span><a href="#">a標(biāo)簽</a></span>

效果圖：

可以看出，雖然內(nèi)邊距padding把span.span1容器撐大了，但span標(biāo)簽的位置沒有向下移動(dòng)。

感謝各位的閱讀，以上就是“HTML中div和span的區(qū)別有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)HTML中div和span的區(qū)別有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站題目：HTML中div和span的區(qū)別有哪些
文章分享：http://muchs.cn/article8/ieggip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、微信小程序、域名注冊(cè)、網(wǎng)站導(dǎo)航、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)