一.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. 开源解析库 - JSON

    Json及其实现 JSON作为一种轻量级的数据交换格式,多被用于跨语言通信(比如CPP与PHP之间的数据交互). 至于何为JSON,其详细解释参考 官网. 既然是一种格式,那便必然有相应的编码实现.在 ...

  2. 一天搞定CSS： CSS选择器优先级--08

    选择器优先级:是指代码的执行顺序 通俗的说,就是多个选择器同时对一个标签分别添加样式,那么这个标签显示那个选择器设置的样式 1.优先级规则 2.规则1和2说明 优先级相同,谁后谁优先 优先级不同,优先 ...

  3. 一天搞定CSS：文本text--05

    1.文本体系 2.文本各属性取值 说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如text-align- - - -有3个取值:left,center,right 3.空格大小 4.代 ...

  4. cpp(第十七章)

    1.baseic_ostream<charT,traits>& write(const char_type *s,streamsize n),cout.write()第一个参数提供 ...

  5. JavaScript 特效三大系列总结

    一. offset系列 1. offset系列的5个属性 1. offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离 * 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 * ...

  6. 2个问题，解决tomcat启动一闪而过和运行tomcat/bin目录下的startup.bat时报错（the CATALINA_HOME environment variable is not defined correctly）

    1.除手动使用开始菜单自启动或者程序启动TOMCAT时TOMCAT一闪而过,这时候是发生了错误,这时候我们打开BIN目录下的“startup.bat”文件,编辑,在结尾添加pause命名,这样在CMD ...

  7. ionic 使用了 crosswalkwebview 所产生的bug 及 解决方案

    一.问题产生: 在ionic app 优化方案中,我在前之前的博文中提到使用 --crosswalkwebview: 使用了crosswalkwebview后,app的显示及兼容效果确实很不错,虽然a ...

  8. 【知识整理】这可能是最好的RxJava 2.x 入门教程（二）

    这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(一) GitHub 代码同步更新:https://github.com/nanchen22 ...

  9. An express train to reveries

    An express train to reveries time limit per test 1 second memory limit per test 256 megabytes input  ...

  10. Winform Timer用法，Invoke在Timer的事件中更新控件状态

    System.Timers.Timer可以定时执行方法,在指定的时间间隔之后执行事件. form窗体上放一个菜单,用于开始或者结束定时器Timer. 一个文本框,显示定时执行方法. public pa ...