文档章节

理解css中的长度单位

哈狮子
 哈狮子
发布于 2016/10/18 14:10
字数 624
阅读 6
收藏 0

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~

css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。

  • %——百分比
  • in——寸
  • cm——厘米
  • mm——毫米
  • pt——point,大约1/72寸;
  • pc——pica,大约6pt,1/6寸;
  • px——屏幕的一个像素点;
  • em——元素的font-size;
  • ex——font-size的x-height值,为小写字母x的高度,通常相当于font-size的一半。

我们常用的有px、%、em,px就不多说了,em和%多说点儿:

1
2
3
.box{line-height:1.3em;}

元素的行高是当前元素继承的font-size的1.3倍,

1
2
3
.box{font-size:1.3em;}

当前元素的字体大小是其继承的font-size的1.3倍。

1
2
3
.box{line-height:130%;}

元素的行高是当前元素继承的font-size的130%倍,等同于1.3em。

1
2
3
.box{font-size:130%;}

当前元素的字体大小是其继承的font-size的130%倍,等同于1.3em。

恩,迷惑了吗?

em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。

而%对于font-size、line-height等,是基于其父元素的font-size的,而对于text-indent、margin、padding、width等属性,则是基于父元素的宽度的。

CSS3中的单位:

css3中引入了一些新的单位:

  • ch——字符0(零)的宽度;
  • rem——根元素(html元素)的font-size;
  • vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
  • vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
  • vmin——vw和vh中较小的那个。

显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。

rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活——或者说,比px灵活,比em更精确~~。。。XD。。。

如果没有定义font-size怎么办?

其实不用担心,传说,各个浏览器史无前例的默认font-size:16px;,所以,即便你在样式文件中忘了定义font-size初始值,也可以放心的使用em、rem。

浏览器支持:

rem,各浏览器基本都支持了, IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+

vw、vh、vmin,浏览器支持并不乐观,IE9支持了,Chrome目前不支持,Chrome 20将会重新支持(貌似之前支持过?)、Safari也即将支持了吧,Opera和Firefox也还都不支持。

本文转载自:

哈狮子
粉丝 2
博文 18
码字总数 4651
作品 0
常州
私信 提问
【基础】EM 还是 REM?这是一个问题!

简言 应用象 和 这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用 和 ,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。...

毛三十
2018/04/20
0
0
从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,视口,屏幕适配

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/07
0
0
CSS 颜色与度量单位

颜色表方案 度量单位 探讨HTML5中CSS颜色和度量单位等问题,包括颜色的选取方式、相对长度和绝对长度等。 一、颜色表方案 颜色的表现形式主要有三种方式:颜色名称、十六进制代码和十进制代码...

xiaoxiaobukuang
2017/10/23
0
0
一文搞懂CSS中的字体单位大小(px,em,rem...)

前言 在学习的过程中,发现CSS有很多可以描述单位的尺寸。比如,,,等等。平时也没有深究,一来是没时间,二来是在我学习清单中优先级过低。一直想彻底弄明白,一直耽搁到现在。现在花上一点时间...

你喜欢吃青椒么
07/26
0
0
CSS之Transform

我们利用css3中的transform可以实现文字或图像的旋转、缩放、倾斜和移动四种类型的变形处理。 本文使用的是标准的transform,亦可以使用各个浏览器对应私有的属性。对应如下 -webkit-transf...

我是偶哦
2016/05/28
47
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
9
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部