A CSS matematikai függvényei lehetővé teszik matematikai kifejezések létrehozását ingatlanértékként használják. Itt elmagyarázzuk a calc(), max() és min() függvények.
calc() függvényA calc() függvény számítást hajt végre, amelyet tulajdonságértékként kell használni.
calc(expression)Kívánt. Egy matematikai kifejezés. Az eredmény az érték lesz.
A következő operátorok használhatók: + - * /
Nézzünk egy példát:
A calc() segítségével számítsa ki a <div> elem szélességét:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
} Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
</body>
</html>
max() függvényA max() függvény a legnagyobb értéket használja, vesszővel elválasztott értéklistából, mint tulajdonság értéke.
max(value1, value2, ...)Kívánt. A vesszővel elválasztott értékek listája - ahol a legnagyobb érték van választott
Nézzünk egy példát:
A max() segítségével állítsa be a #div1 szélességét a legnagyobb értékre, 50%-ra vagy 300 képpont:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
} Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
min() függvényA min() függvény a legkisebb értéket használja, vesszővel elválasztott értéklistából, mint tulajdonság értéke.
min(value1, value2, ...)Kívánt. A vesszővel elválasztott értékek listája - ahol a legkisebb érték választott
Nézzünk egy példát:
A min() segítségével állítsa be a #div1 szélességét a legkisebb értékre, 50%-ra vagy 300 képpont:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
} Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Lehetővé teszi számítások elvégzését a CSS-tulajdonságok értékeinek meghatározásához
A vesszővel elválasztott értéklistából a legnagyobb értéket használja, mint a ingatlan érték
A vesszővel elválasztott értéklistából a legkisebb értéket használja, mint a ingatlan érték