CSS替換元素怎么使用

這篇文章主要介紹“CSS替換元素怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS替換元素怎么使用”文章能幫助大家解決問題。

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">

關于“CSS替換元素怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。