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& ...
随机推荐
- 使用Mingw编译wxSqlite3-3.0.5
最近在学习wxWidgets,而且官方也出了3.0版本,貌似还不错的样子,准备做个小程序来练手.中间需要用到数据库看到很多人推荐wxSqlite3就去下来看看,以下是我使用TDM-GCC 4.8.1( ...
- Common.Logging源码解析二
Common.Logging源码解析一分析了LogManager主入口的整个逻辑,其中第二步生成日志实例工厂类接口分析的很模糊,本随笔将会详细讲解整个日志实例工厂类接口的生成过程! (1).关于如何生 ...
- 一个web应用的诞生(13)--冲向云端
有句话叫所有的乐趣都在部署之前,也许这个小应用还有很多缺陷,也许它还不够完美,但是,仔细想想,其实没有什么能比自己的网站在互联网中上线更令人满足的了,但是满足的背后,总是存在着很多的风险,以至于几乎所 ...
- Hadoop的编译
Hadoop2.4.0 重新编译 64 位本地库 原创作者:大鹏鸟 时间:2014-07-28 环境:虚拟机 VirtualBox,操作系统 64 位 CentOS 6.4 下载重新编译需要的软件 ...
- Quartz源码分析
先简单介绍一下quartz,Quartz是一个功能丰富的开源作业调度库,可以集成到几乎任何Java应用程序中 - 从最小的独立应用程序到最大的电子商务系统.quartz可用于创建执行数十,数百甚至数十 ...
- C#开发移动应用系列(1.环境搭建)
前言 是时候蹭一波热度了..咳咳..我什么都没说.. 其实也是有感而发,昨天看到Jesse写的博文(是时候开始用C#快速开发移动应用了),才幡然醒悟 , 原来我们的Xamarin已经如此的成熟了... ...
- winfrom DataSet和实体类的相互转换
最近做WInfrom项目,对表格和控件的数据绑定非常喜欢用实体类对象来解决,但是绑定以后 又怎么从控件中拿到实体类或者转换为datatable 或者dataset呢 经过在网上的搜索以及自己的改进 完 ...
- Webpack 代码分离
Webpack 代码分离 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件. 总的来说, webpack 分离可以分 ...
- java书系列之——前言
第1章Java的起源 对于计算机语言的发展史,业界一般认为:B语言导致了C语言的诞生,C语言演变出了C++语言,而C++语言将让位于Java语言.要想更好地了解Java语言,就必须了解它产生的原因.推 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...