وظيفة CSS calc ()

تعرف على كيفية استخدام وظيفة CSS calc ()

الcalc()تتيح لك الوظيفة إجراء عمليات حسابية أساسية على القيم ، وهي مفيدة بشكل خاص عندما تحتاج إلى إضافة أو طرح قيمة طول من نسبة مئوية.

هذه هي الطريقة التي يعمل بها:

div {
	max-width: calc(80% - 100px)
}

تقوم بإرجاع قيمة طول ، لذلك يمكن استخدامها في أي مكان تتوقع فيه قيمة بكسل.

يمكنك أداء

  • باستخدام الإضافات+
  • الطرح باستخدام-
  • الضرب باستخدام*
  • باستخدام القسمة/

تحذير واحد: مع الجمع والطرح ، تكون المساحة حول المشغل إلزامية ، وإلا فلن تعمل كما هو متوقع.

أمثلة:

div {
	max-width: calc(50% / 3)
}
div {
	max-width: calc(50% + 3px)
}

تحميل مجانيكتيب CSS


المزيد من دروس css: