An example of the calculation function calc in CSS in website layout

calc is a function in CSS that is used to calculate numerical values. It can calculate length, angle, time, etc. Supports + , - , * , / and parentheses. One thing to note when using it is that there needs to be a space before and after the plus sign and minus sign . calc greatly increases the flexibility of CSS. Provides convenience for some special layouts.

The effect of the example display

An example using the cacl layout

I want to create an effect where the background of #div1 extends to the visible area of #div2 , and displays a fixed 60 pixels in #div2 . That is, the black frame width is 60px. Regardless of the width of #div1 .

CSS Code

#div1 {
    width: 100%;
    min-width: 400px;
    outline: blue;
}
#div2 {
    width: 300px;
    margin: 0 auto;
    outline: 1px solid #ccc;
    color: white;
}

HTML code

<div id="div1" class="cw">
    <div id="div2">
        test
    </div>
</div>

Solution

.cw {
    background:blue linear-gradient(
    to right, red calc(50% - 150px + 60px ) ,
    transparent calc(50% - 150px + 60px )
    );
}

cacl compatibility

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.