深入學習CSS屬性中的百分比

icattlecoder 發布于2019-08-29 13:04 / 2923人閱讀

摘要：同理相當于，相當于基于元素本身的寬度但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算

面試題：css中的單位都有哪些？可以取百分數的單位有哪些？這些百分比是如何計算的？

css中的單位

絕對單位
in-英寸；cm；mm；pt-磅；pc-pica

相對單位
em-與元素字號掛鉤；ex-與元素字體的“x高度”掛鉤；rem-與根元素字號掛鉤；px-與CSS像素掛鉤；%-另一屬性值的百分比

css中可以取百分比的屬性

定位：top,right,bottom,left;

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

背景：backgroud-position,background-size;

文本：text-indent;

字體：font-size;

百分比是如何計算的

百分比的計算是相對一個基數的，這個基數與當前元素的包含塊有關。具體如下：

基于包含塊的寬度來計算的屬性：margin，padding，width，max-width，min-width，left，right，text-indent.

基于包含塊的高度來計算的屬性：top，bottom，height，max-height，min-height

基于當前字體大小來計算的屬性：line-height

基于line-height來計算的屬性：vertical-align

基于元素本身的寬高：background-position：背景圖像的位置，分別設置水平方向和垂直方向上的兩個值，如果使用百分比，那么百分比值會同時應用于元素和圖像。例如 50% 50% 會把圖片的（50%, 50%）這一點與框的（50%, 50%）處對齊，相當于設置了 center center。同理 0% 0% 相當于 left top，100% 100% 相當于 right bottom

基于元素本身的寬度：background-size但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算

GPU云服務器云服務器 js中的乘百分之百 css屬性訪問CSS屬性 position屬性，css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112341.html

CSS的進一步深入（更新中···）

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

Half 2019-04-23 13:23 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學習！

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

DevWiki 2019-08-30 15:56 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

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

Noodles 2019-08-30 12:53 評論0 收藏0
【學習筆記】CSS深入理解之margin

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...

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

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

William_Sang 2019-08-29 15:38 評論0 收藏0