這篇文章主要講解了“css的%是相對于什么來取值的”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css的%是相對于什么來取值的”吧！

站在用戶的角度思考問題，與客戶深入溝通，找到曹妃甸網(wǎng)站設(shè)計(jì)與曹妃甸網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋曹妃甸地區(qū)。

css %是相對于包含塊的高寬或字體大小來取值。如果是靜態(tài)定位和相對定位，包含塊一般就是其父元素，則%相對于父元素取值；如果是絕對定位元素，包含塊是離它最近的position非static值的祖先元素，則%相對于該祖先元素取值；如果是固定定位元素，包含塊是視口，則%相對于視口取值。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS %--百分比

百分比是一個(gè)相對長度單位，相對于包含塊（containing block）的高寬或字體大小來取值。

關(guān)于包含塊（containing block）的概念，不能簡單地理解成是父元素。

如果是靜態(tài)定位和相對定位，包含塊一般就是其父元素。

如果是絕對定位的元素，包含塊應(yīng)該是離它最近的 position為非static屬性的祖先元素。

如果是固定定位的元素，它的包含塊是視口（viewport）。

實(shí)現(xiàn)代碼：

結(jié)果圖：

從圖上我們可以看出：設(shè)置5em的div的第一行字符剛好為5個(gè)字符大小，因?yàn)槿缟纤f，它是相對于當(dāng)前元素字體的尺寸， 寬度占用90px，5 X 18 = 90px。設(shè)置5rem的div第一行字符要小一些，因?yàn)槿缟纤f，它是相對于根元素字體大小（默認(rèn)為瀏覽器大小16px），比18px要小一些，寬度占用80px，5 X 16 = 80px。設(shè)置百分比顯示的第一行最大，因?yàn)槿缟纤f，它是相對于父元素的尺寸比例， 寬度占用160px，200 X 80% = 160px。

常見場景中的百分比單位的使用

（1）盒模型中的百分比

在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時(shí)，參照物不盡相同：

• width、max-width、min-width：值為百分比時(shí)，其相對于包含塊的 width 進(jìn)行計(jì)算；

• height、max-height、min-height：值為百分比時(shí)，其相對于包含塊的 height 進(jìn)行計(jì)算；

• padding、margin：值為百分比時(shí)，如果是水平的值，就是相對于包含塊的 width 進(jìn)行計(jì)算；如果是垂直的值，就是相對于包含塊的 height 進(jìn)行計(jì)算。

（2）文本中的百分比

在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時(shí)，參照物不盡相同：

• font-size：根據(jù)父元素的font-size 進(jìn)行計(jì)算；

• line-height：根據(jù)font-size進(jìn)行計(jì)算；

• vertical-align：根據(jù)line-height進(jìn)行計(jì)算；

• text-indent：如果是水平的，則根據(jù)width進(jìn)行計(jì)算，如果是垂直的，則根據(jù) height 進(jìn)行計(jì)算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：

• 如果元素為靜態(tài)（ static ）或相對定位（ relative ），包含塊一般是其父容器；

• 如果元素為絕對定位（ absolute ），包含塊應(yīng)該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素；

• 如果元素為固定定位（ fixed ），包含塊就是視窗（ viewport ）。

（4）變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設(shè)置百分比。

• translateX() 根據(jù)容器的 width 計(jì)算

• translateY() 根據(jù)容器的 height 計(jì)算

• transform-origin 中橫坐標(biāo)（ x ）相對于容器的 width 計(jì)算；縱坐標(biāo)（ y ）相對于容器的 height 計(jì)算

注意，在 translate 還有一個(gè) z 軸的函數(shù) translateZ() 。它是不接受百分比為單位的值。

百分比的繼承

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

p { font-size: 10px;line-height: 120%; }

那么p的子元素繼承到的值是 line-height: 12px，而不是 line-height: 120%。

感謝各位的閱讀，以上就是“css的%是相對于什么來取值的”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css的%是相對于什么來取值的這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

名稱欄目：css的%是相對于什么來取值的
網(wǎng)頁地址：http://jinyejixie.com/article28/ipjdcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、企業(yè)建站、App開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站改版、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)