CSS欺騙

爲何叫這個題目呢？

其實，本身剛開始接觸前端的時候，覺得界面就是和正常的流式佈局同樣，這裏放一個div，那裏放一個div，整個界面就搭建完成了。作過幾回項目後，好像本身想的也沒錯，就按照前面的思路，能夠解決大部分的界面搭建。可是有的時候，須要一些特殊的處理，這些特殊的處理，可能會打破你腦殼中的流式佈局。 下面就介紹幾種狀況，僅供參考（持續更新）

一、位置欺騙——圖片佔位

場景

從後端拉取一張圖片，而後顯示在前端，圖片寬高各爲100px，或者寬高比爲1:1

實現

//html
<img src=url />

//css
img {
    width: 100px;
    height: 100px;
}
複製代碼

• 在pc端通常是沒問題的，由於固定寬度和高度。
• 可是在移動端，這樣的方式就顯得不太合理，寬度通常經過設置爲百分比，可是高度就無法設置爲百分比了，移動端的高度通常是無限拖動的，設置百分比明顯是不行的。

爲何移動端要用百分比？請戳👉

css 佔位

經過margin和padding實現佔位：margin/padding百分比都是以父元素的width爲參照物的

假設圖片的寬度爲20%

#father {
    width: 20%;
}
#father:after {
    content: '',
    display: block;
    margin-top: 100%;
}
複製代碼

經過上面的方式，就能夠實現將div撐開，實現寬度和高度一致。 若是這樣怎麼把圖片給加進去呢？

經過絕對定位就能夠了。

#father {
    width: 20%;
    position: relative;
}
#father::after {
    content: '',
    display: block;
    margin-top: 100%;
}
img {
    position: absolute;
    width: 100%;
    top: 0;
}
複製代碼

欺騙

經過定位方式和僞類，實現內容覆蓋

二、動畫欺騙——從中間消失的線

場景

如圖所示，div下面有一個橫線，當點擊它的時候，讓他從中間開始向兩側消失

思考：如何實現這樣一個場景，能夠分爲兩步，先在底部加一個橫線，而後再讓橫線動起來

實現

• 第一步：經過絕對定位，實現一個底部橫線

.test {
    width: 180px;
    height: 25px;
    line-height: 25px;
    color: #7E7E99;
}
.select {
  position: relative;
}
.select:after {
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 2px;
    content: '';
    background: 'black';
}
複製代碼

• 第二步：讓橫線動起來

線段寬度設置爲0就能夠消失了，那麼怎麼可能讓它從中間消失呢？

敲黑板：將線段的margin-left設置爲50%，至關於將線段從左側向右移動了一半

上面兩個效果合起來就是從兩側向中間消失。

具體代碼以下：

.test {
    width: 180px;
    height: 25px;
    line-height: 25px;
    color: #7E7E99;
}
.select {
  position: relative;
}
.select:after {
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 2px;
    content: '';
    background: 'black';
    transition: all 1s ease-in-out;
}
.no-select {
    position: relative;
}
.no-select:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    content: '';
    background: 'balck';
    transition: all 1s ease-in-out;
}
複製代碼

欺騙

經過動畫的兩種形態（寬度和左邊距）的變化組合，變爲一種形態（消失）的變化。