從零開始的前端生活-理解content(一)
替換元素
定義
我們把通過修改某個屬性值呈現的內容就可以被替換的元素被稱為"替換元素"。
比如 <img src="xxx.jpg"> ,我們只需修改屬性src的值，內容就會發生變化，這就是替換元素。
類似的有 <video>、<iframe>、<input>、<textarea>等等
所有的替換元素都是內聯水平元素，inline 或者 inline-block 兩種形式。這是瀏覽器廠商規定的。
尺寸計算
替換元素的尺寸從內到外分為三種
-
固有尺寸
就是指替換內容原本的尺寸
就是不加以任何修飾，聲明一個
<input>，此時的尺寸就是固有尺寸再比如 不加任何修飾
<img src="xxx.jpg">,此時顯示的圖片尺寸就是固有尺寸，圖片原本最真實的大小。 -
HTML尺寸
HTML尺寸是只能通過元素的原生屬性來改變
比如
<img>的width 和 height屬性 。<input>的size屬性。<textarea>的cols 和 rows屬性等等<img width="300px" height="400px"><textarea cols="20 rows="5"></textarea> -
CSS尺寸
css尺寸是通過css的 width 和 height 等設置的尺寸，作用的目標是 content box
規則如下:
-
優先級是 css尺寸> HTML尺寸 > 固有尺寸
-
如果固有尺寸含有固定的寬高比例，同時僅設置寬度或者高度，元素依然按照固有的寬高比例顯示
比如 圖片原本為400*300 ，比例為4:3 ， 如果我們給與img這樣設置
img{ width:200px}<img src="xxx.jpg">那么最后圖片的高為 200*3/4 = 150
-
內聯替換元素和塊級替換元素都使用上面同一套規則
img{width:200px; height:150px}
<img>
對於缺省src屬性的img，IE和Chrome瀏覽器都還認定為替換元素，結果如預期寬高為 200*200. 但是火狐瀏覽器就把對於缺省src屬性的img認定為 普通的內聯元素，所以就不能使用上面的尺寸規則了。
但只要加上img{display:inline-block}就好了
我們是無法改變這個替換元素內容的固有尺寸的
看下下面的代碼
<div class="box"></div>
.box::before {
content: url(image/1.jpg);
display: block;
width: 200px;
height: 200px;
object-fit: fill;
}
我們可能會認為圖片最后會是200*200，可實際不是這樣的。圖片還是原來大小，css的樣式改變的盒子的content box的寬高，改變不了圖片的固有尺寸。
但如果我們使用替換元素img試看看
<img src="image/1.jpg" alt="">
img {
width: 200px;
height: 200px;
/*object-fit: none;*/
background-color: #333;
}
效果如下
還是一樣的200*200css樣式，但是這次圖片感覺被拉伸了，填滿了整個盒子。其實，圖片的固有尺寸還是沒改變，只不過是因為圖片中的content替換內容默認的適配方式是填充(fill)。css樣式還是作用在盒子的大小。了解一下替換元素的一個屬性object-fit，img的默認聲明 object-fit:fill;
如果我們把object-fit設置為none
img {
width: 200px;
height: 200px;
object-fit: none;
background-color: #333;
}
結果和和非替換元素::before生成的圖片類似
圖片還是不受控制，仍然是原來的固有尺寸，盒子還是200*200
如果我們把object-fit設置為contain
img {
width: 200px;
height: 200px;
background-color: #333;
border: 1px solid #333;
object-fit: contain;
}
效果如下
這看起來是挺像的hhhh，其實是比例一樣。因為如果值為contain，它的意思是保持圖片的比例盡量去填充盒子容器，填不滿也沒事。
object-fit還有很多屬性值，比如cover容器不留白，又保持原有比例。詳情請看張老師的博客
替換與非替換元素
替換元素和替換元素之間只隔了一個src屬性
下面代碼在谷歌瀏覽器上進行，因為火狐只需把img的src去掉就變成了非替換元素，谷歌必須是去掉src+不為空alt值，才能變成非替換元素
<img alt="任意值" class="img3">
.img3 {
display: block;
outline: 1px solid;
}
如果它是替換元素，則按照尺寸規則，它沒有內容，則尺寸為默認大小，在谷歌瀏覽器下寬度為0 ，實際上如下
寬度為100%，woc，那就不符合替換元素的尺寸規則了，他就是一個非替換元素
偽元素的細節
- js無法操作偽元素
- 替換元素也有偽元素，比如img使用偽元素，如果src成功，則引入的圖片將會代替img的內部內容，這時偽元素就被代替了失效了。如果src失敗，則偽元素還生效着。
- 偽元素是主元素的一部分
利用上面的細節可以做很多使用的demo
替換元素和非替換元素之間只隔了一個CSS content屬性
替換元素之所以為替換元素，是因為他的content box這個盒子里面的內容是可替換的，所以content這個屬性決定了是不是替換元素
<img class="box" src="image/1.jpg"></img>
.box {
margin-top: 20px;
width: 200px;
height: 200px;
display: block;
border: 1px solid #ffffff;
object-fit: cover;
}
.box:hover {
content: url(image/2.jpg);
}
實現了鼠標hover時圖片切換
當我們用h1設計官網的標志時，可以這樣用
<h1>我的世界</h1>
h1 {
width: 180px;
height: 36px;
content: url(image/myworld.jpg);
object-fit: contain;
}
效果如下：
object-fit也可以用了
讀張鑫旭老師的css世界啟發寫的筆記！