天天看點

HTML中内聯元素和塊級元素的差別 内聯元素和塊級元素的互相轉換

最主要的差別是:
内聯不占行,如input,span,a,你會發現寫多個input的時候,它們都排在同一行
塊狀元素,占行,如div,p。你會發現寫多個div的時候,它們都各自占一行。
有時候你用到什麼元素的時候,可能自己觀察下。也可以去看下w3school。
如果你想内聯元素占行,可以用css中的display:block;      

内聯元素和塊級元素的互相轉換

直接轉換即可,如下 :
  <div style="display:inline">塊變内聯 </div><span style="display:block">内聯變塊</span>

  内聯元素(inline element)一般都是基于語義級(semantic)的基本元素。内聯元素隻能容納文本或者其他内聯元素,常見内聯元素"a"。
  塊元素(block element)和内聯元素(inline element)都是html規範中的概念。塊元素和内聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後,塊元素和内聯元素的這種屬性差異就不成為差異了。