您現在的位置是:電腦技術吧?>? 基礎知識 ??>??百分比,百分比怎么求??>??正文詳情

百分比,百分比怎么求

卑覓丹2019-11-27 10:11:47 人圍觀
簡介計算百分比許多CSS屬性的值可以是百分比值。雖然從形式上講,百分比值的形式是數字后跟%值(注意數字和%值之間不能有空格),但其含義在不同的情況下會有所不同。因此,百分率可

很多css屬性的取值都可以是百分比值。

雖然形式上來說,百分比值都是數字后跟%的形式(注意數字和%之間不可以有空格),但在不同的使用場合下,其意義會有很多不同。

因此,百分比值可以說包含了相當豐富的內容。

  百分比值是相對值  要理解諸如100%這樣的百分比值,其關鍵點是要明白,百分比是一定有其對應的參照值的。

也就是說,百分比值是一種相對值,任何時候要分析它的效果,都需要正確找到它的參照。

  一個css屬性值從定義到最終實際使用,是存在一個過程的。

這其中涉及到Specified Values(指定值)、Computed Values(計算值)、 Used Values(使用值)、Actual Values(實際值)等概念,可以想見到,百分比值實際會在這個過程中,根據它的參照計算轉化為一個絕對值(比如100px),然后再被應用。

這就是百分比值的意義。

  更多關于css屬性值的處理過程的信息,可以查看Value Processing。

  百分比值的作用?  簡單地說,就是可變性。

這可以衍生出自適應、響應式等看起來很有用的東西。

  比如說,一個固定寬高的盒子,然后希望盒子內有一個絕對定位的,寬高和盒子一樣的蓋板(就這樣稱呼吧...),下面這樣的寫法會很合適:  CSS Code復制內容到剪貼板  .box{position:relative;width:100px;height:100px;}  .box_cover{position:absolute;width:100%;height:100%;left:0;top:0;}  這里使用百分比值的好處的是,如果需要修改盒子的尺寸,只需要修改盒子的寬高,而蓋板會自動保持和盒子的尺寸一致。

  再一個例子是Bootstrap的柵格系統:

  可以看到,柵格系統里會用到百分比值來實現確切的對空間的劃分。

百分比值是相對的,自適應的,因此柵格系統可以很好地用于響應式設計。

  可用百分比值的常見css屬性  width height  寬和高在使用百分比值時,其參照都是元素的包含塊(Containing Block,詳情)。

width參照包含塊的寬度,height參照包含塊的高度。

在大部分情況下,包含塊就是父元素的內容區(盒模型里的content)。

  我以前寫過width:100%; height:100%;這樣的代碼來實現尺寸和父元素一致。

但我發現有時候寬度是符合意思(100%)的,但高度卻沒有效果。

請看下面這個示例:

  可以看到,直接父元素(包含塊)是否有明確的高度定義,會影響height為百分比值時的結果。

  關于這一點的詳細解釋是,當一個元素的高度使用百分比值,如果其包含塊沒有明確的高度定義(也就是說,取決于內容高度),且這個元素不是絕對定位,則該百分比值等同于auto。

auto是初始默認值,所以看起來就像是失效了。

  如果元素是根元素(),它的包含塊是視口(viewport)提供的初始包含塊(initial containing block),初始包含塊任何時候都被認為是有高度定義的,且等于視口高度。

所以,標簽的高度定義百分比總是有效的,而如果你希望在里也用高度百分比,就一定要先為定義明確的高度。

這就是為什么在之前的固定頁腳一文中,有html, body{height:100%;}這樣的寫法。

  margin padding  這2個屬性屬于混合屬性,也通過一個例子說明:

  可以分析得到,對于margin和padding,其任意方向的百分比值,參照都是包含塊的寬度。

  為什么會多個方向都取包含塊的寬度作為參照呢?在我看來,包含塊的寬度在塊布局的排版中是最有用的(想象一下word里輸入文字,到寬度邊緣后換行的場景),對應的,水平方向的內外邊距一定要參照包含塊的寬度。

再考慮垂直方向的內外邊距,它們如果不和水平方向取相同的參照物,就會因為不一致而很難使用。

所以,總體來說,統一以包含塊的寬度作為參考,會具有相對最好的可用性。

  嚴格地說,參照是包含塊的寬度,是在樣式屬性writing-mode為默認值時的情況。

不過這個屬性極少被用到,所以在此不做考慮。

  border-radius  你也許見過有人用下面的代碼來讓一個矩形變成剛好的圓形(請體會這個剛好):  CSS Code復制內容到剪貼板  .circle{border-radius:50%;}  對此的解釋是,為一個元素的border-radius定義的百分比值,參照物是這個元素自身的尺寸。

也就是說,假如這個元素寬是60px,高是50px(border-box的尺寸),那么border-radius:50%的結果等同于border-radius:30px/20px;。

  如果你還疑惑這里帶/的圓角寫法,請查看MDN對border-radius的說明。

  background-position  background-position的初始值就是百分比值0% 0%。

