CSS单位
一.em单位:相对单位,相对于父级大小.
<div class="fs">
你看看我的字体大小
<div class="fs">
你在看看我的字体大小
</div>
</div>
css样式:
body {
font-size: 12px;
}
.fs {
width: 5em;
height: 5em;
font-size: 2em;
background-color: red;
}
div .fs {
background-color: pink;
}
效果:
父级的大小是子级的一半
二.rem：绝对单位，都是相对于基准值(html标签的font-size的值大小);
代码:
<html lang="en" style="font-size:24px;">
<div>
我的字体大小
<div class="fs">
我的字体大小2
<div class="fs">
我的字体大小3
</div>
</div>
</div>
css样式:
.fs {
font-size: 2rem;
}
效果:
字体第一行没有设置.自己大小.按照我们在html中设置的为24.下面两个都为24*2rem=48px;
三.vh和vw
vw:viewpoint width，视窗宽度，1vw=视窗宽度的1%;如果100vw相当于浏览器视窗宽度的100%;
vh:viewpoint height，视窗高度，1vh=视窗高度的1%;如果100vh相当于浏览器视窗高度的100%;
html代码:
<div class="one"></div>
<div class="two"></div>
css样式:
*{
margin:;
padding:;
}
.one{
width: 100vw;
height: 50vh;
background-color: red;
}
.two{
width: 100vw;
height: 50vh;
background-color: pink;
}
效果:
四:vmin和vmax
vmin:vw和vh中较小的那个值。
vmax:vw和vh中较大的那个值。
例如:如果浏览器宽1000高800那么1vmin=8,1vmax=10;
如果浏览器宽700高1100那么1vmin=7,1vmax=11;
ie不支持vmax!!!
代码:
<style>
* {
margin:;
padding:;
}
.one {
width: 10vmin;
height: 10vmin;
background-color: red;
}
.two {
width: 10vmax;
height: 10vmax;
background-color: pink;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
效果:
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& ...
随机推荐
- 读阿里巴巴Java开发手册v1.2.0之编程规约有感【架构篇】
不为过去蹉跎,改变当下. 为什么开篇就送这么一句话给大家,我相信很多处于1-3年码龄的哥们儿们,在平时的编码历程中编码的个性可能是多彩的,每个人都有每个人特定的风格,但是我们现在这么随意写,以后这么 ...
- python 第五弹
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...
- OpenGL教程(0)——介绍
OpenGL介绍 OpenGL,全称Open Graphics Library,是一个用C语言写的图形API.通俗地说,OpenGL用来绘制2D/3D图形.目前OpenGL的运用十分广泛,有许多用Op ...
- MySQL 开启慢查询日志
1.1 简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 1.2 登录数据库查看 [root@localhost lib]# ...
- javaSE_08Java中static、继承、重写-思维导图
思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 : 2)右击在新标签中打开放大查看 (IE不支持,搜狗,360可以):
- 机器学习：Python实现聚类算法(三)之总结
考虑到学习知识的顺序及效率问题,所以后续的几种聚类方法不再详细讲解原理,也不再写python实现的源代码,只介绍下算法的基本思路,使大家对每种算法有个直观的印象,从而可以更好的理解函数中参数的意义及作 ...
- Linux SSH安全技巧
SSH服务器配置文件是/etc/ssh/sshd_conf.在你对它进行每一次改动后都需要重新启动SSH服务,以便让改动生效. 1.修改SSH监听端口默认情况下,SSH监听连接端口22,攻击者使用端口 ...
- 波浪号和Hyphen扩展
Bash将波浪号作为路径扩展符 $echo ~ //扩展为当前用户主目录的全路径名/home/user $echo ~user //扩展为用户user的主目录/home/user $echo ~+ / ...
- [0] MVC&MVP&MVVM差异点
MVC: 用户的请求首先会到达Controller,由Controller从Model获取数据,选择合适的View,把处理结果呈现到View上: MVP: 用户的请求首先会到达View,View传递请 ...
- Scrapy中使用cookie免于验证登录和模拟登录
Scrapy中使用cookie免于验证登录和模拟登录 引言 python爬虫我认为最困难的问题一个是ip代理,另外一个就是模拟登录了,更操蛋的就是模拟登录了之后还有验证码,真的是不让人省心,不过既然有 ...