iframe内聯元素有白邊原因_替換元素

1. 替換元素

根據内容是否具有替換内容，我們也可以把元素分為替換元素和非替換元素

替換元素，顧名思義，就是内容可以被替代

<img src="./bg.png" />
           

這種通過某個屬性呈現出内容的元素就是 替換元素

是以，<object>,<img>,<video>,<iframe>, 或者表單元素 <textarea>, <input>

1. 内容的外觀不受頁面上的 css 的影響，用專業的話講就是在樣式表現在 css 作用于之外，如何更改替換元素的外觀？

需要類似 appearance 屬性，或者浏覽器自身暴露一些樣式接口，例如::-ms-check{}可以更改高版本 IE 浏覽器下單複選框的内部樣式

2. 有自己的尺寸，在web中，很多替換元素在沒有明确尺寸的設定，其預設尺寸是300px X 150px 如 <video>,<iframe>,<canvas>

也有很多元素替換元素為0像素，如 <img>圖檔

3. 在很多 css 屬性上有自己的一套表現規則。比較具有代表性的就是 vertical-align 屬性，對于替換元素和非替換元素，表現是不太一樣的

4. 替換元素的預設 display 值

5. 替換元素的尺寸計算規則

1. 固有尺寸

指的是替換元素内容本身原本的尺寸，例如，圖檔，視訊作為一個獨立檔案存在的時候，都有自己的寬度高度的

2. HTML 尺寸這個概念略微抽象

HTML 尺寸隻能根據 HTML屬性去改變

比如，img 的width，height 屬性

input 的size屬性， textarea的cols，rows屬性

<img width="100" height="100">

<input size="20" type="file"/>

<textarea cols="20" rows="20"></textarea>

3. css 尺寸，特指可以通過 css 的width，height或者max-width/min-width和max-height/min-height設定尺寸，對應盒子尺寸中的 content-box

三者的優先級如下

css 尺寸>HTML 尺寸>固有尺寸

web 開發的時候，為了提高圖檔加載性能以及節省帶寬費用，首屏加載以下的圖檔就會通過滾屏加載的異步方式，然後，這個即将被一部加載的圖檔為了布局穩健，體驗良好，往往會使用一張透明的圖檔占位，例如：

<img src="transparent.png">

實際上，這個透明的展位圖也是多餘的資源，我們直接：

<img>

然後，配合以下的css樣式可以實作一樣的多餘效果

img{visibility: hidden}

img[src]{visibility: visible}

注意，這裡<img>直接沒有 src 屬性，再強調一遍，是直接沒有，不是 src="", src=""在很多浏覽器下，依然會有請求，而且請求的是目前頁面的資料，當圖檔的 src 屬性預設的時候，圖檔不會有任何請求，是最高效率的實作 方式

css 世界中的替換元素的固有尺寸有一個很重要的特性，那就是“我們無法改變這個替換元素的固有尺寸”

div::before{

content: url(1.jpg);

display: block;

width: 200px;

height: 200px;

}

width和height屬性都被直接無視了，這張圖檔原始尺寸大小256px X 192px

4. 替換元素和非替換元素的距離有多遠

觀點1：替換元素和非替換元素之間隻隔一個 src 屬性

平時使用的圖檔肯定都會使用 src 屬性去掉，是以難免會思維定式，認為<img>等同于圖檔，實際上完全不是，如果把 src 屬性去掉，

<img> 其實就是一個和 <span>類似的普通标簽的内聯樣式，也就是成了一個非替換元素

觀點2：替換元素和非替換元素之間隻隔着了 一個 CSS content 屬性

替換元素之是以為替換元素，就是因為其内容可替換，而這個内容就是 margin，border，padding，和content，這四個盒子中 的 content box

對應的 css 屬性的 content，是以理論上講，content屬性決定是替換元素還是非替換元素

img{content: url(1.jpg)}

<img src="1.png">

有待續，敬請期待下一篇文章