CSS ﯽﺿﺎﯾﺭ ﻊﺑﺍﻮﺗ

فهرست مطالب

ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﯽﺿﺎﯾﺭ ﺕﺍﺭﺎﺒﻋ ﻪﺑ CSS ﯽﺿﺎﯾﺭ ﻊﺑﺍﻮﺗ

`calc()` ﻊﺑﺎﺗ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ﻥﺍﻮﻨﻋ ﻪﺑ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻡﺎﺠﻧﺍ ﺍﺭ ﻪﺒﺳﺎﺤﻣ ﮏﯾ CSS ﻮﺤﻧ

calc(expression)

expression: / * - + :ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺍﻮﺗ ﯽﻣ ﺮﯾﺯ ﯼﺎﻫﺮﮕﻠﻤﻋ ﺯﺍ .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﻥﺍﻮﻨﻋ ﻪﺑ

:ﻢﯿﻨﮐ ﻩﺎﮕﻧ ﻝﺎﺜﻣ ﮏﯾ ﻪﺑ ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ

`ﻝﺎﺜﻣ`

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ <div> ﺮﺼﻨﻋ ﺽﺮﻋ ﻪﺒﺳﺎﺤﻣ ﯼﺍﺮﺑ()calc ﺯﺍ

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
    border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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() ﻊﺑﺎﺗ`

،ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﻦﯾﺮﺘﮔﺭﺰﺑ ﺯﺍ max() ﻊﺑﺎﺗ

`CSS ﻮﺤﻧ`

 max(value1, value2, ...)

value1, value2, ...: ﺖﺳﺍ ﺭﺍﺪﻘﻣ ﻦﯾﺮﺘﮔﺭﺰﺑ ﻪﮐ ﯽﯾﺎﺟ - ﺎﻣﺎﮐ ﺎﺑ ﻩﺪﺷ ﺍﺪﺟ ﺮﯾﺩﺎﻘﻣ ﺯﺍ ﯽﺘﺳﺮﻬﻓ .ﯼﺭﻭﺮﺿ

:ﻢﯿﻨﮐ ﻩﺎﮕﻧ ﻝﺎﺜﻣ ﮏﯾ ﻪﺑ ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ

`ﻝﺎﺜﻣ`

ﺎﯾ ٪50 ،ﺖﺳﺍ ﻦﯾﺮﺘﮔﺭﺰﺑ ﻪﮐ ﯼﺭﺍﺪﻘﻣ ﺮﻫ ﻪﺑ div1# ﺽﺮﻋ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ()max ﺯﺍ

#div1 {
  background-color: yellow;
  height: 100px;
  
  width: max(50%, 300px);
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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() ﻊﺑﺎﺗ`

.ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺍﺪﻘﻣ ﻦﯾﺮﺘﮑﭼﻮﮐ ﺯﺍ min() ﻊﺑﺎﺗ

`CSS ﻮﺤﻧ`

 min(value1, value2, ...)

value1, value2, ...: ﺖﺳﺍ ﺭﺍﺪﻘﻣ ﻦﯾﺮﺘﮑﭼﻮﮐ ﻥﺁ ﺭﺩ ﻪﮐ - ﺎﻣﺎﮐ ﺎﺑ ﻩﺪﺷ ﺍﺪﺟ ﺮﯾﺩﺎﻘﻣ ﺯﺍ ﯽﺘﺴﯿﻟ .ﯼﺭﻭﺮﺿ

:ﻢﯿﻨﮐ ﻩﺎﮕﻧ ﻝﺎﺜﻣ ﮏﯾ ﻪﺑ ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ

`ﻝﺎﺜﻣ`

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ٪50 ﺎﯾ ٪50 ،ﺖﺳﺍ ﺮﺘﮑﭼﻮﮐ ﻪﮐ ﯼﺭﺍﺪﻘﻣ ﺮﻫ ﻪﺑ div1# ﺽﺮﻋ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ()min

#div1 {
  background-color: yellow;
  height: 100px;
  
  width: min(50%, 300px);
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>