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

資訊專(zhuān)欄INFORMATION COLUMN

CSS中的百分比

LeoHsiun / 3093人閱讀

摘要：我們一般喜歡將寬度設(shè)置成百分比，但在將高度設(shè)置成百分比的時(shí)候要注意。解決方法利用函數(shù)讓的寬度減去因?yàn)榈陌俜直仁菂⒄掌涓冈氐膶挾扔?jì)算的，因此這里將它的父元素的寬度減小，那么它的的自然就小了

結(jié)論：

標(biāo)準(zhǔn)流中的元素，看其屬性有沒(méi)有繼承性。對(duì)于width和margin-left，它是可以繼承的，它會(huì)參照父元素或者祖先元素（其實(shí)是包含塊）；對(duì)于height，它沒(méi)有繼承性，父元素或者祖先元素會(huì)自適應(yīng)其所有子元素的高度和（這點(diǎn)是需要注意的）。

絕對(duì)定位參照的是離它最近的父元素或祖先元素，如果沒(méi)有父元素或祖先元素，那么參照的是初始包含塊（不同的瀏覽器可能不一樣，因?yàn)閃3C沒(méi)有規(guī)定瀏覽器具體如何去實(shí)現(xiàn)）。但實(shí)際上，大部分瀏覽器將可視區(qū)當(dāng)作絕對(duì)定位的包含塊。

固定定位參照可視區(qū)

width設(shè)置成百分比

一般子元素通常將繼承父元素計(jì)算過(guò)的值當(dāng)作百分比的參照，對(duì)于不可繼承的屬性和根元素，則使用初始值作為參照

比如.box沒(méi)有設(shè)置寬度，但默認(rèn)繼承了body計(jì)算過(guò)的值，又因?yàn)?box是.item的父元素，因此.item又繼承了.box計(jì)算過(guò)的值。當(dāng)一個(gè)塊級(jí)元素不設(shè)置寬度時(shí)，則它的寬度默認(rèn)為全屏，就是因?yàn)樗^承了包含塊的寬度。

height設(shè)置成百分比

結(jié)論

高度設(shè)置成百分比時(shí)，高度不像寬度一樣會(huì)繼承父元素或者祖先元素，相反，父元素或者祖先元素會(huì)根據(jù)子元素的實(shí)際高度（高度計(jì)算值）來(lái)自適應(yīng)，一般為所有子元素的內(nèi)容加起來(lái)的高度和。而子元素會(huì)根據(jù)文字行高來(lái)設(shè)置高度具體值（在子元素高度不設(shè)置具體值的情況下）。對(duì)于有absolute定位的元素，其高度為百分比時(shí)會(huì)參照父元素或祖先元素的高度，絕對(duì)定位參照的是離它最近的父元素或祖先元素，如果沒(méi)有父元素或祖先元素，那么參照的是初始包含塊（不同的瀏覽器可能不一樣，因?yàn)閃3C沒(méi)有規(guī)定瀏覽器具體要如何實(shí)現(xiàn)）。但實(shí)際上，大部分瀏覽器將可視區(qū)當(dāng)作絕對(duì)定位的包含塊。

我們一般喜歡將寬度設(shè)置成百分比，但在將高度設(shè)置成百分比的時(shí)候要注意。

 

height 100%

html為什么會(huì)出現(xiàn)height等于21呢？是不是這21是從祖先元素繼承過(guò)來(lái)的？當(dāng)我們把body的高度設(shè)置成100%結(jié)果還是一樣。其實(shí)這里的高度為行高的高度，也就是說(shuō)，在高度為0或者不設(shè)置高度的情況下，高度是文字的行高，當(dāng)我們?cè)?box中加上line-height:20px;時(shí)，box,body和html的高度都會(huì)變成20px;當(dāng)我們把.box高度設(shè)置成具體值時(shí)：

 

height 100%

可以發(fā)現(xiàn)，body和html竟然跟.box高度一樣為100px.所以可以得出父元素在不設(shè)置高度的情況下，是自適應(yīng)子元素高度的（在不設(shè)置高度的情況下，html和body的高度是所有內(nèi)容加起來(lái)的高度），如果父元素設(shè)置了高度，則是另外一種情況了:

 



height

可以發(fā)現(xiàn)d,body,html的高度都變成了100px(本來(lái)應(yīng)該是200px),說(shuō)明父元素或祖先元素時(shí)被動(dòng)自適應(yīng)子元素高度的，它們的高度值不會(huì)繼承給自元素。

當(dāng)有absolute定位時(shí)

1.絕對(duì)定位沒(méi)有定位的祖先元素

這時(shí)絕對(duì)定位參照的是一個(gè)視口的高度，注意視口這個(gè)概念。

 

height 100%

?

