总结CSS中单位的计算（代码示例）

不言

发布时间：2018-10-29 16:06:03

3302人浏览过

来源于segmentfault

转载

本篇文章给大家带来的内容是关于总结css中单位的计算（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

CSS单位总结

公共部分css

body {
  background-color: #000;
  color: skyblue;
  margin: 0;
  padding: 0;
}
body>div>div {
  border: 1px solid cyan;
  padding: 10px;
  margin: 10px;
  font-weight: bolder;
}
.s {
  background-color: #ddd;
  margin: 10px;
  white-space: nowrap;
  color: yellowgreen;
}

长度

立即学习“前端免费学习笔记（深入）”；

像素，同一屏幕分辨率下是绝对单位。屏幕分辨率不同时，像素等比缩放。

/* list1 */
#length .list1s1 {
  width: 100px;
  height: 100px;
}

#length .list1s2 {
  width: 50px;
  height: 50px;
}


  px
立即学习“前端免费学习笔记（深入）”；
  像素，同一屏幕分辨率下是绝对单位。屏幕分辨率不同时，像素等比缩放。
  100px X 100px
  50px X 50px

em

相对单位，相对于父元素的字体大小

如果父元素font-size是20px，那么2em就是40px

em可精确到小数点后3位

/* list2 */
#length .list2fa1 {
  font-size: 18px;
}

#length .list2fa2 {
  font-size: 22px;
}

#length .list2s1 {
  width: 5em;
  height: 5em;
}

#length .list2s2 {
  width: 5em;
  height: 5em;
}


  em
  相对单位，相对于父元素的字体大小
  如果父元素font-size是20px，那么2em就是40px
  em可精确到小数点后3位
  
    5em X 5em
  
  
    5em X 5em

rem

相对单位，相对于html的字体大小

/* list3 */
#length .list3s1 {
  width: 5rem;
  height: 5rem;
}


  rem
  相对单位，相对于html的字体大小
  5rem X 5rem

ex

相对单位，相对于字符的高度，通常为字体高度的一半
如果文字高度未设置，则相对于浏览器字体大小高度

/* list4 */
#length .list4s1 {
  width: 10ex;
  height: 1ex;
}

#length .list4s2 {
  width: 10ex;
  height: 2ex;
}

#length .list4fa3 {
  font-size: 20px;
}

#length .list4s3 {
  width: 10ex;
  height: 2ex;
}


  ex
  相对单位，相对于字符的高度，通常为字体高度的一半
  如果文字高度未设置，则相对于浏览器字体大小高度
  
    10ex X 1ex
  
  
    10ex X 2ex
  
  
    10ex X 2ex

ch

相对单位，数字的宽度

/* list5 */

#length .list5s1 {
  width: 3ch;
}

#length .list5s2 {
  width: 3ch;
}

#length .list5fa2 {
  font-size: 20px;
}

#length .list5s3 {
  width: 3ch;
}


  ch
  相对单位，数字的宽度
  
    111
    111111
  
  
    111

vw/vh

相对单位
视口横向被分割成100个vw，纵向被分割成100个vh
对于PC端来说，视口是浏览器可视区域
对于移动端来说，不论横屏还是竖屏，vw始终表示横向宽度，vh始终表示纵向宽度

/* list6 */
#length .list6s1 {
  width: 10vw;
  height: 10vh;
}


  vw/vh
  相对单位
  视口横向被分割成100个vw，纵向被分割成100个vh
  对于PC端来说，视口是浏览器可视区域
  对于移动端来说，不论横屏还是竖屏，vw始终表示横向宽度，vh始终表示纵向宽度
  10vw X 10vh

vmin/vmax

相对单位
视口的宽度和高度中比较小的为100vmin
视口的宽度和高度中比较大的为100vmax

/* list7 */
#length .list7s1 {
  width: 10vmin;
  height: 10vmin;
}

#length .list7s2 {
  width: 10vmax;
  height: 10vmax;
}


  vmin/vmax
  相对单位
  视口的宽度和高度中比较小的为100vmin
  视口的宽度和高度中比较大的为100vmax
  10vmin X 10vmin
  10vmax X 10vmax

cm/mm/q

绝对单位，厘米cm，毫米单位mm，1/4毫米q

/* list8 */
#length .list8s1 {
  width: 3cm;
  height: 3cm;
}

