一.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. python对mysql数据库操作的三种不同方式

    首先要说一下,在这个暑期如果没有什么特殊情况,我打算用python尝试写一个考试系统,希望能在下学期的python课程实际使用,并且尽量在此之前把用到的相关技术都以分篇博客的方式分享出来,有想要交流的 ...

  2. Android高效内存1：一张图片占用多少内存

    在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用.而在App中,大部分内存可能被我们图片占用了,所以减少图片的内存占用可以带来直接的效果.本文就简单介绍一张图片到 ...

  3. 浅析DES与AES、RSA三种典型加密算法的比较

    DES与AES的比较 自DES 算法公诸于世以来,学术界围绕它的安全性等方面进行了研究并展开了激烈的争论.在技术上,对DES的批评主要集中在以下几个方面: 1.作为分组密码,DES 的加密单位仅有64 ...

  4. 关于URL的理解

    引言 URL,是统一资源定位符(Uniform Resource Locator)的缩写,一个URL就是一个特定资源在网络上的地址.理论上讲,一个URL指向一个唯一的资源,这个资源可以使一个HTML页 ...

  5. http服务器开发笔记（一）——先跑起来

    做了很多年的web相关开发,从来也没有系统的学习http协议,最近正好工作不怎么忙,准备系统的学习一下. 接下来准备自己写一小型的http服务器来学习,因为现在对JavaScript比较熟悉,所以决定 ...

  6. javascript基础（幼兔、小兔成兔数量等典型例题）

    一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米var sum=0; var a=0.0001 for(var i=0;i<100;i++){ a=a*2; sum= ...

  7. .NET 开发环境搭建

    概述 在接下来的时间里,将会入手ASP.NET MVC这一专题,尽量用最快的时间,最有效的方法,分别从深度和广度上剖析这一专题,力求讲明白.讲透.以此来与大家分享,力求达到共同学习,共同交流,共同进步 ...

  8. 浅谈Swift和OC的区别

    前言 转眼Swift3都出来快一年了,从OC到Swift也经历了很多,所以对两者的一些使用区别也总结了一点,暂且记录下,权当自己的一个笔记. 当然其中一些区别可能大家都有耳闻,所以这里也会结合自身的一 ...

  9. airdrop-ng/aircrack-ng

    找了很久,才找到安装方法跟使用,特此记录下来首先要安装好airodump-ng 1.2 beat那个版本我安装的前提是 airodump mon0 可以试用了.今天就不写airodump-ng安装了, ...

  10. java wait 和notify

    这几天自己学习了一下线程的知识,wait 方法使当前的线程等待,notify 方法 唤醒当前的线程的方法 th 线程在5的时候进行wait,此时主线程继续执行, 主线程执行到9的时候 唤醒 th 线程 ...