这篇文章主要讲解了“css中设置长度的单位是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css中设置长度的单位是什么”吧!
专注于为中小企业提供成都网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沧县免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
css长度单位有:1、em,相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的;2、rem,相对字体长度单位,只相对根元素即html元素字体大小来确定其长度;3、%,相对于父元素宽度或字体大小的百分比;4、px,像素,是相对于显示器屏幕分辨率而言的;5、vw,相对于浏览器窗口的宽度;6、vh,相对于浏览器窗口的高度;7、ch,相对于所用字体中数字0的高度。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS样式由选择器、属性和值三个部分组成(例如p{width: 100px;}),在设置某些属性值时可能会涉及到与值对应的单位。CSS 支持多种不同的长度单位,根据类型的不同可以分为两类,分别是绝对长度单位(例如英寸、厘米、点)和相对长度单位(例如百分比)。
1、相对长度单位
相对长度单位指的是这个单位没有一个固定的值,它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响,在响应式布局方面相对长度单位非常适用。
下表中列举了 CSS 中支持的相对长度单位:
单位 | 描述 | 示例 |
---|---|---|
em | 相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的。 相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值,例如 font-size 的值为 16px,那么 1em 就等于 16px,2em 就等于 32px | p{line-height:2em;} |
rem | 相对字体长度单位,只相对根元素即html元素字体大小来确定其长度。 相对于根元素 | p{font-size: 1.2rem;} |
ex | 相对于所用字体中小写英文字母 x 的高度,若无法确定 x 的高度则使用 0.5em 计算 | p{font-size: 1ex;} |
ch | 相对于所用字体中数字 0 的高度,若无法确定 0 的高度则使用 0.5em 计算 | p{line-height: 3ch} |
vw | 相对于浏览器窗口的宽度,1vw = 窗口宽度的 1% | p{font-size: 5vw;} |
vh | 相对于浏览器窗口的高度,1vh = 窗口高度的 1% | p{font-size: 5vh;} |
vmin | vw 与 vh 中较小的值 | p{font-size: 5vmin;} |
vmax | vw 与 vh 中较大的值 | p{font-size: 5vmax;} |
% | 相对于父元素宽度或字体大小的百分比 | div{width: 55%} |
【示例】下面通过一个综合的示例演示相对长度单位的使用:
CSS中的单位 这是 16px 的字体这是 2em 的字体
x:这是 3ex 的字体
0:这是 4ch 的字体
运行结果如下图所示:
2、绝对长度单位
绝对长度单位表示一个真实的物理尺寸,它的大小是固定的,不会因为其它元素尺寸的变化而变化。下表中列举了 CSS 中支持的绝对长度单位:
单位 | 描述 | 示例 |
---|---|---|
cm | 厘米 | p{font-size: 0.5cm;} |
mm | 毫米 | p{font-size: 5mm;} |
in | 英寸(1in = 96px = 2.54cm) | p{font-size: 1in;} |
px | 像素,是相对于显示器屏幕分辨率而言的 (1px = 1/96in) | p{font-size: 16px;} |
pt | point,是一种专用的印刷单位“磅”,也可以称为“点”(1pt = 1/72in) | p{font-size: 16pt;} |
pc | pica,中文可称为“派卡”,印刷行业用于描述字体大小的单位,相当于我国新四号铅字的尺寸(1pc = 12pt) | p{font-size: 5pc;} |
【示例】下面通过一个综合的示例演示绝对长度单位的使用:
CSS中的单位 这是 16px 的字体这是 2pt 的字体
这是 3pc 的字体
运行结果如下图所示:
感谢各位的阅读,以上就是“css中设置长度的单位是什么”的内容了,经过本文的学习后,相信大家对css中设置长度的单位是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!