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

icattlecoder 發(fā)布于2019-08-29 13:04 / 2932人閱讀

摘要：同理相當(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-與CSS像素掛鉤；%-另一屬性值的百分比

css中可以取百分比的屬性

定位：top,right,bottom,left;

盒模型：width,height,margin,padding;

背景：backgroud-position,background-size;

文本：text-indent;

字體：font-size;

百分比是如何計(jì)算的

百分比的計(jì)算是相對(duì)一個(gè)基數(shù)的，這個(gè)基數(shù)與當(dāng)前元素的包含塊有關(guān)。具體如下：

基于包含塊的寬度來(lái)計(jì)算的屬性：margin，padding，width，max-width，min-width，left，right，text-indent.

基于包含塊的高度來(lái)計(jì)算的屬性：top，bottom，height，max-height，min-height

基于當(dāng)前字體大小來(lái)計(jì)算的屬性：line-height

基于line-height來(lái)計(jì)算的屬性：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

基于元素本身的寬度：background-size但此值只能應(yīng)用在塊元素上，所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來(lái)計(jì)算

云服務(wù)器 GPU云服務(wù)器 js中的乘百分之百 css屬性訪問(wèn)CSS屬性 position屬性，css

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

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

相關(guān)文章

CSS的進(jìn)一步深入（更新中···）

摘要：在之前我們學(xué)了種選擇器和三種樣式的引入，學(xué)習(xí)選擇器就是為了更好的選擇文本，學(xué)習(xí)的引入是為了使文本增加各種樣式和屬性，下面我們簡(jiǎn)單來(lái)學(xué)習(xí)一下為文本加樣式和一些屬性和屬性值文本的樣式顏色文本對(duì)齊方式文本修飾宋體什么都沒(méi)有宋體是上劃線? ? ? 在之前我們學(xué)了6種選擇器和三種CSS樣式的引入，學(xué)習(xí)選擇器就是為了更好的選擇文本，學(xué)習(xí)CSS的引入是為了使文本增加各種樣式和屬性，下面我們簡(jiǎn)單來(lái)學(xué)習(xí)一下...

Half 2019-04-23 13:23 評(píng)論0 收藏0
css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

摘要：通過(guò)模糊來(lái)弱化背景和滾動(dòng)提示使用兩層背景，控制交互式的圖片對(duì)比控件范圍輸入控件方式書(shū)中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評(píng)論0 收藏0
深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評(píng)論0 收藏0
【學(xué)習(xí)筆記】CSS深入理解之margin

摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸可視尺寸對(duì)于沒(méi)有設(shè)定的塊元素，可改變?cè)厮椒较虻目梢暢叽缯紦?jù)尺寸對(duì)于元素，可改變?cè)厮酱怪狈较虻恼紦?jù)尺寸與百分比單位普通元素的百分比都是相對(duì)于容器的寬度計(jì)算的絕對(duì)定位元素的百分比是相對(duì)于包含塊的寬張?chǎng)涡竦腃SS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸可視尺寸：對(duì)于沒(méi)有設(shè)定width的塊元素，margin可改變?cè)厮椒较?..

stefan 2019-08-30 15:54 評(píng)論0 收藏0
360前端星學(xué)習(xí)筆記-深入css(2)

摘要：課程一繼承某些元素會(huì)自動(dòng)繼承其父元素的計(jì)算值舉例上述代碼，標(biāo)簽里的就會(huì)繼承父元素的，為。顯示繼承給設(shè)置顯示繼承根元素下所有元素除獨(dú)自設(shè)置如的都是。二初始值當(dāng)向上繼承到頂點(diǎn)還是沒(méi)找到值的話，就需要初始值了。課程ppt 一、css繼承 1.1 某些元素會(huì)自動(dòng)繼承其父元素的計(jì)算值舉例： This is a test of inherit. p { color: #666; ...

William_Sang 2019-08-29 15:38 評(píng)論0 收藏0