一.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单位的更多相关文章

  1. 你可能没注意的CSS单位

    扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...

  2. css单位盘点

    css单位有:px,em,rem,vh,vw,vmin,vmax,ex,ch 等等 1.px单位最常见,也最直接,这里不做介绍. 2.em:em的值并不是固定,它继承父级元素的字体大小,所以层数越深字 ...

  3. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  4. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  5. 七个你可能不了解的CSS单位

    我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...

  6. css单位分析、颜色设置与调色板

    CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...

  7. CSS：CSS 单位

    ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如, ...

  8. rem — 一个低调的css单位

    原文  http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...

  9. css单位中px和em,rem的区别

    css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...

  10. CSS单位计算总结

    CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...

随机推荐

  1. Web开发安全小贴士

    想要开发出一个安全的.健壮的Web应用其实是非常困难的, 如果你想要快速开发出一款集使用价值.用户体验度.以及安全性为一身的产品,以下安全步骤很必要!!!     数据库 1.对类似访问令牌.电子邮箱 ...

  2. LCA——求解最近公共祖先

    LCA 在有根树中,两个节点 u 和 v 的公共祖先中距离最近的那个被称为最近公共祖先(LCA,Lowest Common Ancestor). 有多种算法解决 LCA 或相关的问题. 基于二分搜索的 ...

  3. 一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

  4. 基于查表的整数霍夫变换方法实现（matlab）

    暂时先用matlab把算法弄一下,这是基于查表的整数霍夫变换方法实现及解释. 接着再实现FPGA的霍夫变换. 霍夫变换原理和算法这里不多说,可参考以下链接: http://blog.csdn.net/ ...

  5. python3 简单实现从csv文件中读取内容，并对内容进行分类统计

    新手python刚刚上路,在实际工作中遇到如题所示的问题,尝试使用python3简单实现如下,欢迎高手前来优化import csv #打开文件,用with打开可以不用去特意关闭file了,python ...

  6. 线程-join();

    一.join()方法,官方描述 waits for this thread to die 等待当前线程死亡:   源码: //无参,默认调用join(0) public final void join ...

  7. Linux 安装配置 Tomcat

    1.下载 tomcat Linux 版本 oracle 官网下载地址:http://tomcat.apache.org/download-80.cgi 百度云盘链接:http://pan.baidu. ...

  8. 安装python2.7

    系统的yum程序使用的是python2.6,不能够卸载系统所带的python环境.python2.7的安装命令如下 tar vjxf Python-2.7.1.tar.bz2 cd Python-2. ...

  9. sharepoint rest api 创建文档库 文件夹

    function createFolder() { var requestHeaders = { "Accept": "application/json;odata=ve ...

  10. 委托（C#）

    委托,delegate 关键字用于声明一个引用类型,该引用类型可用于封装命名方法或匿名方法.委托类似于 C++ 中的函数指针:但是,委托是类型安全和可靠的.委托类型声明的格式如下: public de ...