CSS常用单位
CSS常用单位
CSS
的长度单位主要有%
、px
、in
、cm
、ch
、mm
、ex
、pt
、pc
、em
、rem
、vw
、vh
、vmin
、vmax
,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。
绝对长度单位
px 像素
通常而言,一个CSS
像素代表屏幕设备的一个像素点,但是对于高分辨率屏幕而言一个CSS
像素往往占多个设备像素,也就是说有多个屏幕像素点来表示1px
,1px = 1in / 96
。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t1{
width: 1px;
}
</style>
<section>
<div id="t1"></div>
</section>
in 英寸
1in = 2.54cm = 96px
。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t2{
width: 1in;
}
</style>
<section>
<div id="t2"></div>
</section>
cm 厘米
1cm = 10mm = 96px/2.54 ≈ 37.8px
。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t3{
width: 1cm;
}
</style>
<section>
<div id="t3"></div>
</section>
mm 毫米
1mm = 0.1cm = 3.78px
。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t4{
width: 1mm;
}
</style>
<section>
<div id="t4"></div>
</section>
pt 磅
1pt = 1/72in ≈ 0.0139in = 1/722.54cm = 1/7296px ≈ 1.33px
。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t5{
width: 1pt;
}
</style>
<section>
<div id="t5"></div>
</section>
pc 派卡
1pc = 1/6in = 12pt = 1/6*96px = 16px
。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t6{
width: 1pc;
}
</style>
<section>
<div id="t6"></div>
</section>
相对长度单位
em
em
表示元素的font-size
属性的计算值,如果用于font-size
属性本身,相对于父元素的font-size
,若用于其他属性,相对于本身元素的font-size
,需要注意的是,使用em
可能会出现1.2 * 1.2 = 1.44
的现象,若父元素font-size
属性设置为16px
,下一级元素设置为1.2em
,经计算实际像素为16px * 1.2 = 19.2px
,再下一级元素若继续设置为1.2em
则经计算为16px * 1.2 * 1.2 = 23.04px
,这是因为父级的基准font-size
属性被计算重设为另一个值,在子元素中使用em
时需要根据父元素的font-size
重新计算子元素的em
值。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t7 > div{
background-color: blue;
font-size: 2em; /* 相对于父元素 2 * 10px = 20px */
width: 5em; /* 相对于元素本身 5 * 20px = 100px */
}
</style>
<section class="except">
<div id="t7">
<div>文字</div>
</div>
<button onclick="emChange()">改变字体大小</button>
</section>
<script type="text/javascript">
function emChange(){
document.getElementById("t7").style["font-size"] = "20px";
}
</script>
<section class="except" style="font-size: 10px;">
<div style="font-size: 2em"> <!-- 2 * 10px = 20px -->
<div>Test</div>
<div style="font-size: 2em"> <!-- 2 * 2 * 10px = 40px -->
<div>Test</div>
</div>
</div>
</section>
rem
rem
单位都是相对于根元素html
的font-size
来决定大小的,根元素的font-size
相当于提供了一个基准,当页面的size
发生变化时,只需要改变font-size
的值,那么以rem
为固定单位的元素的大小也会发生相应的变化。由于所有元素都是以根元素的font-size
为基准进行计算的,也就不存在em
的1.2 * 1.2 = 1.44
现象。rem
不是只对定义字体大小有用,可以使用rem
把整个网格系统或者UI
样式库基于HTML
根元素的字体大小上,这将带来更加可预测的字体大小和比例缩放,实现响应式的布局。
<style type="text/css">
html{
font-size: 15px;
}
div{
height: 30px;
background-color: blue;
}
#t8 > div{
background-color: blue;
font-size: 2rem; /* 相对于根元素 2 * 15px = 30px */
width: 6rem; /* 相对于根元素 6 * 15px = 90px */
}
</style>
<section class="except">
<div id="t8">
<div>文字</div>
</div>
<button onclick="remChange()">改变字体大小</button>
</section>
<script type="text/javascript">
function remChange(){
document.getElementsByTagName("html")[0].style["font-size"] = "20px";
}
</script>
<section class="except">
<div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
<div>Test</div>
<div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
<div>Test</div>
</div>
</div>
</section>
ex
ex
是指所用字体中小写x
的高度,但不同字体x
的高度可能不同,对于很多字体来说1ex ≈ 0.5em
,所以很多浏览器在实际应用中取em
值一半作为ex
值,ex
单位在实际中常用于微调。
<style type="text/css">
#t9{
font-size: 1ex;
}
</style>
<section class="except">
<div id="t9">文字</div>
<span style="font-size: 1em">文字</span>
</section>
ch
ch
与ex
类似,这一单位代表元素所用字体中0
这一字形的宽度,更准确地说是0
这一字形的预测尺寸,如果无法确定0
字形的大小,则必须假定其宽为0.5em
高为1em
,也就是取em
值的一半作为ch
值。
<style type="text/css">
#t10{
font-size: 1ch;
}
</style>
<section class="except">
<div id="t10">文字</div>
<span style="font-size: 1em">文字</span>
</section>
百分比单位
%
当度量单位设置为百分比时,即可使浏览器组件宽高随着浏览器的大小相应变化。
- 子元素的
height
或width
中使用百分比,是相对于子元素的直接父元素,width
相对于父元素的width
,height
相对于父元素的height
。 - 子元素的
top
和bottom
如果设置百分比,则相对于直接非static
定位的父元素的高度,同样子元素的left
和right
如果设置百分比,则相对于直接非static
定位父元素的宽度。 - 子元素的
padding
如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width
,而与父元素的height
无关。 - 子元素的
margin
如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
。 - 设置
border-radius
为百分比,则是相对于自身的宽度,还有translate
、background-size
等都是相对于自身的。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t11{
width: 50%;
}
</style>
<section>
<div id="t11"></div>
</section>
vh vw vmin vmax
-
vh
: 相对于视窗的高度,1vh
等于视窗高度的1%
。 -
vw
: 相对于视窗的宽度,1vw
等于视窗宽度的1%
。 -
vmin
:vw
和vh
中的较小值。 -
vmax
:vw
和vh
中的较大值。
<style type="text/css">
div{
height: 30px;
background-color: blue;
}
#t12{
background-color: #fff;
}
#t12 > div:nth-child(1){
width: 50vh;
}
#t12 > div:nth-child(2){
width: 50vw;
}
#t12 > div:nth-child(3){
width: 50vmax;
}
#t12 > div:nth-child(4){
width: 50vmin;
}
</style>
<section class="">
<div id="t12">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>CSS单位</title>
<style type="text/css">
html{
font-size: 15px;
}
section {
margin: 10px 0;
}
div{
height: 30px;
background-color: blue;
}
.except div{
height: auto;
background-color: #fff;
}
#t1{
width: 1px;
}
#t2{
width: 1in;
}
#t3{
width: 1cm;
}
#t4{
width: 1mm;
}
#t5{
width: 1pt;
}
#t6{
width: 1pc;
}
#t7{
background-color: #fff;
font-size: 10px;
}
#t7 > div{
background-color: blue;
font-size: 2em; /* 相对于父元素 2 * 10px = 20px */
width: 5em; /* 相对于元素本身 5 * 20px = 100px */
}
#t8 > div{
background-color: blue;
font-size: 2rem; /* 相对于根元素 2 * 15px = 30px */
width: 6rem; /* 相对于根元素 6 * 15px = 90px */
}
#t9{
font-size: 1ex;
}
#t10{
font-size: 1ch;
}
#t11{
width: 50%;
}
#t12{
background-color: #fff;
}
#t12 > div:nth-child(1){
width: 50vh;
}
#t12 > div:nth-child(2){
width: 50vw;
}
#t12 > div:nth-child(3){
width: 50vmax;
}
#t12 > div:nth-child(4){
width: 50vmin;
}
</style>
</head>
<body>
<section>
<div id="t1"></div>
</section>
<section>
<div id="t2"></div>
</section>
<section>
<div id="t3"></div>
</section>
<section>
<div id="t4"></div>
</section>
<section>
<div id="t5"></div>
</section>
<section>
<div id="t6"></div>
</section>
<section class="except">
<div id="t7">
<div>文字</div>
</div>
<button onclick="emChange()">改变字体大小</button>
</section>
<section class="except" style="font-size: 10px;">
<div style="font-size: 2em"> <!-- 2 * 10px = 20px -->
<div>Test</div>
<div style="font-size: 2em"> <!-- 2 * 2 * 10px = 40px -->
<div>Test</div>
</div>
</div>
</section>
<section class="except">
<div id="t8">
<div>文字</div>
</div>
<button onclick="remChange()">改变字体大小</button>
</section>
<section class="except">
<div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
<div>Test</div>
<div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
<div>Test</div>
</div>
</div>
</section>
<section class="except">
<div id="t9">文字</div>
<span style="font-size: 1em">文字</span>
</section>
<section class="except">
<div id="t10">文字</div>
<span style="font-size: 1em">文字</span>
</section>
<section>
<div id="t11"></div>
</section>
<section class="">
<div id="t12">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</body>
<script type="text/javascript">
function emChange(){
document.getElementById("t7").style["font-size"] = "20px";
}
function remChange(){
document.getElementsByTagName("html")[0].style["font-size"] = "20px";
}
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/ebbf64b83f49
https://www.runoob.com/cssref/css-units.html
https://www.cnblogs.com/niuyaomin/p/12319211.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
https://www.cnblogs.com/liujunhang/articles/10686823.html
https://blog.csdn.net/VickyTsai/article/details/102960594
https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html
- Android新手之旅(11) 在现有页面中插入新的view
- Docker容器学习梳理--容器间网络通信设置(Pipework和Open vSwitch)
- 温故而知新:Asp.Net中如何正确使用Session
- Android新手之旅(13) listview中数据重复的问题
- 温故而知新:HttpApplication,HttpModule,HttpContext及Asp.Net页生命周期
- proxy_pass反向代理配置中url后面加不加/的说明
- Android新手之旅(10) 嵌套布局
- C#代码也VB
- Docker容器学习梳理--SSH方式登陆容器
- Docker网络解决方案-Flannel部署记录
- Nginx的location配置规则梳理
- 统计代码行数的方法梳理
- 如何在不影响asp.net默认安全性的前提下使用ckeditor/fckeditor?
- Linux下防御DDOS攻击的操作梳理
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- nginx 常见问题记录
- ReturnSingleDatabase为True报错的解决办法
- 【Vim】vim配置的选择
- 关于HashMap的一些理解
- SpringBoot2.x系列教程(六十一)Spring Boot集成FastDFS实现文件上传
- 解决对接华为kafka 进行Kerberos认证时的sun.security.krb5.KrbException
- Newbe.Claptrap 框架如何实现多级生命周期控制?
- Kafka linux(centos7)安装配置kerberos并在另一台机器上使用Java服务接收消息
- SpringCloud bus 手动post可用 使用webhooks自动更新配置失效的解决小记
- 处理Storm1.2.2 日志报错 与spring boot冲突
- Java 中的 ==, equals 与 hashCode 的区别与联系
- 专家精品|密码朋克的社会实验(三):比特币发明了什么
- 面试题答案
- Vue3 为何使用 Proxy 实现数据监听
- vivo 悟空活动中台 - H5 活动加载优化