改變height分別為100%和50%，可以發(fā)現(xiàn)html的高度為0，并沒(méi)有自適應(yīng)div的高度，因?yàn)閐iv已經(jīng)徹底脫離標(biāo)準(zhǔn)流了，我們說(shuō)過(guò)，如果絕對(duì)定位沒(méi)有定位的祖先元素，則包含塊為初始包含塊，這里的初始包含塊即為可視區(qū)，所以這里的百分比是參照可視區(qū)的大小來(lái)計(jì)算的。所以為50%時(shí)占視口的一半。注意這只是一個(gè)視口的高度，把滾動(dòng)條往下拉拉就知道了。

2.絕對(duì)定位的元素在另外一個(gè)定位元素里面（除static外）

這時(shí)百分比參照的是父元素生成的包含塊計(jì)算出來(lái)的值

所以想讓定位元素的高度占滿(mǎn)整個(gè)屏幕，可以：

body{
  position:relative;
}
margin-left設(shè)置成百分比 
  

margin-left

這時(shí)出現(xiàn)了滾動(dòng)條，這是因?yàn)閷iv的margin-left設(shè)置成了100%，而百分比是參照其包含塊body的寬度，body又是參照的html（某些瀏覽器將它當(dāng)作初始包含塊）。而html的初始包含塊是可視區(qū)，所以可視區(qū)的寬度再加上元素的100%，自然就超出了屏幕了。

解決方法：

（1）利用calc函數(shù)



margin-left

（2）讓body的寬度減去100px,因?yàn)閐iv的百分比是參照其父元素的寬度計(jì)算的，因此這里將它的父元素的寬度減小，那么它的margin-left的100%自然就小了



margin-left

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

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

相關(guān)文章

  • 深入學(xué)習(xí)CSS屬性中的百分比

    摘要：同理相當(dāng)于，相當(dāng)于基于元素本身的寬度但此值只能應(yīng)用在塊元素上，所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來(lái)計(jì)算 面試題：css中的單位都有哪些？可以取百分?jǐn)?shù)的單位有哪些？這些百分比是如何計(jì)算的？ css中的單位 絕對(duì)單位 in-英寸；cm；mm；pt-磅；pc-pica 相對(duì)單位 em-與元素字號(hào)掛鉤；ex-與元素字體的x高度掛鉤；rem-與根元素字號(hào)掛鉤；px...

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

  • 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

  • CSS通用數(shù)據(jù)類(lèi)型

    摘要：相反的，通用數(shù)據(jù)類(lèi)型并不和任何特定的屬性相關(guān)聯(lián)。本文，我將整體講述一下所有的通用數(shù)據(jù)類(lèi)型。這樣以來(lái)就能夠避免和字符串?dāng)?shù)據(jù)類(lèi)型混淆。距離距離數(shù)據(jù)類(lèi)型表示距離的單位，有兩種長(zhǎng)度單位。漸變函數(shù)使用數(shù)據(jù)類(lèi)型來(lái)定義。 CSS中屬性的值有著許多種格式。為了讓用戶(hù)代理（即瀏覽器）能夠識(shí)別一個(gè)值是否有效，則需要確認(rèn)該值是否符合該類(lèi)值支持的格式的其中一種。這些屬性值所支持的格式叫做數(shù)據(jù)類(lèi)型，在規(guī)范中用的...

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

  • CSS通用數(shù)據(jù)類(lèi)型

    摘要：相反的，通用數(shù)據(jù)類(lèi)型并不和任何特定的屬性相關(guān)聯(lián)。本文，我將整體講述一下所有的通用數(shù)據(jù)類(lèi)型。這樣以來(lái)就能夠避免和字符串?dāng)?shù)據(jù)類(lèi)型混淆。距離距離數(shù)據(jù)類(lèi)型表示距離的單位，有兩種長(zhǎng)度單位。漸變函數(shù)使用數(shù)據(jù)類(lèi)型來(lái)定義。 CSS中屬性的值有著許多種格式。為了讓用戶(hù)代理（即瀏覽器）能夠識(shí)別一個(gè)值是否有效，則需要確認(rèn)該值是否符合該類(lèi)值支持的格式的其中一種。這些屬性值所支持的格式叫做數(shù)據(jù)類(lèi)型，在規(guī)范中用的...

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

  • 詳述css中的百分比值

    摘要：很多屬性的取值都可以是百分比值。這就是百分比值的意義?？捎冒俜直戎档某Ｒ?jiàn)屬性寬和高在使用百分比值時(shí)，其參照都是元素的包含塊，詳情。百分比值的繼承請(qǐng)注意，當(dāng)百分比值用于可繼承屬性時(shí)，只有結(jié)合參照值計(jì)算后的絕對(duì)值會(huì)被繼承，而不是百分比值本身。 很多css屬性的取值都可以是百分比值。雖然形式上來(lái)說(shuō)，百分比值都是數(shù)字后跟%的形式（注意數(shù)字和%之間不可以有空格），但在不同的使用場(chǎng)合下，其意義會(huì)有...

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

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

0條評(píng)論

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