理解content(一)

從零開始的前端生活-理解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

規則以下:

1. 優先級是 css尺寸> HTML尺寸 > 固有尺寸

2. 若是固有尺寸含有固定的寬高比例，同時僅設置寬度或者高度，元素依然按照固有的寬高比例顯示

   好比 圖片本來爲400*300 ，比例爲4:3 ， 若是咱們給與img這樣設置

   img{ width:200px}

   <img src="xxx.jpg">

   那麼最後圖片的高爲 200*3/4 = 150

3. 內聯替換元素和塊級替換元素都使用上面同一套規則

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，那就不符合替換元素的尺寸規則了，他就是一個非替換元素

僞元素的細節

1. js沒法操做僞元素
2. 替換元素也有僞元素，好比img使用僞元素，若是src成功，則引入的圖片將會代替img的內部內容，這時僞元素就被代替了失效了。若是src失敗，則僞元素還生效着。
3. 僞元素是主元素的一部分

利用上面的細節能夠作不少使用的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世界啓發寫的筆記！