calc()

/* property: calc(expression) */
width: calc(100% - 80px);

calc() , . , .

+

.

-

.

*

. <number> .

/

. <number> .

<length> , . .

• 0 HTML .
• + - . calc(50% -8px) , calc(50% - 8px) . , calc(8px + -50%) .
• * / , .
• , , / , auto .
• calc() calc() .

<calc()> = 
  calc( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

calc() . 40 .

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner"> !</div>

calc() .

CSS .

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

, 1/6 . , 1em calc() . HTML CSS .

<form>
  <div id="form-box">
    <label>  .</label>
    <input type="text" />
  </div>
</form>

CSS calc()

CSS calc() . .

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

widthC calc( calc( 100px / 2) / 2) . .foo , calc() width calc( ( 100px / 2) / 2), 25px . calc() calc() .

calc() .

h1 {
  font-size: calc(1.5rem + 3vw);
}

.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

• Firefox 4: CSS3 calc() Mozilla Hacks the Web developer blog