CSS欺騙

Drummor 發(fā)布于2019-08-30 11:08 / 911人閱讀

摘要：下面就介紹幾種情況，僅供參考持續(xù)更新位置欺騙圖片占位場景從后端拉取一張圖片，然后顯示在前端，圖片寬高各為，或者寬高比為實現(xiàn)在端一般是沒問題的，因為固定寬度和高度。

為什么叫這個題目呢？

其實，自己剛開始接觸前端的時候，以為界面就是和正常的流式布局一樣，這里放一個div，那里放一個div，整個界面就搭建完成了。做過幾次項目后，好像自己想的也沒錯，就按照前面的思路，可以解決大部分的界面搭建。但是有的時候，需要一些特殊的處理，這些特殊的處理，可能會打破你腦袋中的流式布局。
下面就介紹幾種情況，僅供參考（持續(xù)更新）

1、位置欺騙——圖片占位 場景

從后端拉取一張圖片，然后顯示在前端，圖片寬高各為100px，或者寬高比為1:1

實現(xiàn)

//html


//css
img {
    width: 100px;
    height: 100px;
}

在pc端一般是沒問題的，因為固定寬度和高度。

但是在移動端，這樣的方式就顯得不太合理，寬度一般通過設(shè)置為百分比，但是高度就沒法設(shè)置為百分比了，移動端的高度一般是無限拖動的，設(shè)置百分比明顯是不行的。

為什么移動端要用百分比？請戳

GPU云服務(wù)器云服務(wù)器被欺騙 icmp欺騙 dns欺騙攻擊服務(wù)器端口欺騙

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114794.html

相關(guān)文章

CSS欺騙

摘要：下面就介紹幾種情況，僅供參考持續(xù)更新位置欺騙圖片占位場景從后端拉取一張圖片，然后顯示在前端，圖片寬高各為，或者寬高比為實現(xiàn)在端一般是沒問題的，因為固定寬度和高度。為什么叫這個題目呢？其實，自己剛開始接觸前端的時候，以為界面就是和正常的流式布局一樣，這里放一個div，那里放一個div，整個界面就搭建完成了。做過幾次項目后，好像自己想的也沒錯，就按照前面的思路，可以解決大部分的界面搭建...

roundstones 2019-08-02 15:15 評論0 收藏0
HTML 文檔流，設(shè)置元素浮動，導(dǎo)致父元素高度無法自適應(yīng)的解決方法（高度欺騙）

摘要：元素浮動定義屬性定義元素在哪個方向浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。子元素浮動會導(dǎo)致父元素高度塌陷這是因為內(nèi)部的元素設(shè)置后，就丟失了和持懷疑態(tài)度的樣式，所以外部的父容器不會被撐開。元素浮動定義 float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何...

yy736044583 2019-08-29 15:40 評論0 收藏0
HTML 文檔流，設(shè)置元素浮動，導(dǎo)致父元素高度無法自適應(yīng)的解決方法（高度欺騙）

摘要：元素浮動定義屬性定義元素在哪個方向浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。子元素浮動會導(dǎo)致父元素高度塌陷這是因為內(nèi)部的元素設(shè)置后，就丟失了和持懷疑態(tài)度的樣式，所以外部的父容器不會被撐開。元素浮動定義 float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何...

iflove 2019-08-02 10:40 評論0 收藏0
Linkedin Intro的釣魚研究

摘要：年月日，我聯(lián)系了的安全團(tuán)隊，并會在近期發(fā)布修復(fù)補(bǔ)丁來解決下面的問題。有關(guān)月日，推出一個名為的應(yīng)用程序。會對你的做些什么為了更好地觀察的行為，目前我正對其進(jìn)行更深入的分析研究，并很快就會發(fā)布。釣魚去啦為達(dá)教學(xué)目的，我已經(jīng)建立了一個基本的模板。 2013年10月28日，我聯(lián)系了Linkedin的安全團(tuán)隊，并會在近期發(fā)布修復(fù)補(bǔ)丁來解決下面的問題。這個修復(fù)程序適用于隨機(jī)生成ID的styling...

lykops 2019-08-28 17:51 評論0 收藏0
Linkedin Intro的釣魚研究

摘要：年月日，我聯(lián)系了的安全團(tuán)隊，并會在近期發(fā)布修復(fù)補(bǔ)丁來解決下面的問題。有關(guān)月日，推出一個名為的應(yīng)用程序。會對你的做些什么為了更好地觀察的行為，目前我正對其進(jìn)行更深入的分析研究，并很快就會發(fā)布。釣魚去啦為達(dá)教學(xué)目的，我已經(jīng)建立了一個基本的模板。 2013年10月28日，我聯(lián)系了Linkedin的安全團(tuán)隊，并會在近期發(fā)布修復(fù)補(bǔ)丁來解決下面的問題。這個修復(fù)程序適用于隨機(jī)生成ID的styling...

wenshi11019 2019-06-21 16:22 評論0 收藏0