首页 技术 正文
技术 2022年11月19日
0 收藏 457 点赞 2,898 浏览 862 个字

css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。

长度单位可分为两种类型:相对和绝对。

绝对长度

绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器、分辨率、操作系统等。具体单位以及解释如下:

  1. px像素:一个像素就相当于我们屏幕中的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。
  2. cm厘米:这个单位大家常见,不解释。
  3. mm毫米:这个单位大家常见,不解释。
  4. in英寸:1in = 96px = 2.54cm
  5. pt:point 。1in = 72pt
  6. pc:pica。1pc = 12pt

相对长度

  1. %百分比:浏览器根据其父级元素的样式来计算值。父级改变的时候,子级自动改变。
  2. em:相对于当前元素的字体大小来计算值,一般浏览器字体大小默认为16px,则2em = 32px
  3. rem:rem是根em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;作用于根元素字体大小时,相对于初始字体大小。
  4. ex:依赖于英文字母小x的高度。
  5. vw:vw(viewpoint width)视窗宽度,1vw = 视窗宽度的1%
  6. vh:vh(viewpoint height)视窗高度,1vh = 视窗高度的1%
  7. vmin:vw和vh中较小的那个。
  8. vmax:vw和vh中较大的那个。

一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

代码示例:

{
font-size:1cm;
margin:10rem;
width:10vw;
height:100vh;
}

rem与px的转化

rem是相对于html根元素,意味着,我们只需要在根元素确定一个参考值,我们就知道rem单位与px转化关系。浏览器默认字体大小是16px,所以:1rem = 16px。

举例:

html{ font-size:14px }
div{ width:3rem; height:2.5rem }

把div大小单位换算成px是多少呢?

答案:width:42px;height:35px。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,104
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,580
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,428
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,835
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,918