css-calc

问题 The title says it all. I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic. Is it the same as the biggest number in JavaScript? When I try this with transform the limit seems to be 1e39 (in Chrome and for transform: translateX() ) div span { display: block; width: 100px; height: 100px; background-color: gold; } div:nth-child(1) span { -webkit-transform: translatex(calc(1e38px * 1e-37)); transform: translatex(calc(1e38px * 1e-37)); } div:nth-child(2) span {

问题 The title says it all. I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic. Is it the same as the biggest number in JavaScript? When I try this with transform the limit seems to be 1e39 (in Chrome and for transform: translateX() ) div span { display: block; width: 100px; height: 100px; background-color: gold; } div:nth-child(1) span { -webkit-transform: translatex(calc(1e38px * 1e-37)); transform: translatex(calc(1e38px * 1e-37)); } div:nth-child(2) span {

问题 I want to have a basic HSL color value which I want to implement as a gradient as follows: :root { --hue: 201; --saturation: 31; --lightness: 40; --mainColor: hsl(var(--hue),var(--saturation),var(--lightness)); --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */ --lightnessPlus: calc(var(--lightness) + var(--difference)); --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus)); --lightnessMinus: calc(var(--lightness) - var(--difference)); --colorTo: hsl(var

问题 I want to have a basic HSL color value which I want to implement as a gradient as follows: :root { --hue: 201; --saturation: 31; --lightness: 40; --mainColor: hsl(var(--hue),var(--saturation),var(--lightness)); --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */ --lightnessPlus: calc(var(--lightness) + var(--difference)); --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus)); --lightnessMinus: calc(var(--lightness) - var(--difference)); --colorTo: hsl(var

问题 I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px) . I've tried several variations of this: top: max(0, 120vh - 271px); top: max(0, (120vh - 271px)); top: max(0, calc(120vh - 271px)); Is there something wrong with my syntax? I keep getting Chrome telling me that this is an invalid property error. In practice, I'm actually using CSS variables for the numbers. so 120vh is actually

来源： https://stackoverflow.com/questions/20490704/combine-calc-with-attr-in-css

来源： https://stackoverflow.com/questions/20490704/combine-calc-with-attr-in-css

问题 While specifying a percentage value in css calc , how does calc know whether I am referring to width or height ? .container { width: calc(100% - 2vw); // 100% here is width or height ? } One may assume that it is either width or height depending on the property you are accessing, (width in this case). If that were the case, what happens if you would like to do some calculation based on a different property? For instance, set the width based on some calculation of height? Say, set the

问题 Why this one calc(100vw/4) works but neither of the following do? calc(100vw/4-(10-4)) calc(100vw/4-(10px-4)) calc(100vw/4-(10px-4px)) calc(100vw/4-calc(10px-4px)) How do I manage the the expression calc(100vw/x-(10px-x)) where x gets replaced in a SASS loop to work? 回答1: You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses. From the documentation: Note : The + and

问题 Why this one calc(100vw/4) works but neither of the following do? calc(100vw/4-(10-4)) calc(100vw/4-(10px-4)) calc(100vw/4-(10px-4px)) calc(100vw/4-calc(10px-4px)) How do I manage the the expression calc(100vw/x-(10px-x)) where x gets replaced in a SASS loop to work? 回答1: You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses. From the documentation: Note : The + and