您現在的位置是:電腦技術吧?>? 編程技術 ??>??百分比是單位嗎,百分比怎么算??>??正文詳情

百分比是單位嗎,百分比怎么算

羊光霽2019-11-14 22:50:53 人圍觀
簡介計算百分比視區單位視區單位是相對單位,這意味著它們沒有客觀尺寸。它們的大小由視區的大小決定。這里有四個與viewport相關的單元,我將關注前兩個單元,因為它們更可能是百分比

視窗(Viewport)單位  視窗(Viewport)單位是相對單位,意味著它們沒有客觀的尺寸。

它們的大小是由視窗(Viewport)大小決定的。

下面是四個與視窗(Viewport)有關的單位。

  我將集中討論前兩個單位,因為它們更可能被使用。

  在很多情況下,視口單位(vh和vw)和百分比單位在它們可以實現的功能方面是重疊的。

然而,它們每個都有其明顯的優點和缺點。

概括的說:  當處理寬度的時候,%單位更合適。

處理高度的時候,vh單位更好。

  占滿寬度的元素: % vw  正如我所提到的,vw單位根據視窗的寬度決定它的大小。

然而,瀏覽器是根據瀏覽器的窗口計算視窗大小的,包括了滾動條的空間。

  如果頁面延伸超過視口的高度滾動條出現視窗的寬度將會大于html元素的寬度。

  Viewport html body  因此,如果你將一個元素設置為100vw,這個元素將會延伸到html和body元素范圍之外。

在這個例子中,我用紅色邊框包裹html元素,然后給section元素設置背景顏色。

  因為這個細微的差別,當使一個元素橫跨整個頁面的寬度時,最好使用百分比單位而不是視口的寬度。

  占滿高度的元素:vh %  在另一方面,當使一個元素跨越整個頁面的高度時,vh遠比百分比單位好。

  因為用百分比定義的元素的大小是由它的父元素決定的,只有父元素也填滿整個屏幕的高度時我們才能擁有一個填滿整個屏幕的高度的元素。

這通常意味著我們不得不把元素定位成固定的,為了使元素的父元素為html元素,或者依賴一些程序。

  然而,用vh的話,就像下面寫的那么簡單:  CSS Code復制內容到剪貼板  .example {  height: 100vh;  }  不管.example元素如何嵌套,它還是能夠相對于視窗尺寸設置大小。

滾動條的問題也不是一個問題,因為現在大多數頁面通常不會有水平滾動條。

  這里有一些我們可以如何使用vh單位來輕松的創造一些設計的例子。

  全屏的背景圖片  vh單位一個典型的用途是用來創建一個橫跨整個屏幕高度和寬度的背景圖片,不管設備的大小。

這用vh很容易實現:  CSS Code復制內容到剪貼板  .bg {  position: relative;  background: url('bg.jpg') center/cover;  width: 100%;  height: 100vh;  }

  占滿全屏的內容塊像多頁面一樣  同樣地,我們也可以實現有多頁面的效果,通過使頁面的每個內容塊跨越視口的整個高度和寬度。

  CSS Code復制內容到剪貼板  section {  width: 100%;  height: 100vh;  }

  我們可以用javascript來實現翻動頁面的錯覺。

  CSS Code復制內容到剪貼板  $('nav').on('click', function() {  if ( $(this).hasClass('down') ) {  var movePos = $(window).scrollTop() $(window).height();  }  if ( $(this).hasClass('up') ) {  var movePos = $(window).scrollTop() - $(window).height();  }  $('html, body').animate({  scrollTop: movePos  }, 1000);  })  在區域內的圖片  vh單位也可以用來控制在頁面內的圖片的大小。

