html中字体的单位,CSS中字体单位:px、em、rem和%
对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。
“网页”和“印刷”的单位
若要把单位做区隔,最简单可以分为“网页”和“印刷”两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计。
网页(单位)
px:绝对单位,代表屏幕中每个「点」(pixel)。
em:相对单位,每个子元素透过「倍数」乘以父元素的px值。
rem:相对单位,每个元素透过「倍数」乘以根元素的px值。
%:相对单位,每个子元素透过「百分比」乘以父元素的px值。
网页(属性名称)
medium:于16px(h4预设值)
xx-small:medium的0.6倍(h6预设值)
x-small:medium的0.75倍
small:medium的0.8倍(h5预设值,W3C定义为0.89,实测约为0.8)
large:medium的1.1倍(h3预设值,W3C定义为1.2,实测约为1.1)
x-large:medium的1.5倍(h2预设值)
xx-large:medium的2倍(h1预设值)
smaller:约为父层的80%
larger:约为父层的120%
印刷
pt:打印机的每个「点」,定义为1 pt=1/72 in,如果在72 dpi的系统上1 px = 1 pt,但如果在96dpi的系统上1 px = 0.75 pt(72/96 = 0.75)。
in:英寸,在96 dpi的系统上1 in = 96 px。
cm:厘米,在96 dpi的系统上1 cm = 37.795275593333 px。
mm:毫米,在96 dpi的系统上1 cm = 3.7795275593333 px。
示例展示
以下将展示四种不同单位的示例,为公平起见,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,然后可个别进行调整。
html{
font-size:16px;
}
html * {
font-size: 1rem;
}
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
1. px
px是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例表示的,指定多大px字体就会多大。
2. em
em是相对单位,为每个子元素透过“倍数”乘以父元素的px值,如果我们每一层div都使用1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(浏览器预设字体大小为16px,若无特别指定则会直接继承父元素字体大小)
3. rem
rem是相对单位,为每个元素透过“倍数”乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size,预设为16px)
4. %
%百分比是相对单位,和em大同小异,简单来说em就是百分比除以一百,如果我们每一层div都使用120%,就等同于1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
5.small、medium、large…等
字体大小的属性有七种,分别是xx-small、x-small、small、medium、large、x-large和xx-large,除了x-small,其余六种分别对应h6~h1的标签文字大小,根据W3C的规范,以medium预设16px为基础(若html字体预设大小改变,medium也会跟着变),使用固定的百分比乘以medium的大小,例如ss-small预设为16px x 0.6 = 9.6px(浏览器显示为12px)。
6. larger、smaller
larger和smaller就是固定百分比为单位,larger为父层的120%,smaller为父层的80%。
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
小结
熟悉了字体大小单位之后,就更能有系统的设计整个网站的CSS构架,不过font-size本身和font-family有着一些复杂的关系,不同的font-family有时也会影响font-size的设定,因此使用上还是得稍微注意一下啰!
html中字体的单位,CSS中字体单位:px、em、rem和%相关推荐
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- font在html语言中是什么意思,CSS中font是什么意思?
font代表字体,是CSS中的一个简写字体属性,用于一次设置元素字体的两个或更多方面,可以在一个声明中设置所有字体属性. CSS font属性 font 简写属性可在一个声明中设置所有字体属性. 说明 ...
- css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
最新文章
- asp.net httpmodule 访问页面控件 备忘
- 重庆二师计算机科学与技术,应用型本科院校计算机科学与技术专业一流课程建设思考──以重庆第二师范学院为例...
- JQuery源码-------JQuery中数值型变量的判断isNumeric
- caffe 加入 cudnn编译
- 树莓派 st-link master使用ST-LINK V2下载STM32程序 支持F0 F1 F2 等
- 冲刺二阶段-个人总结03
- JS性能分析(测试代码运行时间)
- 征稿 | MIUA 2022 医学影像理解与分析会议
- 小鹏吃相难看,消费者难做“鹏”友
- NOI 2004 郁闷的出纳员
- 熊猫DataFrame groupby()函数
- Android 6.0 扫描不到 Ble 设备需开启位置权限
- C#中的正则表达式 \(([^)]*)\) 详解
- vue-cli2.0webpack的理解
- hg6201m怎么设置虚拟服务器,移动光猫HG6201M定期重启设置
- TCL语言中的执行顺序
- 谈谈功能测试与非功能测试(最详细)
- 个人对ReadyBoost加速你的Win7的看法
- OSChina 周一乱弹 —— 原来我的名字还有这么美的一个故事
- [Android]实现高德地图导航