HTML-div與span

div與span的區別

在html中經常見到div和span,我一般都是隨意用,個人習慣,大多用div,直到今天才弄清楚了div與span的區別

本質區別:

div:塊級元素
span:行內元素

體現在代碼中:

div在代碼中會另起一行
而span不會,除非本行占滿,才會換行```

上代碼咯:

<div style = "width:200px; border:solid;">
<div>abcde</div>
<div>abcde</div>
<span>abcde</span>
<span>abcde<span>
</div>

<div style = "width:50px; border:solid;">
<div>abcde</div>
<div>abcde</div>
<span>abcde</span>
<span>abcde<span>
</div>

運行效果:

div與span運行效果

到底該用哪個呢?

  • div:指定渲染HTML的容器
  • span:指定內嵌文本容器
    通俗地講就是如果里面還有其他標簽的時候就用div,如果里面只有文本就應該用span

關聯:

兩者的區別也不是一成不變的,可以通過設置css的display值相互轉換樣式,此處不做過多說明

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1 92
  • 本課來自http://www.imooc.com/learn/9請不要用作商業用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,318評論 0 5
  • 本文主要是起筆記的作用,內容來自慕課網. 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,663評論 0 30
  • 一 外部式css樣式 (也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css...
    KunMitnic閱讀 962評論 0 1
  • 不一樣的你正在走來。 快來聽,它和你一樣有些不一樣呢。 No.17 ? 在那一個時間點, 遇見尋了很久的那個回眸,...
    眾里那個人閱讀 868評論 0 1