例如,在一篇文章中,我們可能想要任何的圖片可以在頁面上被完整的查看,不過屏幕的大小為多少。

  做到這一點,我們可以這樣解決:  CSS Code復制內容到剪貼板  img {  width: auto; /* 圖片寬度根據高度按比例調整*/  max-width: 100%; /* 圖片不超過父元素的寬度 */  max-height: 90vh; /* 圖片不超過視口的高度 */  margin: 2rem auto;  }

  瀏覽器的支持情況  因為這些單位相對較新,一些瀏覽器中使用仍有一些問題。

這里就是如何解決這些問題

版權聲明:本文由 羊光霽 整理編輯。

原標題:百分比是多少,一個百分比是多少

轉載注明出處:http://www.dn9ww09s.icu/program/12306.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦怎么還原系統win7,安裝電腦系統教程

    電腦怎么還原系統win7,安裝電腦系統教程 相關圖片電腦如何換系統教程許多朋友想知道如何恢復計算機系統。實際上,恢復計算機系統的方法非常簡單。如果你想學習,編輯一定會教你如何恢復電腦系統!以下是如何恢復計算機系統圖...

  • 火柴棍怎么樣,火柴棍

    火柴棍怎么樣,火柴棍 相關圖片火柴棍戶外在雙光劍短兵相接的戰斗中,許多生產方法得到了改進,光劍加工中加入了濾光片。效果很好。我將在這里談談我的制作經驗光劍練習效果1。準備模板文件(模板。FLA)和...

  • 同步助手,qq同步助手app下載

    同步助手,qq同步助手app下載 相關圖片手機同步助手同步助手可以做什么?個性化鈴聲制作、垃圾清理、一鍵備份、圖標管理、白蘋果修復等,您可以使用同步助手來滿足以上要求,但有些人不知道如何使用同步助手的電腦...

  • 電腦屏幕一直閃爍怎么解決,電腦屏幕閃爍

    電腦屏幕一直閃爍怎么解決,電腦屏幕閃爍 相關圖片電腦顯示屏老是閃屏怎么解決計算機用戶總是需要面對顯示屏。如果電腦屏幕閃爍或晃動,會讓用戶很快感到疲倦。因此,編輯建議,當遇到電腦屏幕閃爍或抖動時,要及時解決,以免...

  • 畫吧繪制Q版人物,Q版畫

    畫吧繪制Q版人物,Q版畫 相關圖片Q版步驟互聯網上經常使用一系列的圖標,特別是Q版的可愛風格圖標,我們都非常喜歡。今天我們要用煙火畫出Q版電視圖標的思路:仔細看電視是一個長方體。我們最多能看到三面,前...

  • 電腦老是自動重啟,電腦關機后自動重啟

    電腦老是自動重啟,電腦關機后自動重啟 相關圖片電腦開機后進不了系統如果計算機總是自動重新啟動,我該怎么辦?計算機總是自動重新啟動的原因有很多。讓我們看看是什么導致計算機自動重新啟動。我希望它能幫助你找出問題并...

  • 六邊形元素,六邊形元素構成

    六邊形元素,六邊形元素構成 相關圖片不規則六邊形善用基本造型,創意靈感不可或缺。此前,騰訊設計師金小燕曾用簡單的圓、正方形和三角形舉例,并借助形狀本身的特點創造性地加以運用,做出了快速有效的貢獻。今...

  • 電腦一鍵重裝后黑屏,一鍵重裝系統失敗黑屏

    電腦一鍵重裝后黑屏,一鍵重裝系統失敗黑屏 相關圖片系統重裝失敗無法開機360一鍵重裝后的黑屏呢?今天系統重新安裝后,很多網友都遇到了黑屏問題。原來,電腦系統出了問題。現在,重新安裝系統后,他們又遇到了黑屏。他們不知道...

  • 基礎工作小助手app下載,英語零基礎自學app軟件

    基礎工作小助手app下載,英語零基礎自學app軟件 相關圖片零基礎學英語的方法app我不知道你是否遇到過這種情況。當你制定一個設計方案,并愉快地向開發人員解釋該方案的理念和創意時,開發人員突然說:這個方案無法實現,然后你就一點...

  • 怎么做系統u盤,系統u盤怎么裝系統

    怎么做系統u盤,系統u盤怎么裝系統 相關圖片沒有u盤怎么重裝系統U盤系統,你已經明白了。也許你們都知道U盤系統。實際上,U盤系統無法安裝。你聽說過U盤系統嗎?你有一些問題。讓小編告訴你,U盤系統是安裝U盤系統前的高科...

