CSS的置换和非置换元素

一个来自面试的坑。

面试的时候考官先问了行内元素和块级元素的区别，这个不难理解。然后一脚就踩进了，置换元素的坑。例如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>