美文网首页
CSS入门13-单位详解

CSS入门13-单位详解

作者: love丁酥酥 | 来源:发表于2018-01-26 23:05 被阅读21次

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)
(注2:更多内容请查看我的目录。)

1. 简介

CSS中有很多属性会涉及到长度,比如 width, margin, padding, font-size, border-width等。这些长度由数字和单位组成,数字和单位之间是没有空格的。长度单位的类型有两种:绝对长度单位和相对长度单位。

2. 绝对长度单位

绝对长度单位的含义,就是客观上绝对存在的单位,放在任何地方都一样。

  1. 像素px
    最常见的单位,很多其他单位都会最终映射成像素。这个单位我们会在后面详细解析。
  2. 英寸in
    1in = 2.54cm = 96px
  3. 厘米cm
    1cm = 10mm = 96px/2.54 = 37.8px
  4. 毫米mm
    1mm = 0.1cm = 3.78px
  5. 1/4毫米q
    1q = 1/4mm = 0.945px
  6. 点pt
    1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px
    7.派卡pc
    1pc = 12pt = 1/6in = 1/6*96px = 16px

3. 相对长度单位

3.1 相对字体大小的长度单位

3.1.1 em

em相对于应用在当前元素的字体尺寸。如果用于font-size属性本身,相对于父元素的font-size计算;若用于其他属性,相对于元素本身的font-size计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1</title>
    <style>
        .outer {
            font-size: 20px;
        }
        .div1 {
            /*相对于父元素,大小为40px*/
            font-size: 2em;
            /*相对元素本身,高度为5*40=200px*/
            height: 5em;
            background-color: green;
        }
        .div2 {
            /*相对于父元素,高度为5*20=100px*/
            height: 5em;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
    <div class="div2">div1</div>
</div>
</body>
</html>
3.1-1
3.1-2

3.1.2 rem

rem相对于根元素的字体尺寸。IE8不兼容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.2-1</title>
    <style>
        html {
            /*浏览器默认字体大小16px,所以根元素字体大小2*16=32px*/
            font-size: 2rem;
        }
        .outer {
            /*字体大小3*32=96px*/
            font-size: 3rem;
        }
        .div1 {
            /*字体大小32px*/
            font-size: 1rem;
            /*高度5*32=160px*/
            height: 5rem;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
</div>
</body>
</html>
3.1.2-1

但是根部元素设置成rem或者使用默认大小不方便计算,所以一般将根部元素字体大小设置为100px。为什么不是10px呢,因为chrome下字体大小最小为12px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.2-2</title>
    <style>
        html {
            /*根元素字体大小100px*/
            font-size: 100px;
        }
        .outer {
            /*字体大小0.2*100=20px*/
            font-size: 0.2rem;
        }
        .div1 {
            /*字体大小0.2*100=20px*/
            font-size: 0.2rem;
            /*高度0.5*100=50px*/
            height: 0.5rem;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
</div>
</body>
</html>
3.1.2-2

3.1.3 ex

ex是指所用字体中小写x的高度,不同字体x的高度可能不同。实际上,很多浏览器取em值一半作为ex值。

ex在实际中常用于微调。

3.1.4 ch

ch与ex类似,被定义为数字0的宽度。当无法确定数字0宽度时,取em值的一半作为ch值。

IE8-不支持。

ch在实际中主要用于盲文排版。

3.2 相对视窗宽高的长度单位

视窗相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时,它们都会相应地缩放。然而,当根元素的overflow值为auto时,任何滚动条会假定不存在。

关于视窗相关的单位有vh、vw、vmin、vmax4个单位。

兼容性上,IE8-不支持,IOS7.1-不支持,android4.3-不支持。(对于vmax,所有IE浏览器都不支持)

另外,黑莓错误的将其相对于视觉视窗来计算。而safari奇怪地相对于html元素来计算,如果html中增加了内容,这两个单位也会发生变化。

3.2.1 vh

布局视窗高度的1/100
设置height:100vh;可以达到与屏幕等高的效果。

3.2.2 vw

布局视窗宽度的1/100
设置width:100vw;可以达到与屏幕等宽的效果。

3.2.3 vmin

布局视窗高度和宽度之间的最小值的 1/100
设置height: 100vmin;width: 100vmin;可以达到类似于contain的效果。

3.2.4 vmax

布局视窗高度和宽度之间的最大值的 1/100
设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。

参考

runoob.com css单位
深入理解CSS中的长度单位

相关文章

  • CSS入门13-单位详解

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...

  • CSS单位详解

    浏览器支持情况 CSS单位——相对长度 em: 相对父元素。 rem: 相对于根元素。 ex: 相对于字符“x...

  • css 长度单位 详解

    0. 单位解释 参考: https://www.w3school.com.cn/cssref/css_units....

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • web前端基础案例-鼠标悬停图文切换效果

    效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企...

  • Dagger2入门详解

    Dagger2入门详解 @(Android) Dagger2入门详解 参考文章 环境配置 入门实例 其他注解和情况...

  • 1. CSS常见单位详解

    css种的单位整体可以分成两类: 绝对长度单位(Absolute length units); 相对长度单位(...

  • CSS文章整理

    CSS Module CSS Modules 详解及 React 中实践CSS Modules 用法教程

  • SpringBoot详解(一)-快速入门

    SpringBoot详解系列文章:SpringBoot详解(一)-快速入门SpringBoot详解(二)-Spri...

网友评论

      本文标题:CSS入门13-单位详解

      本文链接:https://www.haomeiwen.com/subject/topbgxtx.html