CSS替換元素怎么使用

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

1. 替換元素

根據(jù)內(nèi)容是否具有替換內(nèi)容，我們也可以把元素分為替換元素和非替換元素

替換元素，顧名思義，就是內(nèi)容可以被替代

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

這種通過某個屬性呈現(xiàn)出內(nèi)容的元素就是 替換元素

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

1. 內(nèi)容的外觀不受頁面上的 css 的影響，用專業(yè)的話講就是在樣式表現(xiàn)在 css 作用于之外，如何更改替換元素的外觀？

需要類似 appearance 屬性，或者瀏覽器自身暴露一些樣式接口，例如::-ms-check{}可以更改高版本 IE 瀏覽器下單復(fù)選框的內(nèi)部樣式

2. 有自己的尺寸，在web中，很多替換元素在沒有明確尺寸的設(shè)定，其默認(rèn)尺寸是300px X 150px 如 <video>,<iframe>,<canvas>

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

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

4. 替換元素的默認(rèn) display 值

5. 替換元素的尺寸計(jì)算規(guī)則

1. 固有尺寸

指的是替換元素內(nèi)容本身原本的尺寸，例如，圖片，視頻作為一個獨(dú)立文件存在的時候，都有自己的寬度高度的

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

HTML 尺寸只能根據(jù) 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設(shè)置尺寸，對應(yīng)盒子尺寸中的 content-box

三者的優(yōu)先級如下

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

web 開發(fā)的時候，為了提高圖片加載性能以及節(jié)省帶寬費(fèi)用，首屏加載以下的圖片就會通過滾屏加載的異步方式，然后，這個即將被一部加載的圖片為了布局穩(wěn)健，體驗(yàn)良好，往往會使用一張透明的圖片占位，例如：

<img src="transparent.png">

實(shí)際上，這個透明的展位圖也是多余的資源，我們直接：

<img>

然后，配合以下的css樣式可以實(shí)現(xiàn)一樣的多余效果

img{visibility: hidden}

img[src]{visibility: visible}

注意，這里<img>直接沒有 src 屬性，再強(qiáng)調(diào)一遍，是直接沒有，不是 src="", src=""在很多瀏覽器下，依然會有請求，而且請求的是當(dāng)前頁面的數(shù)據(jù)，當(dāng)圖片的 src 屬性缺省的時候，圖片不會有任何請求，是最高效率的實(shí)現(xiàn) 方式

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

div::before{

content: url(1.jpg);

display: block;

width: 200px;

height: 200px;

}

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

4. 替換元素和非替換元素的距離有多遠(yuǎn)

觀點(diǎn)1：替換元素和非替換元素之間只隔一個 src 屬性

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

<img> 其實(shí)就是一個和 <span>類似的普通標(biāo)簽的內(nèi)聯(lián)樣式，也就是成了一個非替換元素

觀點(diǎn)2：替換元素和非替換元素之間只隔著了 一個 CSS content 屬性

替換元素之所以為替換元素，就是因?yàn)槠鋬?nèi)容可替換，而這個內(nèi)容就是 margin，border，padding，和content，這四個盒子中 的 content box

對應(yīng)的 css 屬性的 content，所以理論上講，content屬性決定是替換元素還是非替換元素

img{content: url(1.jpg)}

<img src="1.png">

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