شرح صفوف ومحتوى الفقرة
عندما تجتمع الخصائص الثلاث width و max-width و min-width على عنصر واحد بقيم متعارضة، يحسمها المتصفح وفق خوارزمية قياسية من خطوتين تمنح الكلمة الأخيرة دائماً لخاصية min-width:
- أولاً: إذا زادت قيمة
widthعنmax-width، تُخفَّض مبدئياً إلى سقفmax-width. - ثانياً: إذا كانت النتيجة أصغر من
min-width، تتفوقmin-widthعلى كل منwidthوmax-widthمعاً!
على سبيل المثال، عند اجتماع width: 200px مع max-width: 250px و min-width: 320px يصبح العرض النهائي المحسوب 320px. اختبر سلم الأولوية عملياً في المختبر التفاعلي والمثال التاليين:
CSS
.conflict-card {
width: 180px;
max-width: 220px;
min-width: 320px;
border: 2px solid #7750b2;
}