css的长度单位没有哪些,css 长度单位知多少
写在前面:在这个是个 coder 都会写两行前端代码的年代下,几乎都对 css 不是很陌生,但是真正能写好的确需要对 css 深入学习了,做为一个不称职的后端,我觉得我也有必要多了解一下。
css 中长度单位有哪些?
px、in、cm、mm、q、pt、pc、em、rem、ex、ch、vh、vw、vmin、vmax,最后还有个特殊单位:百分比。
其中基本上可以划分以下为三种
绝对长度单位
px、cm、mm等,px是基于像素的绝对长度单位(说 px 是绝对长度单位其实也不太妥当,因为像素是相对于设备来说的,后面有介绍),cm、mm是物理度量的长度单位。常用px
字体相对长度单位
em、rem、ex 等,常用 em、rem
视窗相对长度单位
vw、vh、vmin等,不太常用
常用单位介绍
css 长度单位十几种,然而受浏览器兼容、开发人员习惯等等原因,常用的也就 px、em、rem等有限的几种,只要搞定这几种就可以了,基于物理度量的的都很容易理解
最常用的 px
像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的
px 可谓是 css 中最常用的长度单位,但是仍有许多人不理解 px 是什么,感觉 px 不就是一个小点嘛。要明白 px 就要搞清楚像素、分辨率和像素密度的问题。像素(Pixel)是数字图像的最小组成单元,它不是一个物理尺寸,但和物理尺寸存在一个可变的换算关系(物理尺寸之间的换算是固定的)。像素分为设备像素(device pixels)和 css像素(css pixels),其中存在着转换关系。要搞明白他的转换关系,就要搞明白什么是 dpi、ppi。对手机比较熟悉的同学可能对这两个东西比较了解。dpi
和 ppi 其实都是表示屏幕像素密度,ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。
屏幕上每英寸可以显示的像素点的数量,单位是ppi,即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。
以五寸的屏幕,1920x1080的分辨率为例
勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px,对角线分辨率除以屏幕尺寸:2203/5≈440 dpi。在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推。所以就造成不同设备下显示效果不同的问题。pc 端可能不太明显,因为标准分辨率和屏幕尺寸就那几种,但是移动端五花八门,什么情况都有可能出现,而且一旦浏览器字体发生改变,页面布局就会被打破
em的出现
相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
为了解决上述问题,有人开始提出使用 em 。一般都是以
的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。但是 使用 em 却会带来一系列问题。
如下示例
{eof}
{/eof}
从上面的示例可以看到,每层的 em 都是根据上层元素来计算的,如果层级过多,估计得那个计算器来专门计算了。而且一旦 dom 结构变化引起层级关系的变化,那么子层级的样式都需要改变。不太建议使用
救世主 rem
CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。
前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。
浏览器兼容性
受限于历史原因,多浏览器之间的兼容问题一直存在,在世也同时得益于 css 解析器对于无效规则忽略而不终止的特性,而且每个浏览器都提供私有属性,多浏览器兼容并不是特别难做,只需要针对每个浏览器加上可以识别的规则就可以。
本文由 lscho 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Jul 24, 2017 at 08:19
am
css的长度单位没有哪些,css 长度单位知多少相关推荐
- CSS中常用的4种长度单位
在现实生活中,我们知道很多的长度单位,例如米,厘米,寸,尺等等,在css的世界中,也有很多的长度单位 以下是css中常用的四种常用的长度单位 1,像素 px - 像素是我们在网页中使用的最多的一个单位 ...
- 外链引入css有哪些方式_HTML+CSS基础(三) CSS的引入方式和CSS选择器
一.CSS概念: 什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观,如字体.背景.颜色等 二.在页面中使用css的3种常用方式 1.行内样式 就是在一个 ...
- dw在html中删除css样式表,DW里CSS的详细介绍
单击"确定". 类 型 属 性 [定义 CSS 类型属性]使用"CSS 样式定义"对话框中的"类型"类别能够定义 CSS 样式的基本字体和类 ...
- CSS(一):CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性;CSS选择器;尺寸和颜色单位、背景和文本设置
目录 一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
- css怎样清除外边距,CSS 外边距
CSS 外边距 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
- 【CSS 知识总结】目录 - CSS 知识点梳理
theme: fancy 「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战」. 一,前言 伴随着整个11月份的忙碌,终于,还是匆匆地完结了 Promise 源码部分 (备注 ...
- 【HTML CSS】笔记2日 CSS基础
1. CSS引入方式 1.1. 行内样式(内联样式) <标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名> style 其 ...
- 前端面试CSS自检(上)CSS基础(先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- 用html和css布局如下图像,HTML CSS + DIV实现整体布局
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
最新文章
- 浅谈MySQL中utf8和utf8mb4的区别
- OpenGL ES之GLKit索引绘制“金字塔”及渲染纹理和颜色混合
- C语言日志操作类实例
- [转载]如何判断js中的数据类型
- QMap与QHash
- The Quad - Directory Explorer(一款四窗口的文件资源管理器)
- nginx负载均衡文件服务器配置虚拟目录代理refer防盗链
- 嵌套点击事件只执行第一次
- iframe重新加载与修改提交不关闭窗口属性页面
- vue-cli初始化项目2.x|3.x
- 微星笔记本每次都进bios
- 公网ip经常变动的解决方法
- 计算机主机不启动的故障,电脑不能正常启动的原因及解决方法
- SiteApp转码声明 来自百度
- android 连接电脑,安卓手机怎么连接电脑详细介绍【图文教程】
- win10使用L2TP连接远程服务器失败的问题
- 使用Camtasia来给视频或者图片调色
- ipynb转换为python文件
- 外汇交易与实务--外汇交易基本原理
- canvas塔防小游戏-保卫大司马
热门文章
- 【算法】剑指 Offer 66. 构建乘积数组
- 【算法】java 用 数组 模拟 队列
- 95-860-040-源码-定时器-SystemProcessingTimeService简介
- 95-50-050-java.nio.channels-NIO-NIO之Channel(通道)
- 【kafka】kafka jmx docker 容器下 跨容器连接 没有到主机的路由 host unreachable
- 【Kafka】ERROR Error when sending message to topic topic_lcc with key: null, value: 4 bytes with error
- Registry:THERE IS NOT VERSION ASSOCIATED FOR THIS PARTICULAR SCHEMA
- 50-20-192-配置-Flink 配置文件详解-zoo.cfg
- 复杂事件处理技术调研
- Java forEach() 方法的三种用法