css position屬性為absolute時(shí)，其百分值的計(jì)算

haoguo 發(fā)布于2019-08-30 15:44 / 1900人閱讀

摘要：當(dāng)為時(shí)候，其相關(guān)屬性的百分比是相對(duì)它參考的元素包含塊來(lái)進(jìn)行計(jì)算并進(jìn)行位置渲染的。如果包含塊的值會(huì)根據(jù)它的內(nèi)容變化，而且包含塊的屬性的值被賦予或，那么，這些值的計(jì)算值為。

當(dāng)position為absolue時(shí)候，其相關(guān)屬性的百分比是相對(duì)它參考的元素（包含塊）來(lái)進(jìn)行計(jì)算并進(jìn)行位置渲染的 。
首先我們必須知道：
1、[百分比的參照][1]：
根據(jù)包含塊計(jì)算百分值 （1）元素的margin/padding/left/right/width參照包含塊的width來(lái)計(jì)算；（2）要計(jì)算 height /top 及 bottom 中的百分值，是通過(guò)包含塊的 height 的值。如果包含塊的 height 值會(huì)根據(jù)它的內(nèi)容變化，而且包含塊的 position 屬性的值被賦予 relative 或 static ，那么，這些值的計(jì)算值為 0。
2、[確定包含塊][2]：
確定一個(gè)元素的包含塊的過(guò)程完全依賴(lài)于這個(gè)元素的 position 屬性：
（1）如果 position 屬性為 static 或 relative ，包含塊就是由它的最近的“祖先塊元素”（比如說(shuō)inline-block, block 或 list-item元素）或格式化上下文(比如說(shuō) a table container, flex container, grid container, or the block container itself)的內(nèi)容區(qū)的邊緣（content）組成的。
（2）如果 position 屬性為 absolute ，包含塊就是由它的最近的 position 的值不是 static （也就是值為fixed, absolute, relative 或 sticky）祖先元素的內(nèi)邊距區(qū)的邊緣（padding-left + content + padding-right）組成。




    


    
        This is a paragraph!

云服務(wù)器 GPU云服務(wù)器 position屬性，css position:absolute position，css css屬性

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

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

相關(guān)文章

關(guān)于CSS一些細(xì)節(jié)問(wèn)題

摘要：本文是年的最后一篇文章，主要是將一些細(xì)節(jié)問(wèn)題整理一下。垂直百分比的值等于容器高度百分比值減去背景圖片高度百分比值。如果兩者同時(shí)存在時(shí)，只有起作用如果兩者同時(shí)存在時(shí)，只有起作用。本文是2016年的最后一篇文章，主要是將一些CSS細(xì)節(jié)問(wèn)題整理一下。 background-position取值為百分比的計(jì)算方式 margin相鄰折疊問(wèn)題 position的absolute和relativ...

yedf 2019-08-30 13:16 評(píng)論0 收藏0
我所了解的CSS包含塊

摘要：根元素包含塊根元素的包含塊是一個(gè)矩形叫做初始化包含塊。如果屬性是的話(huà)，包含塊就是由組成的。示例二代碼在這里，這個(gè)標(biāo)簽為默認(rèn)的且它的父標(biāo)簽的為，所以標(biāo)簽的包含塊為標(biāo)簽，通過(guò)我們的判斷規(guī)則一來(lái)確定。寫(xiě)在前面，本文將同步發(fā)布于Blog、掘金、segmentfault、知乎等處，如果本文對(duì)你有幫助，記得為我得到我的個(gè)人技術(shù)博客項(xiàng)目給個(gè)star哦。指出錯(cuò)誤觀(guān)念許多開(kāi)發(fā)者認(rèn)為一個(gè)元素的包含塊...

BenCHou 2019-08-30 15:54 評(píng)論0 收藏0
CSS中的百分比

摘要：我們一般喜歡將寬度設(shè)置成百分比，但在將高度設(shè)置成百分比的時(shí)候要注意。解決方法利用函數(shù)讓的寬度減去因?yàn)榈陌俜直仁菂⒄掌涓冈氐膶挾扔?jì)算的，因此這里將它的父元素的寬度減小，那么它的的自然就小了結(jié)論：標(biāo)準(zhǔn)流中的元素，看其屬性有沒(méi)有繼承性。對(duì)于width和margin-left，它是可以繼承的，它會(huì)參照父元素或者祖先元素（其實(shí)是包含塊）；對(duì)于height，它沒(méi)有繼承性，父元素或者祖先元素...

LeoHsiun 2019-08-29 15:38 評(píng)論0 收藏0
CSS中的百分比

摘要：我們一般喜歡將寬度設(shè)置成百分比，但在將高度設(shè)置成百分比的時(shí)候要注意。解決方法利用函數(shù)讓的寬度減去因?yàn)榈陌俜直仁菂⒄掌涓冈氐膶挾扔?jì)算的，因此這里將它的父元素的寬度減小，那么它的的自然就小了結(jié)論：標(biāo)準(zhǔn)流中的元素，看其屬性有沒(méi)有繼承性。對(duì)于width和margin-left，它是可以繼承的，它會(huì)參照父元素或者祖先元素（其實(shí)是包含塊）；對(duì)于height，它沒(méi)有繼承性，父元素或者祖先元素...

CKJOKER 2019-08-26 12:00 評(píng)論0 收藏0
《css世界》- 詳細(xì)重點(diǎn)筆記與技巧

摘要：概述在世界這本書(shū)中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。概述在《css世界》這本書(shū)中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲?。。∫韵率钦悦空聝?nèi)一些重要的概念與技巧。其中有解決圖片間隙的問(wèn)題、小圖標(biāo)與文字居中問(wèn)題等; ps: 特別是 line-h...

MasonEast 2019-08-02 12:03 評(píng)論0 收藏0