دليل مرجعي لـ CSS

قواعد CSS @

دليل الخصائص الكاملة في CSS

دالة calc() في CSS

دالة calc() هذا الدالة CSS تسمح لك بإجراء بعض الحسابات عند تحديد قيم خصائص CSS. يمكن استخدامها في المواقف التالية: <length>، <frequency>، <angle>، <time>، <number>، أو <integer>.

دوال CSS

مثال آنلاین

استخدام دالة calc() لحساب عرض عنصر <div>:

مثال

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#div1 {
　　　　position: absolute;
　　　　left: 50px;
　　　　width: calc(100% - 100px);
　　　　border: 1px solid black;
　　　　background-color: yellow;
　　　　padding: 5px;
　　　　text-align: center;
}
</style>
</head>
<body>
<p>إنشاء div يعبر عن الشاشة بأكملها، ويكون لديه فجوة 50px في كل جانب:</p>
<div id="div1">نص...</div>
</body>
</html>

التحقق من ذلك <‹/›

التعريف والاستخدام

تستخدم دالة calc() لحساب القيم الطولية بشكل ديناميكي.

من المهم ملاحظة أن يجب وجود مسافة بعد كل عمود، مثل:width: calc(100% - 10px)؛
يمكن استخدام دالة calc() لتحليل أي قيمة طول؛
تدعم دالة calc() العمليات الرياضية "+", "-", "*", "/"؛
تستخدم دالة calc() قواعد الأولويات المعيارية للعمليات الرياضية؛

إصدارات الدعم: CSS3

توافق المتصفحات

الرقم في الجدول يمثل إصدار الإصدار الأول الذي يدعم هذه الدالة.

رقم "webkit" أو "moz" أو "o" المحدد هو إصدار الإصدار الأول الذي يدعم هذه الدالة.

دالة
calc()	26.0 19.0 -webkit-	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

نحو CSS

calc(expression)

القيمة	الوصف
expression	مطلوب، تعبير رياضي، سيتم استخدام نتيجة العمليات كقيمة العودة.

دالة calc() تستخدم تعبيرًا كمعامل لها، وتستخدم نتيجة هذا التعبير كقيمة. يمكن أن يكون هذا التعبير مزيجًا من أي من العمليات التالية، باستخدام قواعد معالجة العمليات القياسية. مثال: width: calc(100% - 80px);

دوال CSS

قاعدة CSS @charset وظائف CSS