您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS中尺寸單位的概念有哪些”,在日常操作中,相信很多人在CSS中尺寸單位的概念有哪些問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”CSS中尺寸單位的概念有哪些”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
絕對單位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相對單位
% : 百分比
em : Element meter 根據文檔字體計算尺寸
rem : Root element meter 根據根文檔( body/html )字體計算尺寸
ex : 文檔字符“x”的高度
ch : 文檔數字“0”的的寬度
vh : View height 可視范圍高度
vw : View width 可視范圍寬度
vmin : View min 可視范圍的寬度或高度中較小的那個尺寸
vmax : View max 可視范圍的寬度或高度中較大的那個尺寸
運算
calc : 四則運算
實例:
h2 { width: calc(100% - 10px + 2rem)
單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細
絕對單位
px - Pixel 像素
像素 px 相對于設備顯示器屏幕分辨率而言。
div { font-size: 12px } p { text-indent: 24px }
pt Points 磅
1 pt = 1/72 英寸
div { font-size: 10pt } p { height: 100pt }
pc Picas 派卡
十二點活字(印刷中使用的),相當于我國新四號鉛字的尺寸。
div { font-size: 10pc } p { height: 10pc }
in Inches 英寸
div { font-size: 10in } p { height: 10in }
mm Millimeter 毫米
div { font-size: 10mm } p { height: 10mm }
cm Centimeter 厘米
div { font-size: 10cm } p { height: 10cm }
q Quarter millimeters 1/4毫米
div { font-size: 20q } p { height: 100q }
相對單位
% 百分比
相對于父元素寬度
<body>
em Element meter 根據文檔計算尺寸
相對于當前文檔對象內文本的字體尺寸而言,若未指定字體大小則繼承自上級元素,以此類推,直至 body,若 body 未指定則為瀏覽器默認大小。
<body>
rem Root element meter 根據根文檔( body/html )字體計算尺寸
相對于根文檔對象( body/html )內文本的字體尺寸而言,若未指定字體大小則繼承為瀏覽器默認字體大小。
到此,關于“CSS中尺寸單位的概念有哪些”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。