天天看点

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控制以后,块元素和内联元素的这种属性差异就不成为差异了。