一个来自面试的坑。
面试的时候考官先问了行内元素和块级元素的区别，这个不难理解。然后一脚就踩进了，置换元素的坑。例如img就是行内置换元素，这种行内元素是可以设置宽高的。
什么是置换元素
一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，而且元素本身一般拥有固定的尺寸（宽度、高度、宽高比）的元素。
行内级置换元素的宽度
对于行内级非置换元素，高度和宽度设置是不适用，垂直方向上的margin、padding设置也没有用。、
对于行内级置换元素，宽度：
- 如果宽高或者宽的值为auto，且元素有固有的宽度，则width是此固有的宽度：
- 如果宽度设置为auto，但是高度有非auto的值，且元素有固定的宽高比： width = 高度 * 固定宽高比。
- 如img只设定了height，宽度会按比例计算
- 如果宽度设置为auto，且不符合上述条件，则宽度的使用值为300px。
- 如：iframe，canvas
行内级置换元素的高度
对于行内级非置换元素，高度和宽度设置是不适用，垂直方向上的margin、padding设置也没有用。、
对于行内级置换元素，高度：
- 如果宽高或者高的值为auto，且元素有固有的高度，则height是此固有的宽度
- 如果高度设置为auto，但是宽度有非auto的值，且元素有固定的宽高比： height = 宽度 / 固定宽高比。
- 如果高度设置成auto，且不符合上述条件，则height的值不能大于150px，且宽度不能大于高度的2倍。
常见的行内置换元素
<img> <input> <textarea> <select> <object>