Home > Article > Web Front-end > Detailed introduction to CSS3 calc() calculated properties

Detailed introduction to CSS3 calc() calculated properties

小云云Original: 2018-03-01 09:20:443905browse

As its name suggests, calc is a new calculated attribute in CSS3, which adds an expression to many attributes;

calc is the abbreviation of the English word calculate (calculation) and is a new addition to CSS3. With the added function, you can use calc() to set dynamic values for the border, margin, padding, font-size, width, and height attributes of the element.

How to use

calc() can use simple addition (+), subtraction (-), multiplication (*) and division (/) in mathematical operations to Solve problems and convert calculations based on units such as px, em, rem and percentage.
Standard writing:

  .class{
       /*
         area: expression;
       */
       width:calc();
       padding:calc();
       margin-top:calc();
       ...
   }

Compatibility

##Basic theory

calc can be used for anything with size, such as border, margin, padding, font-size, width and other properties to set dynamic values
Supported operation units: rem, em, percentage, px
The calculation priority is consistent with mathematics

Notes:

calc Internal expressions, when using arithmetic symbols, spaces must be added twice (although multiplication and division can be ignored, it is still recommended to include them)! ! ! ! ! , otherwise a parsing error will occur! ! , look at the demo writing

    width:calc(10 * 10px);
    width:calc(50% - 50px);
    width:calc(50% + 5em);
    width:calc(10% / 1rem);

small demo

is just for demonstration, response scaling

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 Calc</title>
    <style type="text/css" media="screen">
        html{
            font-size:62.5%;
        }
        .wrapper{
            width:100%;
            border:5px solid #f00;
            margin:10px ;
            box-sizing:border-box;
            height:200px;
            clear:b;
        }
        .items{
            height:calc(100% - 40px);
            display:inline-block;
            border:1px solid #f70;
            text-align:center;
        }

        .w1 .items{

            float:left;
            margin-top:calc( 5 * 4px  );
            border:3px solid #0F16C6;
            width:calc(100% / 3 - 6px)
        }

        .w2 .items{
            float:left;
            margin-top:calc(200px - 20px * 9);
            width:calc(100% / 3 - 2px)
        }

        .w3 .items{
            float:left;
            width:calc(100% / 3 - (3 * 6px));
            margin:calc(2px * 4 );
        }

        .w3 .items:first-child{
            padding:calc(5 * 1rem - 3rem);
            box-sizing:border-box;
        }

    </style>
</head>

<body>
    <p class="wrapper w1">
        <p class="items">margin-top:calc( 5 * 4px  );</p>
        <p class="items">margin-top:calc( 5 * 4px  );</p>
        <p class="items">margin-top:calc( 5 * 4px  );</p>
    </p>
    <p class="wrapper w2">
        <p class="items">margin-top:calc(200px - 20px * 9);</p>
        <p class="items">margin-top:calc(200px - 20px * 9);</p>
        <p class="items">margin-top:calc(200px - 20px * 9);</p>
    </p>
    <p class="wrapper w3">
        <p class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</p>
        <p class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</p>
        <p class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</p>
    </p>
</body>
</html>

Summary

calac is paired with flexbox, which is very good for writing fluid layout;

Related recommendations:

Detailed explanation of the usage of calc() in CSS3

##Calc() in CSS3 is a responsive mode layout method Introduction

Instructions on using the calc() attribute in CSS3 to express size values in calculations

The above is the detailed content of Detailed introduction to CSS3 calc() calculated properties. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of css modifying the default style of drop-down list selectNext article：Example of css modifying the default style of drop-down list select

See more

Detailed introduction to CSS3 calc() calculated properties

Related articles