一個來自面試的坑。

面試的時候考官先問了行內元素和塊級元素的區別，這個不難理解。然後一腳就踩進了，置換元素的坑。例如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>

CSS的置換和非置換元素