#length .list8s2 {
  width: 30mm;
  height: 30mm;
}

#length .list8s3 {
  width: 120q;
  height: 120q;
}


  cm/mm/q
  绝对单位，厘米cm，毫米单位mm，1/4毫米q
  3cm X 3cm
  30mm X 30mm
  120q X 120q

in

绝对单位，英寸in

/* list9 */
#length .list9s1 {
  width: 10in;
  height: 10in;
}


  in
  绝对单位，英寸in
  10in X 10in

pt/pc

绝对单位，点pt，派卡pc

/* list10 */
#length .list10s1 {
  width: 5pt;
  height: 5pt;
}

#length .list10s2 {
  width: 50pt;
  height: 50pt;
}

#length .list10s3 {
  width: 5pc;
  height: 5pc;
}


  pt/pc
  绝对单位，点pt，派卡pc
  5pt X 5pt
  50pt X 50pt
  5pc X 5pc

%

%
相对数值，百分比，相对父元素

/* list11 */
#length .list11f1 {
  width: 100px;
  height: 100px;
}

#length .list11s1 {
  width: 80%;
  height: 70%;
}

#length .list11f2 {
  width: 80px;
  height: 70px;
}

#length .list11s2 {
  width: 80%;
  height: 70%;
}


  %
  相对数值，百分比，相对父元素
  
    80% X 70%
  
  
    80% X 70%

角度

deg/grad/rad/turn
度deg，梯度grad，弧度rad，转turn
一个圆360deg，400grad，2πrad，1turn

/* list1 */
#angle .list1s1 {
  width: 80px;
  height: 80px;
  transform: rotate(10deg)
}

#angle .list1s2 {
  width: 80px;
  height: 80px;
  transform: rotate(10grad)
}

#angle .list1s3 {
  width: 80px;
  height: 80px;
  transform: rotate(0.314rad)
}

#angle .list1s4 {
  width: 80px;
  height: 80px;
  transform: rotate(0.2turn)
}


  deg/grad/rad/turn
  度deg，梯度grad，弧度rad，转turn
  一个圆360deg，400grad，2πrad，1turn
  10deg
  10grad
  0.314rad
  0.2turn

时间

s/ms
秒s，毫秒ms
用于设定动画执行的时间

iWebMall多用户商城系统
iWebMall 是一款高性能高扩展能力的开源 LAMP 电子商务软件，定位为大中型电子商务平台软件，服务于有建立电子商务需求的商业客户。这些商业客户不必学习任何计算机编程代码知识，只需要使用 iWebMall 软件他们就可以轻松建立一个功能强大的网上商城，实现用户注册、产品展示、在线定购、在线支付等电子商务功能；iWebMall 集成了产品发布与查询、会员注册登录、购物车、在线订单、在线支付、在

下载

频率

Hz/kHz
用于设定声音元素频率

布局

fr
用于分配一定长度内的剩余空间

/* list1 */
#layout-specific .list1fa1 {
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#layout-specific .list1fa1 p {
  border: 5px solid skyblue;
}


  fr
  用于分配一定长度内的剩余空间

分辨率

dpi/dpcm/dppx
每英寸包含点的数量dpi
每厘米包含点的数量dpcm
每像素包含点的数量dppx

颜色

color name

使用颜色关键字指定颜色

/* list1 */
#color .list1s1 {
  width: 100px;
  height: 100px;
  background-color: darkseagreen;
}
#color .list1s2 {
  width: 100px;
  height: 100px;
  background-color: salmon;
}


  color name
  使用颜色关键字指定颜色
  darkseagreen
  salmon

HEX

使用十六进制整数指定颜色

/* list2 */
#color .list2s1 {
  width: 100px;
  height: 100px;
  background-color: #f1d2b3;
}
#color .list2s2 {
  width: 100px;
  height: 100px;
  background-color: #a3c2e1;
}


  HEX
  使用十六进制整数指定颜色
  #f1d2b3
  #a3c2e1

RGB

R:red;G:green;B:blue;
颜色的比例指定颜色
值在0到255之间

/* list3 */
#color .list3s1 {
  width: 100px;
  height: 100px;
  background-color: rgb(111,222,123);
}
#color .list3s2 {
  width: 100px;
  height: 100px;
  background-color: rgb(0,1,2);
}


  RGB
  R:red;G:green;B:blue;
  颜色的比例指定颜色
  值在0到255之间
  rgb(111,222,123)
  rgb(0,1,2)

