一.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. 错误处理1： D:\a1-C++\C++作业\第五次1.cpp undefined reference to `vtable for Shape'

    在编译程序的时候遇到此误,在google上查,很多地方都说是因为虚基类里面的虚拟析构函数没有提供实现导致的.但是我的已经提供了实现,也不行.最后发现是其他没有提供实现的虚函数造成的.所以,在一个虚基类 ...

  2. cpp(第八章)

    1. #include <iostream> inline int add(int &n) { n= n+; ; } int main() { using namespace st ...

  3. jquery中的$(document).ready()使用小结

    本篇文章主要是对jquery中的$(document).ready()使用方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 window.onload = function(){ ...

  4. C# 并行任务——Parallel类

    一.Parallel类 Parallel类提供了数据和任务的并行性: 二.Paraller.For() Paraller.For()方法类似于C#的for循环语句,也是多次执行一个任务.使用Paral ...

  5. Bash中的字符串变量扩展

    1.向尾部方向的最小化删除 (%) $pathname="/usr/bin/local/bin"$echo ${pathname%/bin*}/usr/bin/local 2.向尾 ...

  6. JAVA 基础知识学习笔记 名称解释

    Java ee:​ IDE: ​ itegrity   development environment 集成开发环境 JMS:​ java Message Service java   信息服务 JM ...

  7. IOS机型margin属性无效问题

    这个问题很多小伙伴都有遇到,这次本猿也遇到了,记录一笔. 结论:简单的解决办法margin换padding!如有误,请大神不吝赐教.在Chrome浏览器移动端测试iphone5,打开的也是没问题的(这 ...

  8. [USACO09MAR]地震损失2Earthquake Damage 2

    地震破坏 时间限制: 1 Sec  内存限制: 128 MB 题目描述 威斯康星发生了一场地震!约翰的牧场遭到了打击,有一些牛棚变成了废墟,如果一间牛棚遭到 了破坏,那么所有和它相连的道路都不能使用了 ...

  9. 玩转spring boot——websocket

    前言 QQ这类即时通讯工具多数是以桌面应用的方式存在.在没有websocket出现之前,如果开发一个网页版的即时通讯应用,则需要定时刷新页面或定时调用ajax请求,这无疑会加大服务器的负载和增加了客户 ...

  10. js中的匿名函数自执行

    随笔,java中因为有修饰符的存在,那就有private类的存在,js不一样,没有修饰词一说,因此为了防止全局变量的污染,js中就出现了匿名函数,直接上code,看到的人可以自己体会: (functi ...