CSS中单位的计算示例

这篇文章给大家分享的是有关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;
}

长度

px

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

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

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

px

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

100px X 100px
50px X 50px

CSS中单位的计算示例

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

CSS中单位的计算示例

rem

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

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

rem

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

5rem X 5rem

CSS中单位的计算示例

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

CSS中单位的计算示例

ch

  • 相对单位,数字的宽度

/* list5 */

#length .list5s1 {
  width: 3ch;
}

#length .list5s2 {
  width: 3ch;
}

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

#length .list5s3 {
  width: 3ch;
}

ch

相对单位,数字的宽度

111
111111
111

CSS中单位的计算示例

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

CSS中单位的计算示例

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

CSS中单位的计算示例

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

CSS中单位的计算示例

in

  • 绝对单位,英寸in

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

in

绝对单位,英寸in

10in X 10in

CSS中单位的计算示例

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

CSS中单位的计算示例

%

  • %

  • 相对数值,百分比,相对父元素

/* 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%

CSS中单位的计算示例

角度

  • 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

CSS中单位的计算示例

时间

  • s/ms

  • 秒s,毫秒ms

  • 用于设定动画执行的时间

频率

  • 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

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

CSS中单位的计算示例

CSS中单位的计算示例

分辨率

  • 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

CSS中单位的计算示例

HEX

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

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

HEX

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

#f1d2b3
#a3c2e1

CSS中单位的计算示例

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)

CSS中单位的计算示例

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)

CSS中单位的计算示例

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%)

CSS中单位的计算示例

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)

CSS中单位的计算示例

transparent

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

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

transparent

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

transparent

CSS中单位的计算示例

currentColor

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

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

currentColor

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

currentColor

CSS中单位的计算示例

函数

  • 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)

CSS中单位的计算示例

生成内容

  • 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中单位的计算示例

感谢各位的阅读!关于CSS中单位的计算示例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前文章:CSS中单位的计算示例
分享地址:http://ybzwz.com/article/pjidpi.html