CSS需要留意的可置换元素

block，inline 和 inlinke-block 细节对比：

inline-block 看上去值名 inline-block 是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们 li 元素一个 inline-block，使其既有 block 的宽度高度特性，又有 inline 的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如 vertical-align: top;来使元素顶部对齐。

原文：https://www.cnblogs.com/rdchen/p/14025566.html

1. vertical-align 属性

设置行内元素的垂直对齐方式。

​ vertical：竖的；垂直的。

属性值 bottom 和 text-bottom 区别：前者是根据盒子底部对齐，后者根据文本底部对齐。

​ 在线演示：https://www.w3school.com.cn/tiy/t.asp?f=eg_csse_vertical-align

解决图片底部默认空白缝隙现象：

原因：行内块元素会和文字的基线对齐。

两种解决方法：

1. 给图片加vertical-align: middle | top | bottom 等。（建议）
2. 把图片转换为块级元素 display: block;

2.为什么 input 元素能用 width 属性？

因为是可置换元素，拥有内在尺寸。比如 img，也属于可置换元素（Replaced element）。

一个解释：https://www.zhihu.com/question/20495297

另一个解释：https://www.cnblogs.com/xiaofenguo/p/6086488.html

另外关于 haslayout 详解：https://www.cnblogs.com/xiaohuochai/p/4845314.html