css长度单位px、em、pt
css长度单位px、em、pt
css长度单位px、em、pt一、长度单位px、em、pt的介绍
px 像素(Pixel)是相对长度单位,像素px是相对于显示器屏幕分辨率而言的
em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
pt 单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。
二、长度单位实例
1、定义宽度:
Width:300px 宽度为300像素
Width:300pt 宽度为300点
Width:300em 宽度为300相对长度
2、对文字设置不同长度em px pt单位:
CSS代码:
.li-px{ font-size:12px}
.li-pt{ font-size:12pt}
.li-em{ font-size:2em}
HTML代码
<li class= "li-px">我是licss5</li>
<li class="li-pt">我是licss5</li>
<li class="li-em">我是licss5</li>
效果图
三、em与px换算
任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
12px相当于9pt长度
12px相当于0.75em长度
9pt相当于0.75em长度
高级em与px换算:
任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
热门推荐
- vmwareesxi7教程(VMware ESXi安装使用记录附下载)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- react路由组件怎么用(无废话快速上手React路由开发)
- Web.Release.config 和 Web.Debug.config
- 如何查询8080端口是否被封(8080端口被占用怎么办?如何关闭被占用的8080端口)
- SQL SERVER数据类型对应C#的数据类型
- C#中equals和==的区别有哪些
- dedecms操作方法(织梦Dedecms在循环列表中获取会员信息的方法)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- sql server 货币型例子(sql server把退款总金额拆分到尽量少的多个订单中详解)