Skip to content

[css] 第106天 CSS中的calc()有什么作用? #1006

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第106天 CSS中的calc()有什么作用?

Activity

EmiyaYang

EmiyaYang commented on Jul 30, 2019

@EmiyaYang

calc使得开发者能够使用四则运算表达式来填写CSS属性。

px、%、em等不同单位的数值均可参与计算,浏览器会进行自动转换。

MDN

HuoXiaoYe

HuoXiaoYe commented on Jul 31, 2019

@HuoXiaoYe

坑: 当使用calc的时候,运算符号 左右需要有空格的哦,否则,属性不生效。例如: width: calc(100% - 30px);

haizhilin2013

haizhilin2013 commented on Jul 31, 2019

@haizhilin2013
CollaboratorAuthor

@HuoXiaoYe 很棒,细节关注得很到位哦!

nowherebutup

nowherebutup commented on Jul 31, 2019

@nowherebutup

用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算,
不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效

tiyunchen

tiyunchen commented on Jul 31, 2019

@tiyunchen

在less使用中某些情况是无效的height: calc('100% - 36px');
必须要这样才有效 height: calc(~'100% - 36px');

qq1255198035

qq1255198035 commented on Jul 31, 2019

@qq1255198035

在less使用中某些情况是无效的height: calc('100% - 36px');
必须要这样才有效 height: calc(~'100% - 36px');

还需要加单引号吗?

Chaya-cai

Chaya-cai commented on Jul 31, 2019

@Chaya-cai

可以很灵活的计算盒子的长宽,支持加减乘除,单位支持百分比、px、em、rem等,加减运算符左右必须有空格,乘除可以没有,但是一般建议保留空格

git710

git710 commented on Jul 31, 2019

@git710

水平垂直居中

<div class="d0">
    <div class=d1""></div>
</div>
.d0{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
.d1{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
}
EragonBubble

EragonBubble commented on Jul 31, 2019

@EragonBubble

用于动态计算css长度,在响应式布局中有用到

qp97vi

qp97vi commented on Aug 8, 2019

@qp97vi

动态计算css长度单位,计算的时候需要在运算符合前有左右空格 IE9才开始支持

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@EragonBubble@EmiyaYang@tiyunchen@Chaya-cai

        Issue actions

          [css] 第106天 CSS中的calc()有什么作用? · Issue #1006 · haizlin/fe-interview