تشير خصائص حجم CSS إلى خصائص العرض والارتفاع للعناصر، وعلى الرغم من أنها بسيطة جدًا، إلا أنها مهارة يجب إتقانها. يوفر CSS العديد من السمات مثل العرض والارتفاع والحد الأقصى للعرض والحد الأدنى للعرض والحد الأقصى للارتفاع والحد الأدنى للارتفاع لتعيين عرض العناصر وارتفاعها. هذه العناصر سهلة الاستخدام للغاية، فلنعرضها بإيجاز أدناه.
1. الارتفاع
(1) اضبط ارتفاع العنصر: سمة الارتفاع
الارتفاع: تحدد الخاصية ارتفاع العنصر.
① نطاق التطبيق وأهدافه: منطقة المحتوى الافتراضية
الأشياء القابلة للتطبيق: جميع العناصر
العناصر المضمنة غير المستبدلة وأعمدة الجدول ومجموعات الأعمدة
نطاق التطبيق: بشكل افتراضي، تحدد هذه السمة ارتفاع منطقة المحتوى.
② تغيير نطاق التطبيق:
إذا تم تعيين حجم الصندوق على Border-box، فإن هذه الخاصية تحدد ارتفاع منطقة الحدود.
③ لا ينطبق
العناصر المضمنة غير المستبدلة: يتم تجاهل هذه السمة.
العناصر المضمنة: لا يمكن ضبط الارتفاع.
④ تجاوز قيمة السمة
تتجاوز خصائص الحد الأدنى للارتفاع والحد الأقصى للارتفاع الارتفاع.
(2) مستوى عال من النحو
الارتفاع: تلقائي|الطول|%|وراثة؛
يحتوي على قيم السمات التجريبية: [ <length> |.max-content |
/*قيمة الكلمة الرئيسيةKeywordvalue*/height:auto;/*قيمة الطول<length>القيم*/height:120px;height:10em;/*قيمة النسبة المئوية<percentage>value*/height:75%;/*الكلمة الرئيسية العالمية ValueGlobalvalues*/ الارتفاع: وراثة؛ الارتفاع: الأولي؛ الارتفاع: غير محدد؛
2. العرض
(1) قم بتعيين عرض العنصر: سمة العرض
① المنطقة القابلة للتطبيق
منطقة المحتوى: بشكل افتراضي، تقوم بتعيين عرض منطقة المحتوى.
غير مضمن: يمكنك إضافة الحشو والحدود والهوامش خارج منطقة المحتوى.
تعديل المنطقة القابلة للتطبيق: ولكن إذا تم ضبط حجم الصندوق على مربع الحدود، فإنه يضبط عرض منطقة الحدود.
② العناصر القابلة للتطبيق
جميع العناصر باستثناء العناصر التالية
العناصر غير القابلة للتطبيق: العناصر المضمنة غير المستبدلة وصفوف الجدول ومجموعات الصفوف
سوف تتجاهل العناصر المضمنة غير المستبدلة هذه السمة.
③ الغطاء
قد تتجاوز خصائص العرض الأدنى والحد الأقصى للعرض العرض.
(2) بناء جملة العرض
العرض: تلقائي |.الطول|.
يحتوي على قيم السمات التجريبية: [ <length> |.max-content |.
/*قيمة الطول<الطول>القيم*/width:300px;width:25em;/*قيمة النسبة المئوية<percentage>القيمة*/width:75%;/*قيمة الكلمة الرئيسية قيم الكلمة*/width:25emborder-box;width:75 % مربع المحتوى ;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*القيم العالميةGlobalvalues*/width:inherit;width:initial;width:unset;
3. أقصى عرض وأقصى ارتفاع
يتم استخدام سمات max-width و max-height لتعيين الحد الأقصى للعرض والحد الأقصى للارتفاع لمنطقة محتوى العنصر على التوالي. عند تحديد خصائص الحد الأقصى للعرض والحد الأقصى للارتفاع، ستكون القيم الفعلية لخصائص العرض والارتفاع أقل من أو تساوي قيم خصائص الحد الأقصى للعرض والحد الأقصى للارتفاع، بغض النظر عن القيمة الفعلية قيم خصائص العرض أو الارتفاع. القيم الاختيارية لخصائص الحد الأقصى للعرض والحد الأقصى للارتفاع هي كما يلي:
خذ سمة max-width كمثال: (خصائص سمة max-height متشابهة)
(1) عندما تكون قيمة سمة max-width أقل من سمة العرض، سيتم إعادة تعريف قيمة سمة العرض إلى نفس قيمة سمة max-width؛
(2) عندما تكون قيمة سمة max-width أكبر من العرض، سيتم تجاهل سمة max-width؛
(3) عندما تكون قيمة سمة max-width أقل من min-width، سيتم تجاهل سمة max-width.
4.min-العرض وmin-height
يتم استخدام سمات min-width وmin-height لتعيين الحد الأدنى للعرض والحد الأدنى للارتفاع لمنطقة محتوى العنصر. عند تحديد سمات min-width وmin-height، بغض النظر عن القيمة الفعلية لسمة العرض أو الارتفاع، سمات العرض والارتفاع ستكون القيم الفعلية أكبر من أو تساوي قيم خصائص العرض الأدنى والارتفاع الأدنى. القيم الاختيارية لخصائص min-width وmin-height هي كما يلي:
خذ سمة min-width كمثال: (سمة min-height لها خصائص مشابهة)
(1) عندما تكون قيمة سمة العرض الأدنى أقل من العرض، سيتم تجاهل سمة العرض الأدنى؛
(2) عندما تكون قيمة سمة min-width أكبر من العرض، سيتم إعادة تعريف قيمة سمة min-width إلى نفس قيمة سمة min-width؛
(3) عندما تكون قيمة سمة الحد الأدنى للعرض أكبر من الحد الأقصى للعرض، سيتم تجاهل سمة الحد الأقصى للعرض.