CSS中常见的长度单位 1
1.CSS中常见的长度单位
名称 | 英文全称 | 中文名 | 相对/绝对长度 | 换算 | 描述 |
---|---|---|---|---|---|
% | percentage | 百分比 |
相对 |
原长度*百分数 | |
px | pixel | 像素 | 长度由屏幕大小和其分辨率决定 | ||
em | equal-M-width | 当前字体的大写字母“M”的宽度 | 一般是1em=16px | 1em等于浏览器的默认字体尺寸 | |
ex | equal-x-height | 当前字体的小写字母“x”的高度 | 一般1ex=0.5*1em | x-height通常是字体尺寸的一半 | |
in | inch | 英寸 |
绝对 |
1in=2.54cm | 一般用于描述显示器大小(对角线长度) |
mm | millimeter | 毫米 | |||
cm | centimeter | 厘米 | |||
pt | point | 磅 | 1pt=1/72in≈0.3527mm | 磅一般为重量单位,但是在印刷行业可作为长度单位,用于描述字体的大小 | |
pc | pica | 派卡 | 1pc=12pt, 6pc=1in=2.54cm | 印刷行业用于描述字体的大小 |
注意:
(1)字体的尺寸指的是什么?
字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。
(2)CSS中设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。
2. CSS3中新增的度量单位
(1)ch——字符0(零)的宽度;
(2)rem——根元素(html元素)的em;
(3)vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
(4)vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
(5)vmin——vw和vh中较小的那个。
注意:
(1)显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。
(2)rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活。
如果没有定义font-size怎么办?
(3)浏览器支持情况。
rem,各浏览器基本都支持了, IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+。
vw、vh、vmin,浏览器支持并不乐观,IE9支持了,Chrome、Safari、Opera和Firefox还都不支持。
参考文献
[1]http://www.w3school.com.cn/cssref/css_units.asp
[2] http://zhidao.baidu.com/question/41363325.html
[3] pica和point百度百科
[4] http://www.cnblogs.com/wanghl-GIS/archive/2012/04/11/2443045.html
CSS中常见的长度单位 1相关推荐
- CSS中常见的长度单位
px - 像素 px 是 CSS 中最常用的长度单位,可以用来指定字体大小,元素的宽度.高度.边框.内边距,外边距的大小等等, 它是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成 ...
- css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么 发布时间:2020-12-05 13:24:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
- html和css中常见的浏览器兼容性处理
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码: 1 margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height), ...
- HTML+CSS中常见的几种居中方式
前言 在HTML+CSS网页制作开发中经常使用居中操作,实现方式更是多种多样,为了方便大家学习,文章将为大家介绍几种最常见的水平居中方式以及水平+垂直居中方式,比较适合初学者使用. 一.水平居中 方法 ...
- div+css中常见的问题
1.居中问题 div里的内容,ie默认为居中,而ff默认为左对齐. 使ff内容居中的方法是增加代码margin:auto; 2.高度问题 设有两横行div排列,上面的div设置高度(height), ...
- CSS中常见的6种文本样式
前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...
- CSS中常见的几种高度自适应布局
1.左右结构--高度自适应窗口高度 <!doctype html> <html> <head> <meta charset="utf-8" ...
- 前端学习(77):css中常见margin塌陷问题之解决办法
塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 1 /*HTML部分*/2 <body>3 <d ...
- 前端css中常见的-moz-,-webkit-,-o-分别是什么?
-moz-,-webkit-,-o-这三个是厂商前缀 不同浏览的厂商,因为不同浏览器有不同的标准, 所以为了兼容性,需要把常用的浏览器对应的厂商前缀加上. 所以四个属性代表的是一个意思. -moz- ...
最新文章
- 可持久化线段树(主席树)【舰娘系列】【自编题】
- 【Android UI设计与开发】第12期:顶部标题栏(三)ActionBar实现层级导航的返回效果
- 苹果回应“远程扫描用户相册”:声明被广泛误解,未设后门,功能仅美国可用...
- 光子筛matlab,一种振幅调制器件产生椭圆涡旋光的方法与流程
- 转 学习:设置Windows live writer “不发布”到博客园随笔
- 自动机器学习(AutoML)最新综述
- .net core 2.1 mysql_ASP.NET Core 2.2 + MySQL + DB First
- mysql修改字段 新增字段
- nginx文件服务器密码登录,风的方向
- android应用程序 多少钱_关于APP开发你最想了解的事,开发一个APP多少钱?
- 【数据结构与算法】浅谈队列的应用
- Redis教程:数据对象分析(二)
- DispatcherServlet服务调度
- 计算机专业考研可关注哪些公众号,考研应关注哪些公众号?
- 电脑钢琴模拟器(初学WINDOW库)
- python中\r 的意义
- char可以存储汉字吗?为什么
- Linux环境开机自启动
- java.net.URL初识
- IBM造海水电池,“搅局”锂电池产业?
热门文章
- SweynTooth:这些蓝牙漏洞导致多种设备易受攻击
- 基于知识的智能体 笔记
- 2017-2018-1 20155229 实验五 《通讯协议设计》
- 关于路由器操作系统的那点事儿
- 教你成为全栈工程师(Full Stack Developer) 一-各显神通总结八大类编程语言的区别...
- java 解析xml文件
- phoenixframework 自动化测试平台 1.4.8 版本发布
- [转]Oracle分页之三:利用PagerView来实现无刷新GridView
- WebService中运用自定义类的处理要领(转)
- C# 3.0通过Linq、Lambda、匿名函数、代理函数实现数据查询