下面是一個使用示例:

  background-position的百分比值,取的參照是一個減法計算值,由放置背景圖的區域尺寸,減去背景圖的尺寸得到,可以為負值。

對照上面的示例,思考一下,應該可以感受到,以這個減法計算值為參照的話,正好可以符合我們感官上對背景圖位置的理解。

  這個屬性包括水平位置和垂直位置,它們分別參照的是寬度減法計算值和高度減法計算值。

  你可能注意到了上面示例的最后一個竟然寫了4個值(一般都只用2個值)。

關于它的意義,請查看W3C的background-position。

  font-size  參照是直接父元素的font-size。

例如,一個元素的直接父元素的font-size是14px,無論這個是直接定義的,還是繼承得到的,當該元素定義font-size:100%;,獲得的效果就是font-size:14px;。

  line-height  參照是元素自身的font-size。

例如,一個元素的font-size是12px,那么line-height:150%;的效果是line-height:18px;。

  vertical-align  參照是元素自身的line-height(和前面很有關聯吧,所以我排在了這里)。

例如,一個元素的line-height是30px,則vertical-align:10%;的效果是vertical-align:3px;。

  對這個屬性我還想說,盡管vertical-align可以使用數字,百分比值,但瀏覽器兼容性差異較大,在跨瀏覽器實現時可能需要較多hack。

因此,我個人傾向于使用middle等相對來說兼容性差異較小的關鍵字類型的值。

  定位用的bottom、left、right、top  參照是元素的包含塊。

left和right是參照包含塊的寬度,bottom和top是參照包含塊的高度。

  transform: translate  平移變換,在水平方向和垂直方向上也可以使用百分比,其參照是變換的邊界框的尺寸(等于這個元素自己的border-box尺寸)。

例如,一個寬度為150px,高度為100px的元素,定義transform:translate(50%, 50%)的效果是transform:translate(75px, 50px);。

  還可以補充一點,translate3d對應是還有第三個維度的,但是,經過測試,最后的第3個值不可以使用百分比(否則樣式定義無效)。

至于為什么不可以參照呢,大概是因為那是神秘的第三維度吧...  其他  如果你想要知道更多的百分比值在css屬性中的可用情況及參照值,請參考MDN的CSS percentage values。

  百分比值的繼承  請注意,當百分比值用于可繼承屬性時,只有結合參照值計算后的絕對值會被繼承,而不是百分比值本身。

例如,一個元素的font-size是14px,并定義了line-height:150%;,那么該元素的下一級子元素繼承到的line-height就是21px,而不會再和子元素自己的font-size有關。

  結語  好不容易終于看完了這么多百分比值的用法,有興趣要使用一些嗎?(?-?*)  我自己的看法是,百分比值是css所提供的一種建立元素與元素之間,或者元素的不同屬性之間的關聯性的有效方法。

只要是想建立一種關聯性,都可以適當考慮使用百分比值。

而且,不需自己做任何動態的事件處理和更新,任何時候,你都可以信賴這個百分比。

版權聲明:本文由 卑覓丹 整理編輯。

原標題:求百分比,怎么算百分比

