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

本篇內(nèi)容介紹了“CSS屬性中經(jīng)常出現(xiàn)的百分比是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

CSS 的屬性值中經(jīng)常會(huì)出現(xiàn)百分比，搞清它們的基數(shù)是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 標(biāo)準(zhǔn)，在此整理下：

百分比單位

乘以包含塊的寬度 margin, padding, left, right, text-indent, width, max-width, min-width

乘以包含塊的高度 top, bottom, height, max-height, min-height

關(guān)于包含塊（containing block）的概念，不能簡(jiǎn)單地理解成是父元素。如果是靜態(tài)定位和相對(duì)定位，包含塊一般就是其父元素。但是對(duì)于絕對(duì)定位的元素，包含塊應(yīng)該是離它最近的 position 為 absolute、relative、或者 fixed 的祖先元素。對(duì)固定定位的元素，它的包含塊是視口（viewport）。具體可以參考 W3Help。

乘以元素的字體大小 line-height

乘以元素的行高 vertical-align

背景定位中的百分比 background-position 分別設(shè)置水平方向和垂直方向上的兩個(gè)值，如果使用百分比，那么百分比值會(huì)同時(shí)應(yīng)用于元素和圖像。例如 50% 50% 會(huì)把圖片的（50%, 50%）這一點(diǎn)與框的（50%, 50%）處對(duì)齊，相當(dāng)于設(shè)置了 center center。同理 0% 0% 相當(dāng)于 left top，100% 100% 相當(dāng)于 right bottom。

字體大小中的百分比 font-size 中的百分比值應(yīng)該乘以元素所繼承到的字體大小，也就是父元素的字體大小。

其他字體單位 既然說到了字體大小，順便八一八其他的字體單位吧，有些可能平時(shí)并不會(huì)用，但是了解一下也沒有壞處。有兩個(gè)相對(duì)單位是：

em——相當(dāng)于當(dāng)前的字體高度，稱作“全身方框”（em square）。如果在 font-size 上使用這個(gè)單位，應(yīng)該乘以父元素的字體大小。用在 font-size 之外的屬性上，則應(yīng)該乘以元素自身的字體大小。 ex——相當(dāng)于字體中的”x”的高度。 以下是絕對(duì)單位：

in——英寸（inch），相當(dāng)于 2.54cm。 cm——厘米（centimeter）。 mm——毫米（millimeter）。 pt——磅（point）。1pt 相當(dāng)于 1in 的 1/72。 pc——皮卡（pica）。1pc = 12pt。 px——像素（pixel unit）。1px = 0.75pt。

百分比的繼承

如果某個(gè)元素設(shè)置了百分比的屬性，則后代元素繼承的是計(jì)算后的值。例如：

代碼如下:

p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那么p的子元素繼承到的值是 line-height: 12px，而不是 line-height: 120%。

“CSS屬性中經(jīng)常出現(xiàn)的百分比是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！