HTML中内联元素和块级元素的区别内联元素和块级元素的相互转换

162 阅读 0 评论 107 点赞

我是靠谱客的博主温婉溪流，这篇文章主要介绍HTML中内联元素和块级元素的区别内联元素和块级元素的相互转换，现在分享给大家，希望可以做个参考。

复制代码

1
最主要的区别是：
内联不占行，如input，span，a，你会发现写多个input的时候，它们都排在同一行
块状元素，占行，如div，p。你会发现写多个div的时候，它们都各自占一行。
有时候你用到什么元素的时候，可能自己观察下。也可以去看下w3school。
如果你想内联元素占行，可以用css中的display：block;

复制代码

内联元素和块级元素的相互转换

复制代码

1
直接转换即可，如下 ：
　　<div style="display:inline">块变内联 </div><span style="display:block">内联变块</span>

　　内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。
　　块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。