轉載注明出處:http://www.dn9ww09s.icu/basics/14550.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 余額寶有上限嗎,余額寶

    余額寶有上限嗎,余額寶 相關圖片余額寶即將取消余波的投資方法非常簡單,即使是新手理財也能輕松操作。但近日支付寶安卓版余額寶宣布調整個人投資上限。今天,小編為大家帶來了一款個人投資上限的支付寶余額...

  • 鼠標滾輪放大縮小功能,鼠標滾輪放大縮小

    鼠標滾輪放大縮小功能,鼠標滾輪放大縮小 相關圖片cad鼠標滾輪放大縮小設置您和我都知道,將鼠標滾輪事件添加到HTML5網頁可以更好地讓用戶與網頁交互。在HTML5中,鼠標滾輪不僅可以上下滑動網頁,其實你還可以依靠這個來完成更多的...

  • 兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務

    兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務 相關圖片兼職貓個人認證可以發什么如今,越來越多的大學生會利用業余時間做兼職,不僅鍛煉身體,還能掙零花錢。所以作為一個企業,你想通過它找到可靠的大學生。那么,兼職貓如何才能...

  • 怎么讓瀏覽器支持HTML5,什么瀏覽器支持HTML5

    怎么讓瀏覽器支持HTML5,什么瀏覽器支持HTML5 相關圖片手機瀏覽器支持HTML5HTML5、CSS3等相關技術,如canvas、websocket等,將web應用開發推向了一個新的高度。該技術將HTML、CSS和JavaScript結合起來UC瀏覽器支持HTML5嗎...

  • app有什么用,好用app

    app有什么用,好用app 相關圖片應用軟件魔獸軍團伴侶是一款官方的魔獸世界游戲助理軟件。那么你是如何運作魔獸軍團的?如果你對魔獸軍團感興趣看片軟件哪個最好用...

  • 's和s'的用法,最高級的用法

    's和s'的用法,最高級的用法 相關圖片比較級的用法和句型準限定選擇器您應該避免過度修改選擇器,例如,如果您可以編寫。NAV{},盡量不要寫UL。導航{}。過度修改選擇器將影響選擇器的性能、類的可重用性和私有度。這...

  • 軟件undefined是什么意,下載undefined是什么意思

    軟件undefined是什么意,下載undefined是什么意思 相關圖片undefined吧win10系統越來越穩定,許多微軟用戶正在將自己的計算機系統升級為win10系統。然而,許多用戶報告他們正在下載更新的FBL﹣expression profesundefined錯誤代碼...

  • 全民K歌,全民k歌5.3.7

    全民K歌,全民k歌5.3.7 相關圖片全民k歌6.1版本民族卡拉OK是一款非常有趣的手機卡拉OK軟件,用戶不用出門就能感受到卡拉OK的樂趣。用戶還可以在聽到自己喜愛的歌手的歌聲時送上禮物表示支持。那么如何贈送全國卡...

  • 指南的編寫過程,指南編寫格式

    指南的編寫過程,指南編寫格式 相關圖片運作手冊編寫指南代碼如下:[selector]{[property]:[value];[-declaration-]}P[selector]{[property]:[value指南編寫樣章...

  • 美顏相機眼淚,美顏相機怎么能弄眼淚

    美顏相機眼淚,美顏相機怎么能弄眼淚 相關圖片美顏相機哪個好用美的相機是一個強大的照片美化軟件。最近,很多小朋友都說看到朋友們在曬眼睛和化妝,覺得很美。那么美妝相機的新催淚效果呢?接下來,超人軟件編輯將為您介...

熱評文章

  • 無障礙專車,滴滴無障礙專車

    無障礙專車,滴滴無障礙專車 相關圖片滴滴關愛出行無障礙車近年來,為有特殊需要的旅客提供專屬服務越來越受到重視。未來,滴滴的安卓版已經宣布,它將能夠使用無障礙汽車為特殊人群。讓我們看看滴滴無障礙車的預...

  • win7桌面圖標異常,win7不顯示桌面圖標

    win7桌面圖標異常,win7不顯示桌面圖標 相關圖片win7桌面圖標怎么變小超人編輯今天想談談win7的一些基礎課程。本課程介紹Windows 7桌面圖標的顯示方法。主要針對Windows7家庭普通版和高級版用戶。沒有個性化配置條目,因win7桌面不顯示...

  • css有多少選擇符,css的選擇符

    css有多少選擇符,css的選擇符 相關圖片css三種基本選擇符原來的名字可以這么一段時間以前,我在一個網站上看到這樣的內容:這個也可以嗎?這是我的第一印象。不過,經過一番調查,我們知道這確實有效。另外,“U”的...

  • 哈羅單車開鎖,哈羅單車怎么開鎖

    哈羅單車開鎖,哈羅單車怎么開鎖 相關圖片哈羅單車開鎖破解近日,不少朋友向小編反映,小明自行車的車鎖經常打不開。那么如何應對安卓版小明自行車無法解鎖的情況。今天,超人小編為大家帶來了小明自行車解鎖失敗的解...

  • 茨林面板,面板

    茨林面板,面板 相關圖片顯示面板快捷鍵可以提高我們平時的工作效率。今天,我將介紹Dreamweaver文件面板的快捷鍵。vcm面板...

  • 電腦開機要選擇系統,win7系統如何去除桌面水印

    電腦開機要選擇系統,win7系統如何去除桌面水印 相關圖片電腦開機兩個系統選擇win系統下設置了6個文件夾,包括視頻、圖片、文檔、下載、音樂和桌面。但是由于有六個文件夾,整個資源管理器頁面變得更加復雜。有沒有辦法把這臺電腦下面...

  • 表單提交,已提交表單

    表單提交,已提交表單 相關圖片html提交表單以JSON編碼格式提交表單數據是HTML5對web發展和演進的又一重大貢獻。以前,我們的HTML表單數據是通過服務器端的鍵值模式傳輸的,缺乏數據組織管理,非常原網頁表單提交...

  • 白條閃付入口沒了,白條閃付的開通條件

    白條閃付入口沒了,白條閃付的開通條件 相關圖片京東白條閃付微信支付看到身邊的小伙伴們打開京東白條,生活變得更加方便。你還想開京東白條付款嗎?如果你想打開京東白條的flash支付,但是你不知道打開的入口在哪里,你可以看...

  • 支付寶中的理財安全嗎,支付寶什么理財最安全

    支付寶中的理財安全嗎,支付寶什么理財最安全 相關圖片支付寶月度理財安全嗎樂邁寶是一款宣傳用戶可以邊消費邊賺錢的軟件。聽起來不可思議,因為這意味著我們買得越多,賺得越多。這顯然是促進消費的一種手段。所以很多人擔心它是...

  • 選擇符有哪些,選擇符

    選擇符有哪些,選擇符 相關圖片p是什么選擇符當我第一次開始編寫CSS時,我對代碼的高度自由感到困惑。也就是說,如果同一個設計是由不同的人實現的,那么最終的代碼必須是不同的。但有個問題。如果不同的人通...

關注微信

变脸官网查询