成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS中百分比是相對(duì)于誰(shuí)?

cartoon / 3251人閱讀

摘要：用到百分比的屬性為什么要知道所以百分比都是相對(duì)于其來(lái)計(jì)算的的定義翻譯自的定義和元素的屬性有關(guān)或時(shí)最近的比如或者創(chuàng)建了比如或的祖先元素的最近的屬性不是的祖先元素的窗口特殊情況或時(shí)當(dāng)其父元素有以下情況出現(xiàn)時(shí)為其父元素的或?qū)傩缘闹挡皇?/p>

1. 用到百分比的屬性:

width, height

margin, padding

top, right, bottom, left

transform - translate

background-position, background-size

2. containing block 2.1 為什么要知道containing block

MDN:

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element"s nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that deterime an element"s containing block.

所以百分比都是相對(duì)于其containing block來(lái)計(jì)算的

2.2 containing block的定義

翻譯自MDN:

containing block的定義和元素的postion屬性有關(guān):



static 或 relative時(shí): 
最近的__block container__(比如inline-block, block, list-item)或者創(chuàng)建了__formatting context__(比如table container, flex container, grid container或block container)的祖先元素的__context box__




absolute: 
最近的position屬性不是static的祖先元素的__padding box__




fixed:
窗口




特殊情況, fixed或absolute時(shí), 當(dāng)其父元素有以下情況出現(xiàn)時(shí), containing block為其父元素的__padding box__: 
1). transform或perspective屬性的值不是none


2). will-change屬性的值是transform或perspective


3). filter屬性不是none或will-change屬性的值是filter(只在Firefox中有效)
3. 如何計(jì)算

height, top, bottom根據(jù)其containing block的height進(jìn)行計(jì)算, 如果該height沒(méi)有指定(根據(jù)內(nèi)容自適應(yīng)), 那么計(jì)算值為0

width, left, right, padding, margin根據(jù)其containing block的width進(jìn)行計(jì)算

transform - translate, translateX, translateY, 根據(jù)__自身元素__的實(shí)際寬度計(jì)算

background:

4.1 background-position根據(jù)__自身元素(不是containing block)__的寬高計(jì)算

4.2 background-size根據(jù)圖片的大小進(jìn)行計(jì)算. 需要注意的時(shí), 當(dāng)使用單個(gè)百分比(比如background-size: 50%;)計(jì)算時(shí), height會(huì)隱式設(shè)為auto, 當(dāng)其height計(jì)算出來(lái)的值大于容器的高度時(shí), 超出部分會(huì)隱藏. 如果需要全部顯示, 需要明確設(shè)置寬和高的值(比如, background-size: 50% 50%;)

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

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

相關(guān)文章

  • CSS屬性中經(jīng)常出現(xiàn)的百分比

    摘要：絕對(duì)單位英寸磅相對(duì)單位與元素字號(hào)掛鉤與元素字體的高度掛鉤與根元素字號(hào)掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進(jìn)。參考權(quán)威教程節(jié)樣式可以使用百分比的屬性總結(jié)淺析屬性之中經(jīng)常出現(xiàn)的百分比 起源：一道面試題（貓眼電影） 問(wèn)題：css中的單位都有哪些？可以取百分?jǐn)?shù)的單位有哪些？其中margin-top取百分?jǐn)?shù)時(shí)是相對(duì)于誰(shuí)來(lái)計(jì)算的？ 回答： （1）css中的單位：CSS規(guī)...

    mylxsw 評(píng)論0 收藏0

  • 探究position定位中absolute和relative的異同

    摘要：總結(jié)一下定位相對(duì)于誰(shuí)進(jìn)行定位有點(diǎn)復(fù)雜就是找出定位元素父元素鏈上的所有父元素，由近到遠(yuǎn)哪個(gè)元素不是默認(rèn)定位即定位的，那么就相對(duì)于它進(jìn)行定位。當(dāng)父元素鏈上所有父元素都是默認(rèn)定位，那么定位就是相對(duì)于元素的，效果和定位差不多。 相信學(xué)過(guò)CSS的同學(xué)都曾經(jīng)對(duì)于position的各種屬性很困惑，尤其是absolute和relative定位，簡(jiǎn)直就是傻傻分不清，筆者寫(xiě)這篇文章就是希望通過(guò)代碼實(shí)驗(yàn)的方...

    NickZhou 評(píng)論0 收藏0

  • 2019年前端面試題-02

    摘要：在客戶端編程語(yǔ)言中，如和，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制協(xié)議下腳本的訪問(wèn)權(quán)限。遍歷循環(huán)循環(huán)方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。 px、em和rem的區(qū)別 px表示像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)：1px = 1/96in)，是絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?em表示相對(duì)...

    MageekChiu 評(píng)論0 收藏0

  • 2019年前端面試題-02

    摘要：在客戶端編程語(yǔ)言中，如和，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制協(xié)議下腳本的訪問(wèn)權(quán)限。遍歷循環(huán)循環(huán)方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。 px、em和rem的區(qū)別 px表示像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)：1px = 1/96in)，是絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?em表示相對(duì)...

    trilever 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<