CSS 行内块元素的转换问题

在对行内块元素，如：input 设置display属性为block元素时可以成功转换，但是当display属性值为inline时，不能转换成功是为什么？

理论上来说，行内元素区别于块级元素的一点就是它不能设置宽高。例如：

<div style="width: 100px; height: 100px; background-color: black">
    <span style="width: 10px; height: 10px; background-color: white"></span>
</div>

这段代码的执行结果是：只显示了一个宽高各100px的黑块，而没有显示白块。

但并不是所有的行内元素都不能设置宽高，替换元素就可以。首先，我们来明确一下替换元素和不可替换元素的定义。

替换元素：浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。

不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

除此之外，当我们给行内元素添加属性float时，我们也可以给它设置宽高。因为不论元素本身是什么，当它浮动时，就会生成一个块级框。行内元素也就会生成相应的行内框。此时我们为它设置宽高，宽高就会起作用了。例如：

<div style="width: 100px; height: 100px; background-color: black">
    <span style="float: left; width: 20px; height: 20px; background-color: red"></span>
</div>

在将input 转换为 inline时，可以使用width和height设置宽高，但是inline不是行内元素吗？行内元素是不能设置宽高的啊？求大神解

要转换成inline-block

inline-block行内块元素

block块元素

inline行内元素

其中块元素和行内块元素可以设置宽高

也可以使用浮动float，使其变成块元素，设置宽高