Que hace la funcion calc en CSS?

Question

Lei las definiciones pero no entiendo exactamente su funcion, estudio un login y el codigo css viene esa funcion pero no entiendo que hace en el codigo, agradeceria si alguien pudiera explicarme

.formulario .password {
    width: calc(100% - 52px);
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

score 4 · Accepted Answer · edited May 16 '19 at 00:51

Las medidas relativas en CSS pueden darnos más de un dolor de cabeza, por ejemplo usar porcentajes y márgenes puede llevar a que no se visualice bien ciertos elementos, por ese motivo existe calc(), una función de CSS3 .

Sintaxis

elemento {
    width: calc(expresión);
}

calc() no solo funciona con width, lo podemos usar en todas las propiedades que requieran de medidas, como height, background-position, line-height, etc.

Ejemplos

div {
  background-color: #FFE066;
  height: 100px;
  margin: 0.5rem 0;
}

.elemento-1 {
  width: calc(20% + 20px); /* El ancho va a ser de 20%, más 20px adicionales */
}

.elemento-2 {
  width: calc(20% - 20px) /* El ancho va a ser de 20%, menos 20px adicionales */
}

.elemento-3 {
  width: calc(20% * 2) /* El ancho va a ser de 40% */
}

.elemento-4 {
  width: calc(20% / 2) /* El ancho va a ser de 10% */
}

<div class="elemento-1"></div>
<div class="elemento-2"></div>
<div class="elemento-3"></div>
<div class="elemento-4"></div>

Como puedes ver en el código, tenemos cuatro elementos con un color de fondo, alto y margen totalmente igual, pero el ancho se comporta de diferente forma (dependiendo de su operador).

Los cálculos en CSS nos dan bastantes opciones en nuestro código y cambia completamente la forma en que usamos las medidas.

Fuente: Calc CSS

Que hace la funcion calc en CSS?

1 Answers1