精华内容
下载资源
问答
  • CSS 单位 绝对单位 相对单位

    千次阅读 2018-08-05 22:21:48
    我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳的质量等于33个地球,这个就是相对单位。在CSS中,单位也可以分为这两类。  在第一个box里,整个宽度为600px,宽度为300px的和...

     我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳的质量等于33个地球,这个就是相对单位。在CSS中,单位也可以分为这两类。

     在第一个box里,整个宽度为600px,宽度为300px的和宽度为50%为等长。

    在第二个box里,300px的小框跟上面的框的300px一样长,而第二个框里面的50%跟第一个框的50%为不一样,这个就很好的解释了相对单位和绝对单位。

    px

    px 是 pixels(像素)的缩写,是一种绝对单位,用于屏幕显示器上,传统上一个像素对应于计算机屏幕上的一个点,而对于高清屏则对应更多。任何现代显示屏,不管是手机,平板,笔记本还是电视都是由成千上万的像素组成的,所以我们可以使用这些像素来定义长度。

    另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。 一个“600x400”解析度的照片的长宽分别为“600px”以及“400px”,所以照片本身的像素并不会与显示装置像素(可能非常小)一致,而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。

    %

    %(百分比)应该是我们最好理解的单位了,这里就不多解释了,主要有一点需要注意:

    • 如果对 html 元素设置 font-size 为百分比值,则是以浏览器默认的字体大小16px为参照计算的(所有浏览器的默认字体大小都为 16px),如62.5%即等于10px(62.5% * 16px = 10px)。

    em

    em 也是一种相对单位,既然是相对单位,那么肯定有一个参照值。不过其参照值并不是固定不变的,而是不同的属性有不同的参照值。

    font-size

    对于字体大小属性(font-size)来说,em 的计算方式是相对于父元素的字体大小,1em 等于父元素设置的字体大小。如果父元素没有设置字体大小,则继续往父级元素查找,直到有设置大小的,如果都没有设置大小,则使用浏览器默认的字体大小。

    下面我们举几个简单的例子说明下:

    .parent {
     font-size: 14px;
    }
    .child1 {
     font-size: 1em; /* 1em = 1*14px*/
    }
    .child2 {
     font-size: 1.5em; /* 1.5em = 1.5*14px */
    }
    /* 父级元素都没有设置大小的 */
    .no-parent-font-size {
     font-size: 0.8em; /* 0.8em = 0.8*16px */
    }

    其他属性(border, width, height, padding, margin, line-height)

    在这些属性中,使用em单位的计算方式是参照该元素的 font-size,1em 等于该元素设置的字体大小。同理如果该元素没有设置,则一直向父级元素查找,直到找到,如果都没有设置大小,则使用浏览器默认的字体大小。

    下面我们举几个简单的例子说明下:

    p {
     font-size: 14px;
     width: 20em; /* 20em = 20*14px */
     padding: 1.5em; /* 1.5em = 1.5*14px */
    }
    /* 元素本身没有设置字体大小且父级元素也没有设置 */
    .no-font-size {
     width: 40em; /* 40em = 40*16px */
     margin-bottom: 2em; /* 2em = 2*16px */
    }

    总之em的计算单位相对来说比较复杂,现在已经不建议使用,如果你要兼容的浏览器是现代浏览器的话,那么可以使用下面要介绍的 rem 单位。

    rem

    和 em 一样,rem 也是一种相对单位,不过不一样的是 rem 是相对于根元素 html 的 font-size 来计算的,所以其参照物是固定的。(rem的r就是表示root,虽然rem相对em进步了很多,但是由于是新技术,不支持IE8以下(包括IE8),不过幸喜的是移动端可以放心使用)

    由于 rem 是基于跟元素 html 的 font-size 来计算的,所以如果改变 html 的 font-size 值,那么所有使用的 rem 单位的大小都会随着改变,这对于移动端适应各种屏幕大小来说还是有点作用的。

    html {
     font-size: 625%; /* 相当于100px = 625% * 16px */
    }
    div {
     font-size: 20px; 
     width: 2rem; /* 2rem = 2 * 100px(根元素的font-size) */
     height: 4rem; /* 4rem = 4 * 100px(根元素的font-size) */
     padding: 0.1rem; /* 0.1rem = 0.1 * 100px(根元素的font-size) */
    }
    

    如果我们改变了 html 的 font-size 值,如设置为 80px,则相应的我们的 div 的 width,height 和padding 大小也随着改变了。

    相对于 em 来说,rem 只需要修改 html 的 font-size 值即可达到全部的修改,即所谓的牵一发而动全身。

    vw, vh, vmin, vmax

    最后要介绍的这四个单位属于 v 系单位,它们也是相对单位,是基于视窗大小(浏览器用来显示内容的区域大小)来计算的。

    网页中我们很多时候都需要用到满屏,或者屏幕大小的一半等,尤其是移动端,屏幕大小各式各样,而这个时候我们现有的单位就显得有点捉襟见肘,于是就诞生了这四个单位。

    • vw:基于视窗的宽度计算,1vw 等于视窗宽度的百分之一
    • vh:基于视窗的高度计算,1vh 等于视窗高度的百分之一
    • vmin:基于vw和vh中的最小值来计算,1vmin 等于最小值的百分之一
    • vmax:基于vw和vh中的最大值来计算,1vmax 等于最大值的百分之一

    下面我们实例说明实现一个宽度为视窗宽度的 25%,高度为视窗高度 50% 的一个盒子:

    .box {
     height: 50vh; /* 视窗高度的50% */
     width: 25vw; /* 视窗宽度的25% */
     background: red;
    }
    

    同样由于是新技术,还是有些浏览器不兼容,哪怕在移动端安卓4.3 以下也是不兼容,不过长远来说这也是必备的。

    单位运算

    除了设置以上的单位之外,我们还可以使用 calc 来进行单位运算,单位运算时可以使用各种单位进行加减乘除运算。

    简单示例如下:

    .box {
     height: calc(50vh - 20px); /* 50% 的视窗高度减掉20px */
     width: calc(100% / 3);  /* 三分之一的父容器宽度 */
     background: red;
    }
    

     

    注:chrome 浏览器最小的字体为 12px,如果设置 10px 也会渲染成 12px 。

    展开全文
  • css长度单位分为 相对长度 和 绝对长度 1.相对长度 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设配相对长度更加适用。 单位 描述 em 它是描述相对于应用在当前元素的字体尺寸,所以...

    css长度单位分为 相对长度 和 绝对长度

    1.相对长度

    相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设配相对长度更加适用。

    单位 描述
    em 它是描述相对于应用在当前元素的字体尺寸,所以它是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px
    ex 依赖于英文字母小x的高度
    ch 数字0的宽度
    rem rem是根(root em)的缩写,相对于根元素字体大小(相对的只是HTML根元素);
    vw viewpoint width,视窗宽度,1vw = 视窗宽度的1%
    vh viewpoint height,视窗高度,1vh = 视窗高度的1%
    vmin vw和vh中较小的一个
    vmax vw和vh中较大的一个

     

    2.绝对长度

    绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)

    单位 描述
    cm 厘米
    mm 毫米
    in 英寸(1in= 96px = 2.54cm)
    px 像素
    pt point (1pt = 1/72in)
    pc pica 大约12pt(1pc = 12pt)

     

    展开全文
  • 学习CSS:完整指南 无论您是刚刚开始使用基础知识还是想探索更高级CSS,我们都已构建了完整的指南来帮助您学习 CSSCSS新技术 使用我们熟知CSS技术很容易陷入困境,但是这样做会在出现新问题时使我们处于不利...

    css绝对单位和相对单位。

    学习CSS:完整指南

    无论您是刚刚开始使用基础知识还是想探索更高级CSS,我们都已构建了完整的指南来帮助您学习 CSS。

    CSS新技术

    使用我们熟知CSS技术很容易陷入困境,但是这样做会在出现新问题时使我们处于不利地位。

    随着网络的不断发展,对新解决方案的需求也将继续增长。 因此,作为Web设计师和前端开发人员,我们别无选择,只有了解我们的工具集并充分了解它。

    这意味着甚至要知道专用工具-那些不经常使用的工具,但是在需要时才是适合该工作的正确工具。

    今天,我将向您介绍一些您以前可能不了解CSS工具。 这些工具都是度量单位,例如像素或em,但是您可能从未听说过它们! 让我们潜入。

    雷姆

    我们将从与您可能已经熟悉的事物相似的事物开始。 em单位定义为当前font-size 因此,例如,如果您在body元素上设置了字体大小,则主体中任何子元素的em值都将等于该字体大小。

    <body>
        <div class="test">Test</div>
    </body>
    body {
        font-size: 14px;
    }
    div {
        font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
    }

    在这里,我们说过div的font-size1.2em 这是它继承的字体大小的1.2倍,在本例中为14px。 结果是16.8px

    但是,当您在彼此内部级联em定义的字体大小时会发生什么? 在以下代码段中,我们应用与上述完全相同CSS。 每个div都从其父级继承其字体大小,从而使我们逐渐增加字体大小。

    <body>
        <div>
            Test <!-- 14 * 1.2 = 16.8px -->
            <div>
                Test <!-- 16.8 * 1.2 = 20.16px -->
                <div>
                    Test <!-- 20.16 * 1.2 = 24.192px -->
                </div>
            </div>
        </div>
    </body>

    尽管在某些情况下可能需要这样做,但通常您可能只希望依靠单个指标进行扩展。 在这种情况下,您应该使用rem rem的“ r”代表“ root”; 这等于在根元素处设置的字体大小; 在大多数情况下是html元素。

    html {
        font-size: 14px;
    }
    div {
        font-size: 1.2rem;
    }

    在上一个示例的所有三个嵌套div中,字体的评估结果为16.8px

    对网格有利

    Rems不仅对字体大小有用。 例如,您可以使用rem在根HTML字体大小上建立整个网格系统或UI样式库,并在特定位置使用em缩放。 这将为您提供更可预测的字体大小和缩放比例。

    .container {
        width: 70rem; // 70 * 14px = 980px
    }

    从概念上讲,此类策略的思想是允许您的界面随内容的大小扩展。 但是,它不一定在每种情况下都最有意义。

    我可以使用吗?

    功能: caniuse.com上的rem(root em)单位

    大众和大众

    响应式网页设计技术严重依赖百分比规则。 但是,CSS百分比并不总是解决每个问题的最佳解决方案。 CSS宽度是相对于最近的包含父元素的宽度。 如果要使用视口的宽度或高度而不是父元素的宽度怎么办? 这正是vhvw单元提供的。

    vh元素等于视口高度的1/100。 例如,如果浏览器的高度为900px ,则1vh值为9px。 同样,如果视口宽度为750px ,则1vw值为7.5px

    这些规则似乎有无穷的用途。 例如,使用单行CSS即可完成全高或接近全高幻灯片的非常简单的方法:

    .slide {
        height: 100vh;
    }

    想象一下,您想要一个设置为填充屏幕宽度的标题。 为此,您可以在vw设置字体大小。 该大小将随浏览器的宽度缩放。

    我可以使用吗?

    功能:视口单位: caniuse.com上的vw,vh

    vmin和vmax

    尽管vhvm始终始终分别与视口的高度和宽度有关,但vminvmax与这些宽度和高度的最大值最小值有关,这取决于大小。 例如,如果将浏览器设置为1100px宽,700px高,则1vmin将为7px, 1vmax将为11px。 但是,如果将宽度设置为800px,将高度设置为1080px,则vmin将等于8px,而vmax将被设置为10.8px

    那么,什么时候可以使用这些值?

    假设您需要一个始终在屏幕上可见的元素。 使用高度和宽度设置为低于100的vmin值将启用此功能。 例如,可以定义始终始终至少接触屏幕两侧的正方形元素:

    .box {
        height: 100vmin;
        width: 100vmin;
    }

    如果需要一个始终覆盖可见视口的方形框(始终触摸屏幕的所有四个侧面),请使用相同的规则,但vmax除外。

    .box {
        height: 100vmax;
        width: 100vmax;
    }

    这些规则的组合提供了一种非常灵活的方式,以新​​颖有趣的方式利用视口的大小。

    我可以使用吗?

    功能:视口单位: caniuse.com上的vmin,vmax

    前和ch

    emrem相似,单位exch取决于当前字体和字体大小。 但是,与emrem不同,这些单元还依赖于font-family ,因为它们是基于特定于字体的度量确定的。

    ch单位或字符单位被定义为零字符0的宽度的“高级度量”。 关于这意味着什么的一些非常有趣的讨论可以在Eric Meyers的博客上找到 ,但是基本概念是,给定一个等宽字体,一个具有N字符单位的宽度的框,例如width: 40ch; ,始终可以包含具有该特定字体的40个字符的字符串。 尽管此特定规则的常规用法与布局盲文有关,但此处的创造力肯定超出了这些简单的应用范围。

    ex单位定义为“当前字体的x高度或一em二分之一”。 给定字体的x-height是该字体的小写x的高度。 通常,这大约是字体的中间标记。

    这种单元有许多用途,其中大部分用于印刷微调整。 例如,代表上标的 sup元素可以使用相对位置和最低值1ex在行中向上推。 同样,您可以拉下标元素。 这些浏览器的默认设置使用特定于上标和下标的vertical-align规则,但是如果您想要更精细的控制,则可以像下面这样更明确地处理类型:

    sup {
        position: relative;
        bottom: 1ex;
    }
    sub {
        position: relative;
        bottom: -1ex;
    }

    我可以使用吗?

    自CSS1起ex单元就存在了 ,尽管您不会找到对ch单元的如此坚实的支持。 有关支持的详细信息,请在quirksmode.org上查看CSS单位和值

    结论

    密切关注CSS的持续开发和扩展非常重要,这样您才能知道工具集中的所有工具。 也许您会遇到一个特殊的问题,需要使用这些更晦涩的测量单位之一进行意外解决。 花时间阅读新的规范 cssweekly等强大资源中注册新闻更新。 并且不要忘记, 现在注册,以获取每周更新,课程,免费教程和类似的内容,来自Tuts +上的Web Design!

    更多CSS单位优势。

    翻译自: https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573

    css绝对单位和相对单位。

    展开全文
  • css单位

    2011-03-02 11:08:57
    CSS相对长度单位(relative length unit) ...以下CSS相对长度单位列表: CSS相对长度单位 说明 em 元素的字体高度The height of the element's font ex 字母x的高度The height of the...
    CSS相对长度单位(relative length unit)

    CSS相对长度单位中的相对二字,表明了其长度单位会随着它的参考值的变化而变化,不是固定的。

    以下是CSS相对长度单位列表:

    CSS相对长度单位
    说明

    em 元素的字体高度The height of the element's font

    ex 字母x的高度The height of the letter "x"

    px 像素Pixels

    % 百分比Percentage


    CSS绝对长度单位(absolute length unit)

    绝对长度单位是一个固定的值。比如我们常用的有mm,就是毫米的意思。

    以下是CSS绝对长度单位列表:

    CSS绝对长度单位
    说明

    in 英寸Inches (1 英寸 = 2.54 厘米)

    cm 厘米Centimeters

    mm 毫米Millimeters

    pt 点Points (1点 = 1/72英寸)

    pc 皮卡Picas (1 皮卡 = 12 点)

    像素是相对于显示器屏幕分辨率而言的。譬如,WiNDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

    所以在WiNDOWS的CSS中 dpi为 96像素/英寸
    展开全文
  • 关于CSS单位

    2017-05-19 00:04:55
    初学CSS,相信大家都会用px作为单位使用,其实CSS还有很多单位,可以分为两类:绝对单位和相对单位。绝对单位一般用于传统平面印刷,很少用于前端开发,这里我们只讨论相对单位。相对单位主要有以下这些: - px:...
  • CSS单位

    2009-07-04 00:51:00
    1.单位长度一个长度的值由可选的正号" + "或负号" - "、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的,例如,1.3 em就不是一个有效的长度的值,但1.3em就是...以下是有效的相对单位
  • CSS 单位

    2006-12-11 14:28:00
    CSS 单位--------------------------------------------------------------------------------长度单位一个长度的值由可选的正号" + "或负号" - "、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中...
  • css单位你知道多少?

    2021-02-18 09:31:24
    css单位一、绝对单位:px in cm mm1、px2、in3、cm4、mm二、相对单位:em rem pt pc ex ch1、em2、rem3、pt4、pc5、ex6、ch百分比单位:vw vh vm %1、%2、vh/vm/vmin/vmax 一、绝对单位:px in cm mm 1、px 即像素...
  • CSS单位解释.

    2018-06-24 22:11:00
    长度单位主要有以下几种emexchremvwvhvmcmmminptpcpx %,大概可以分为几种“绝对单位”和“相对单位”和“百分比单位”。 绝对单位:px in cm mm 相对单位:em rem pt pc ex ch 百分比单位:vw vh vm % 下面主要...
  • 1. 长度单位 1.1 相对长度 单位 1.1.1 字体的 相对长度 ⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数 ⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数 ⑶ ex : x 的高度 (随 font-...
  • CSS的长度单位

    2018-08-02 14:48:27
    CSS的长度单位。...长度单位包括包括:相对单位和绝对单位。 相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin 绝对长度单位包括有: cm, mm, q, in, pt, pc, px 1、vh、vw 有点像width和height...
  • 层叠,继承和CSS单位

    2017-02-18 19:14:23
    层叠 继承 CSS求值过程 CSS单位
  • css中的单位

    2019-06-09 21:20:36
    绝对单位: px、in、cm、mm、pt、pc 百分比单位: vw、vh、vmin、vmax、% 相对单位: em、rem、ex、ch 各单位介绍 px 不用过多介绍, 精确像素 in 寸 cm 厘米 mm 毫米 pt 大约1/72寸 pc 大约1/6寸 vw 以窗口宽度为参照....
  • css中有许多的单位,就比如px—...css常用的单位:1、px:绝对单位,页面按精确像素展示2、em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不...
  • CSS定位之绝对定位

    千次阅读 2014-05-08 13:42:10
    除了常规流和浮动,css的第三种布局就是绝对定位。
  • CSS 长度单位详细总结

    千次阅读 2019-11-01 16:40:01
    一、CSS中的长度单位: 在CSS中以不少值是以长度作为值的,盒子模型的属性就是一些明显的值属性:width、height、margin、padding、border。除此之外还有很多的css属性的值同样也是长度值,像偏移量offset、box-...
  • CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等 ...CSS相对长度单位(relative ...以下CSS相对长度单位列表: CSS相对长度单位 说明 em ...
  • css的像素单位

    2021-03-25 21:54:53
    绝对(absolute)单位 px px单位名称为像素,像素(px)是相对于显示器屏幕分辨率而言的,而这种像素长度和你在显示器上看到的文字屏幕像素无关。 而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。 px实际...
  • 前端开发【CSS字体大小单位

    千次阅读 2017-03-15 21:59:04
    1.px:绝对单位,页面按精确像素展示(日常使用最多) 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值,默认1em=16px。...
  • CSS长度单位参考

    2008-01-30 10:03:00
    CSS样式表中,我们经常会看到pt, px,emarw("|Jo", ark7);...在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等也谈px和pt的区别resolution)。不管是用pt还是用px设
  • CSS3 相对单位rem

    2017-04-20 11:00:14
    CSS3 新增了一个相对单位rem(root em,根em)。...这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁...em单位是相对于父节点
  • css 长度单位参考

    2009-06-11 11:57:00
    CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等 也谈px和pt的区别 经常看到有人拿px和pt比较,主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时,用什么...
  • css中相对长度单位Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself. 衡量事物与Web设计一样...
  • px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”...
  • 绝对单位 相对单位 相对单位 绝对单位 独来独往,棱角分明,一就是一,二就是二,1px就是显示器上的1像素 听从父元素的,没有半点主张 听html的,下面所有的元素都听html的 1rpx就是显示器上的0.5px px单位的...
  • CSS中,尺寸单位分为两类:相对长度单位绝对长度单位。相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位。字体相对单位有:em、ex、ch、rem;视窗相对单位有:vw、vh、vmin、vmax几种。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,453
精华内容 6,581
关键字:

以下css单位是绝对单位的是