RGBA

R:red;G:green;B:blue;A:alpha;
颜色的比例指定颜色,alpna指定透明度
值在0到255之间，alpha的值在0到1之间，0.2可以用.2表示

/* list4 */
#color .list4s1 {
  width: 100px;
  height: 100px;
  background-color: rgba(111,222,123,0.2);
}
#color .list4s2 {
  width: 100px;
  height: 100px;
  background-color: rgba(111,222,123,.2);
}


  RGBA
  R:red;G:green;B:blue;A:alpha;
  颜色的比例指定颜色,alpna指定透明度
  值在0到255之间，alpha的值在0到1之间，0.2可以用.2表示
  rgba(111,222,123,0.2)
  rgba(111,222,123,.2)

HSL

H:hue色调，0或者360表示红色，120表示绿色，240表示蓝色
S:saturation饱和度，取值在0.0%到100.0%之间
L:lightness亮度，取值在0.0%到100.0%之间

/* list5 */
#color .list5s1 {
  width: 100px;
  height: 100px;
  background-color: hsl(280, 50%, 60%);
}
#color .list5s2 {
  width: 100px;
  height: 100px;
  background-color: hsl(50, 50%, 60%);
}


  HSL
  H:hue色调，0或者360表示红色，120表示绿色，240表示蓝色
  S:saturation饱和度，取值在0.0%到100.0%之间
  L:lightness亮度，取值在0.0%到100.0%之间
  hsl(280, 50%, 60%)
  hsl(50, 50%, 60%)

HSLA

H:hue色调，0或者360表示红色，120表示绿色，240表示蓝色
S:saturation饱和度，取值在0.0%到100.0%之间
L:lightness亮度，取值在0.0%到100.0%之间
A:alpha透明度

/* list6 */
#color .list6s1 {
  width: 100px;
  height: 100px;
  background-color: hsla(280, 50%, 60%,0.6);
}
#color .list6s2 {
  width: 100px;
  height: 100px;
  background-color: hsla(50, 50%, 60%,.6);
}


  HSLA
  H:hue色调，0或者360表示红色，120表示绿色，240表示蓝色
  S:saturation饱和度，取值在0.0%到100.0%之间
  L:lightness亮度，取值在0.0%到100.0%之间
  A:alpha透明度
  hsla(280, 50%, 60%,0.6)
  hsla(50, 50%, 60%,.6)

transparent

全黑透明色，即rgba(0,0,0,0)

/* list7 */
#color .list7s1 {
  width: 100px;
  height: 100px;
  background-color: transparent;
}


  transparent
  全黑透明色，即rgba(0,0,0,0)
  transparent

currentColor

color具有继承性，currentColor相当于继承color颜色

/* list8 */
#color .list8s1 {
  width: 100px;
  height: 100px;
  background-color: currentColor;
}


  currentColor
  color具有继承性，currentColor相当于继承color颜色
  currentColor

函数

calc()
calc(四则运算)
用于动态计算长度值，运算符前后要加空格

/* list1 */
#function .list1s1 {
  width: calc(50% - 20rem);
  height: calc(20em - 200px);
}

#function .list1s2 {
  width: calc(20rem - 150px);
  height: calc(200px - 6em);
}


  calc()
  calc(四则运算)
  用于动态计算长度值，运算符前后要加空格
  calc(50% - 20rem) X calc(20em - 200px)
  calc(20rem - 150px) X calc(200px - 6em)

生成内容

attr()
用于content属性，取当前元素的属性值
可以拼接字符串

/* list1 */
#content .list1s1 {
  width: 100px;
  height: 100px;
}
#content .list1s1:before {
  content: "("attr(datamsgb)")";
  font-size: 12px;
}
#content .list1s1:after {
  content: attr(datamsga);
  font-size: 14px;
}


  attr()
  用于content属性，取当前元素的属性值
  可以拼接字符串
  实际元素

css:last-child伪类无法选中怎么办_确保选择器与DOM结构匹配

css 想让 flex 容器满屏宽度怎么办_width 100% 配合 display flex

css 框架中的 Semantic UI_如何使用 Semantic UI 实现语义化设计

css 页面布局改版成本高怎么办_优化 css 布局复用结构

css样式加载顺序与覆盖规则_实战案例解析