Uso del método calc()

calc implementa cálculo dinámico en css

环境
根据元素高度的变化,动态控制padding值
<marquee
                        :name="'up' + index"
                        behavior="scroll"
                        scrolldelay="30"
                        direction="up"
                        v-else-if="item.scrollPocition === 3 ? true : false"
                        :style="{
                            '--positionTop': item.X,
                            '--positionLeft': item.Y,
                            '--textHeight': item.FontSizeFrom,
                            '--height': item.H,
                            'letter-spacing': item.LetterSpacing + 'px',
                            'line-height': item.LineHeight,
                            width: item.W + 'px',
                            height: item.H + 'px',
                            left: item.TextLeft + 'px',
                            color: item.sketchBgColor,
                            'text-indent': item.TextIndent + 'px',
                            'font-size': item.FontSizeFrom + 'px',
                            'font-family': item.FontFamily,
                        }"
                        v-bind:class="[item.bold ? 'bold' : '', item.italic ? 'italic' : '', item.underline ? 'underline' : '', , getClass2, getClass1, 'classPosition']"
                    >
                        <p :class="['classAbsolute']">{
   
   { item.textarea1 }}</p>
                    </marquee>

Vincular altura dinámica a través de --height

.text_bottom {
    // background: blue;
    padding-top: calc((var(--height) * 1px - var(--textHeight) * 1px))  ;
    // padding-top: calc( var(--height) * 1px );
    // padding-top: calc(#{var(—height)} * 1px);
    box-sizing: border-box;
}

uso

• Al declarar una variable css, agregue dos guiones (--) delante del nombre de la variable
   

• La función var() se usa para leer variables.
  La función var() también puede usar un segundo parámetro, que representa el valor predeterminado de la variable. Si la variable no existe, se utilizará este valor predeterminado.
  El segundo parámetro no maneja comas o espacios internos, como parte del parámetro.

1. Variables globales/locales

 La pseudo-clase :root se puede considerar como un alcance global.Las variables declaradas en ella se pueden obtener mediante todos los selectores debajo de ella.

    :root { --color: blue; }
    .box{color: var(--color)}

 

 

2. Variables locales

    .box{
        --color: red;
        color: var(--color);
    }

 3. El valor predeterminado del segundo parámetro de la función var()

    .box{
        --color: red;
        color: var(--bg,pink);
    }

 4. Calcula junto con CSS3 calc()

p{
  --size: 20;   
  font-size: calc(var(--size) * 1px);//20px
}

 

  Herencia de variables CSS (principio de proximidad)

<div class="box" id="alert">张三</div>

    :root { --color: blue; }
    div { --color: green; }
    #alert { --color: red; }
    * { color: var(--color); }

Aviso

Cuando hay múltiples variables con el mismo nombre, las reglas de cobertura de variables están determinadas por el peso del selector CSS, pero no se usa !important.

El valor de la cantidad adopta el principio de proximidad.

Si el valor de la variable es un valor numérico, no se puede utilizar directamente con una unidad numérica. Deben ser concatenados usando la función calc().

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}
.foo {
  --gap: 20;
  /* 有效 */
  margin-top: calc(var(--gap) * 1px);
}

 Si el valor de la variable tiene una unidad, no se puede escribir como una cadena.

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}
 
/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

Los nombres de propiedades CSS no pueden usar variables. Por ejemplo, la siguiente escritura es incorrecta:

body {
    --bc: background-color;    
    var(--bc): #369;
}

Hay un valor predeterminado para las variables css, siempre que la definición sea correcta, si el valor interno es incorrecto, el resultado se mostrará con el valor predeterminado

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);/*背景色为：transparent*/
}

 las variables css tienen espacios al final por defecto

p{
  --size: 20;   
  font-size: var(--size)px;//等同于font-size:20 px;这里将使用元素默认的大小。这里可以结合上面例子calc()使用。
}

 

var se puede reemplazar por v-bind, y v-bind puede completar la función de var

Dirección del artículo original: css define variables (definición: --aa; uso: var(--aa), calc() para calcular funciones de estilo_blog de muzidigbig-CSDN blog_css中.aa