CSS3 calc()函式 寬width / 高height 不同單位( percent, px, em, vh, vw ) 加減乘除運算Math

calc()函式,可以做任何數字形態的屬性值運算

 ● 數字形態屬性值的屬性 CSS property values with number 
寬width 
高height 
內距padding 
外距margin 
框border-width 
placement top right bottom left
等等etc…



 ● CSS常用單位 CSS common units
參考資料:
w3schools

Unit Description
% 百分比
percentage
in 英吋
inch
cm 公分
centimeter
mm 公厘
millimeter
em 文字單位 1em=1倍文字大小
例:line-height: 1.5em; = 1.5倍行高
  text-indent: 2em; = 首行縮排2個字
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex 文字單位 文字1/2大小
one ex is the x-height of a font (x-height is usually about half the font-size)
pt 點(1 pt = 1/72inch )
point (1 pt is the same as 1/72 inch)
pc 皮卡(1pc = 12pt)
pica (1 pc is the same as 12 points)
px 像素
pixels (a dot on the computer screen)
vw 視埠單位
相對於視窗寬度的1%
viewport width
vh 視埠單位
相對於視窗高度的1%
viewport height


 ● calc()運算式 calc() expression
參考資料:
MDN

+
加 Addition.


減 Subtraction.

*

至少有一個參數必須是數字
Multiplication.
At least one of the arguments must be a
.

/

右邊必須是數字
Division.
The right-hand side must be a
.


 ● 範例example
width: calc(100% – 80px); 
height: calc(100px – 2em);

Leave a Reply