HTML中行内元素和块级元素的区别及转换

最明显的区别就是：块级元知素会自动换行，而行内元素不会自动换行。

行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽道度和长度依据内容而定，不可以设置，可以和其专它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以属设置

width

和

height

属性，浏览器通常会在块级元素前后另起一个新行。

可以通过display: inline-block设置为行内元素。

步骤如下：

一、设计两个块级元素div，代码如下：

此时的块级元素显示效果：

二、设计两个块级元素div，添加属性 display:inline-block，代码如下：

此时的元素显示效果：

扩展资料

1、display:inline比较经典的用法是用在 <ul>下的 <li>中 内联 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。

2、display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。

3、display:inline 对应不显示为 display:none，display:block 对应不显示为 hidden。

参考资料来源：百度百科：display:inline

let str= <span class="keyword-lighten">aaa</span>

let ele = new DOMParser().parseFromString(str, "text/xml")

获取到document对象

然后ele.firstChild就是你想要的html元素来

---