一.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. vue动画的用法

    vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...

  2. Chapter 1:Introduction

    作者:桂. 时间:2017-05-24  08:06:45 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 1. ...

  3. iOS开发之常用资讯类App的分类展示与编辑的完整案例实现(Swift版)

    上篇博客我们聊了<资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0)>,今天的这篇博客就在上篇博客的基础上做些东西.做一个完整的资讯类App中的分类展示 ...

  4. Aop初步了解

    AOP(aspect-oriented programming) aspect是一种新型的模块化机制,用来描述分散在对象,类或函数中横切关注点.从关注点中分离出横切关注点是面向切面的程序设计的核心概念 ...

  5. Here文档

    Here文档为需要输入的程序,例如,mail.sort和cat等接收在线文本,直到遇到用户定义的结束符号为止.最常用的用户是在Shell脚本中和case命令一起创建菜单.自动登录等等. 1.建立菜单 ...

  6. .NET 开发环境搭建

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

  7. Discuz添加自定义模板广告

    在做Discuz中广告的时候碰到个大问题,现在我需要做一个轮播的通屏广告位,调用广告图片的代码应该是以下代码:<ul>     <li style="background: ...

  8. ecshop邮件订阅按“订阅”没反应

    原订阅邮件所使用的JS文件transport.js和JQuery冲突,会更改transport.js文件,用以下代码可同样实现订阅功能. <input type="text" ...

  9. JVM中class文件探索与解析（一）

    一直想成为一名优秀的架构师的我,转眼已经工作快两年了,对于java内核了解甚少,闲来时间,看看JVM,吧自己的一些研究写下来供大家参考,有不对的地方请指正. 废话不多说,一起来看看JVM中类文件是如何 ...

  10. 查找oracle自己用户的表

    查找oracle自己用户的表 select table_name from user_tables;