一些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%大的情况
- <!DOCTYPE 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>
- <!DOCTYPE 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>
一些css单位的更多相关文章
- 你可能没注意的CSS单位
扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...
- css单位盘点
css单位有:px,em,rem,vh,vw,vmin,vmax,ex,ch 等等 1.px单位最常见,也最直接,这里不做介绍. 2.em:em的值并不是固定,它继承父级元素的字体大小,所以层数越深字 ...
- 你可能不知道的7个CSS单位
如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- 七个你可能不了解的CSS单位
我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...
- css单位分析、颜色设置与调色板
CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...
- CSS:CSS 单位
ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如, ...
- rem — 一个低调的css单位
原文 http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...
- css单位中px和em,rem的区别
css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...
- CSS单位计算总结
CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...
随机推荐
- laravel中遇到的坑
已经遇到的坑和未来可能遇到的坑都将在这里写出来: 在资源控制器中创建新的方法后(如果资源控制器中的7个方法无法满足你的需求时,你就会创建新的方法),接下来就是创建路由,这个时候注意了,你必须要把路由放 ...
- jquery toggle()方法 语法
jquery toggle()方法 语法 作用:toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件.该方法也可用于切换被选元素的 hide() 与 sho ...
- Eclips的JDK更换为1.8
1.Window—Preferences—Java—Compiler—右侧面板设置为1.6 2.Window—Preferences—Java—Installed JREs—右侧面板“Add”本地的1 ...
- Confluence 6 在一个空间中查看所有附加的文件
有下面 2 种方法可以让你查看空间的所有附件.你可以: 使用 Space Attachments Macro 来在一个页面中显示列表文件. 进入空间后,然后从边栏的底部选择 空间工具(Space to ...
- AcWing:143. 最大异或对(01字典树 + 位运算 + 异或性质)
在给定的N个整数A1,A2……ANA1,A2……AN中选出两个进行xor(异或)运算,得到的结果最大是多少? 输入格式 第一行输入一个整数N. 第二行输入N个整数A1A1-ANAN. 输出格式 输出一 ...
- HDU3844Mining Your Own Business
目测某年HNOI,(其实这个题是2011年的WF,hdu上找到的,HNOI2012那个中文题在bzoj和loj上都有,叫矿场搭建,题意几乎一样,数据比较弱,交这份代码也能A). 先讲题解,然后说一些有 ...
- Access denied for user 'ODBC'@'localhost' (using password: NO) 的解决方法
在部署公司的web项目到myeclipse时遇到的一个错误:Access denied for user 'ODBC'@'localhost' (using password: NO),貌似是mysq ...
- 一、Git的一些命令操作----创建版本库、增加文件到Git库、时光机穿梭、远程仓库
具体详细教程请链接:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 我这里只是记录 ...
- 显示Pl/Sql Developer window list窗口
默认情况下Window List窗口是不显示的,这十分不方便 (一)在菜单项的Tools下的Preference选项中的UserInterface中选择Option,在右边对于的Autosave de ...
- LNMPA是什么?
也许大家对LAMP.LNMP比较熟悉,LAMP代表Linux下Apache.MySQL.PHP这种网站服务器架构:LNMP代表的是Linux下Nginx.MySQL.PHP这种网站服务器架构.LNMP ...