一些css单位
https://blog.csdn.net/qq_40001322/article/details/80867289
1.em
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5
但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照后面的例子。
2.rem
这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
参照后面给的demo
3.vh
vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
4.vw
vw就是当前屏幕宽度的1%
补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,
但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况
-
-
<html lang="Zh-cn">
-
<head>
-
<meta charset="UTF-8">
-
<title>恭贺新春</title>
-
</head>
-
<style type="text/css" media="screen">
-
html{
-
font-size: 14px;
-
}
-
.em,
-
.em > .em-son,
-
.em > .em-son > .em-grandson {
-
font-size: 1.2em;
-
}
-
.rem,
-
.rem > .rem-son,
-
.rem > .rem-son > .rem-grandson {
-
font-size: 1.2rem;
-
}
-
.rem-box {
-
background: #d60b3b;
-
width:10rem;
-
height: 10rem;
-
color: #fff;
-
text-align: center;
-
line-height:5rem;
-
}
-
.vhvw-box {
-
background: #d60b3b;
-
width:50vw;
-
height: 50vh;
-
color: #fff;
-
text-align: center;
-
line-height:25vh;
-
}
-
</style>
-
<body>
-
<h1>em 继承父元素的字体大小,来变大或变小,多层嵌套字体变化</h1>
-
<div class="em">
-
字体大小 1.2 * 14(父元素body) = 16px
-
<div class="em-son">
-
字体大小 1.2 * 16(父元素em) = 20px
-
<div class="em-grandson">
-
字体大小 1.2 * 20(父元素em-son) = 24px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 继承根节点元素的字体大小,来变大或变小,多层嵌套字体不变化</h1>
-
<div class="rem">
-
字体大小 1.2 * 14(根节点html) = 16px
-
<div class="rem-son">
-
字体大小 1.2 * 14(根节点html) = 16px
-
<div class="rem-grandson">
-
字体大小 1.2 * 14(根节点html) = 16px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 也可作为固定长度单位设置宽高等</h1>
-
<div class="rem-box">
-
宽:14 * 10 = 140px<br>
-
高:14 * 10 = 140px
-
</div>
-
<br>
-
<h1>vh,vw 屏幕可见区域的高度,宽度的1%</h1>
-
<div class="vhvw-box">
-
宽:屏幕宽度的50%<br>
-
高:屏幕高度的50%
-
</div>
-
</body>
-
</html>
-
-
<html lang="Zh-cn">
-
<head>
-
<meta charset="UTF-8">
-
<title>恭贺新春</title>
-
</head>
-
<style type="text/css" media="screen">
-
html{
-
font-size: 14px;
-
}
-
.em,
-
.em > .em-son,
-
.em > .em-son > .em-grandson {
-
font-size: 1.2em;
-
}
-
.rem,
-
.rem > .rem-son,
-
.rem > .rem-son > .rem-grandson {
-
font-size: 1.2rem;
-
}
-
.rem-box {
-
background: #d60b3b;
-
width:10rem;
-
height: 10rem;
-
color: #fff;
-
text-align: center;
-
line-height:5rem;
-
}
-
.vhvw-box {
-
background: #d60b3b;
-
width:50vw;
-
height: 50vh;
-
color: #fff;
-
text-align: center;
-
line-height:25vh;
-
}
-
</style>
-
<body>
-
<h1>em 继承父元素的字体大小,来变大或变小,多层嵌套字体变化</h1>
-
<div class="em">
-
字体大小 1.2 * 14(父元素body) = 16px
-
<div class="em-son">
-
字体大小 1.2 * 16(父元素em) = 20px
-
<div class="em-grandson">
-
字体大小 1.2 * 20(父元素em-son) = 24px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 继承根节点元素的字体大小,来变大或变小,多层嵌套字体不变化</h1>
-
<div class="rem">
-
字体大小 1.2 * 14(根节点html) = 16px
-
<div class="rem-son">
-
字体大小 1.2 * 14(根节点html) = 16px
-
<div class="rem-grandson">
-
字体大小 1.2 * 14(根节点html) = 16px
-
</div>
-
</div>
-
</div>
-
<br>
-
<h1>rem 也可作为固定长度单位设置宽高等</h1>
-
<div class="rem-box">
-
宽:14 * 10 = 140px<br>
-
高:14 * 10 = 140px
-
</div>
-
<br>
-
<h1>vh,vw 屏幕可见区域的高度,宽度的1%</h1>
-
<div class="vhvw-box">
-
宽:屏幕宽度的50%<br>
-
高:屏幕高度的50%
-
</div>
-
</body>
-
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析