熱評文章

  • microsoftedge打不開,microsoft edge閃退

    microsoftedge打不開,microsoft edge閃退 相關圖片microsoft edge更新除了Microsoft edge占用的高內存外,還存在兼容性問題。比如打開百度在線磁盤時,發現經常出現頁面錯誤,無法順利進入主界面。那么如何解決微軟edge無法microsoft edge兼容...

  • skype網絡電話安卓,skype網絡電話手機版

    skype網絡電話安卓,skype網絡電話手機版 相關圖片網絡電話哪個軟件好用Skype是最流行的互聯網電話之一。無論你身在何處,你都可以輕松地與多個朋友分享精彩時刻。也許有些網友不知道Skype網絡電話的用法。拿著它skype打電話多少錢...

  • 皮影動畫,皮影動畫制作

    皮影動畫,皮影動畫制作 相關圖片老動畫片大全80年代皮影在這個例子中,我們將使用flashcs4的新骨架工具來創建反向運動,它可以在短時間內產生復雜自然的動畫效果。這種方法非常適合陰影動畫這個例子的思想是導入...

  • 電腦的輸入法不見了,電腦輸入法出不來

    電腦的輸入法不見了,電腦輸入法出不來 相關圖片電腦切換輸入法對于經常使用電腦的老兵來說,電腦輸入法的消失是一個很容易通過的彎道,但對于新手來說,這個彎道會出現“翻滾”現象。下面編輯將教新手如何解決電腦輸入法消...

  • 晶瑩剔透比喻人的,形容晶瑩剔透

    晶瑩剔透比喻人的,形容晶瑩剔透 相關圖片晶瑩剔透的水珠像什么最終效果展示晶瑩剔透的反義詞...

  • 電腦設置鎖屏密碼,電腦如何設置密碼鎖屏

    電腦設置鎖屏密碼,電腦如何設置密碼鎖屏 相關圖片電腦密碼怎么取消如何設置計算機密碼?很多時候,我們需要離開電腦,不想讓別人使用,但關閉電腦太麻煩了。我想鎖定密碼。今天,為了幫助大家,小編將與大家分享如何設置電腦...

  • 響應式的,什么是響應式

    響應式的,什么是響應式 相關圖片網頁響應式在整個網站的發展過程中,圖片的管理難度很大。請注意,圖片應在各種設備上平滑顯示。他們會遇到的問題是:適當優化和縮小圖片尺寸,注意不要浪費帶寬(網站加載速...

  • Internetexplorer,internet怎么更新

    Internetexplorer,internet怎么更新 相關圖片internet設置為了匹配窗口的新Luna桌面計劃,Internet Explorer 6在其工具欄按鈕上添加了一些顏色。windows徽標的新顏色在白色背景上更清晰。使Inteinternet升級...

  • 單選按鈕組,單選按鈕組怎么設置

    單選按鈕組,單選按鈕組怎么設置 相關圖片vb單選按鈕組怎么設置一。插入單個單選按鈕1。單擊鼠標,將光標定位在表單框中,單擊“插入”菜單,選擇表單項,然后在彈出的子菜單中選擇單選按鈕命令,或在“插入”面板中選...

  • 電腦無法開機,電腦無法開機怎么辦

    電腦無法開機,電腦無法開機怎么辦 相關圖片電腦開機完全沒反應當我們遇到電腦無法開機時,有些人會認為是系統問題導致了這種情況。事實上,這不一定是系統問題,但也從硬件方面。因此,我們應該一個接一個地檢查,直到...

關注微信

变脸官网查询