CSS的替換元素

CSS的“替換元素”：通過修改某個元素的屬性值呈現的內容就可以被替換的元素。

替換元素的特性：

• 內容不受頁面上的CSS的影響。也就是樣式表現在CSS作用域之外
• 大部分有自己默認的尺寸，<img>標籤沒有
• 在很多CSS屬性上有自己的一套表現規則
• 所有替換元素都是內聯元素，都可以在一行顯示
• 我們無法改變這個替換元素內容的固有尺寸

如下圖：

各元素語法

<img>

    <img src="1.png" alt="" srcset=""> // 我們能夠看到的CSS中並沒有給寫出如何展示圖片

<iframe>

 <iframe></iframe>

<video>

<video src="movie.ogg" controls="controls">

<textarea>

 <textarea></textarea>

<input>

<input type="text">

<select>

    <select>
        <option>橘子</option>
    </select>

<button>

<button>確定</button>

<object>(這個元素H5中很多屬性不支持了)

替換元素的尺寸計算規則

• 固有尺寸：替換內容原本的尺寸，如圖片、視頻作爲一個獨立文件存在的時候，都有着自己的寬度和高度/
• HTML尺寸：如<img>的width和height屬性、<input>的size屬性、<textarea>的cols、rows
• CSS尺寸：通過CSS的width和height等設置的尺寸

如果沒有CSS尺寸和HTML尺寸，則使用固有尺寸作爲最中的寬高。優先級 CSS尺寸>HTML尺寸>固有尺寸，如果CSS尺寸僅僅設置了寬或者高，那麼按照“固有尺寸”含有的固有寬高比例進行取值。

同時要注意一個問題：<img>的src=“”在很多瀏覽器下依然會有請求，如safari（會有透明的邊框線條），應該缺省src（直接沒有src屬性）。