تحدد خاصية عرض CSS عرض منطقة محتوى العنصر. هذه المنطقة هي المسافة بين حد العنصر والمساحة المتروكة والهامش. علاوة على ذلك ، فإن خاصية عرض CSS بالقيمة ' تناسب المحتوى 'سيضبط عرض العنصر وفقًا للمحتوى.
ستشرح هذه الدراسة خاصية عرض CSS مع القيمة الملائمة للمحتوى.
كيفية استخدام خاصية عرض CSS مع قيمة محتوى مناسب؟
لغرض استخدام خاصية عرض CSS مع قيمة محتوى مناسب ، تحقق من بناء الجملة المحدد:
العرض: محتوى مناسب
مثال
في HTML ، أضف ثلاثة عناصر div بنفس اسم الفئة ' علبة 'وثلاث فئات مختلفة' اللون 1 '،' اللون 2 '، و ' اللون 3 '، على التوالى. أضف عنصر
داخل كل div لإضافة محتوى إلى صفحة الويب:
< شعبة صف دراسي = 'box color-1' >
< ص > محتوى ملائم لعرض CSS ص >
شعبة >
< شعبة صف دراسي = 'box color-2' >
< ص > مرحبا بالعالم ! ص >
شعبة >
< شعبة صف دراسي = 'لون الصندوق -3' >
< ص > يبدأ العمل الجماعي ببناء الثقة. نحن فريق عمل إلى عن على مهمة مشتركة. ص >
شعبة >
فيما يلي إخراج كود HTML:
لقد ناقشنا حتى الآن صفحة HTML. الآن ، في القسم التالي ، سنطبق أنماط CSS مختلفة على عناصر HTML لجعلها تبدو أفضل. في المثال الحالي ، سنتحقق من سلوك ' العرض 'الممتلكات التي لها قيمة' تناسب المحتوى 'في CSS.
نمط 'box' div
.علبة {العرض: محتوى مناسب ؛
الارتفاع: 50 بكسل ؛
اللون: شبح أبيض.
الحشو: 6 بكسل ؛
الهامش: 2 بكسل ؛
حجم الخط: 18 بكسل ؛
}
ال ' .علبة 'يشير إلى مربع فئة div. فيما يلي الخصائص المطبقة عليه:
-
- ' العرض 'الملكية بالقيمة' تناسب المحتوى 'المساحة المتاحة ، لكنها لن تتجاوز المحتوى.
- ' ارتفاع 'هي الخاصية التي تحدد ارتفاع العنصر.
- ' اللون 'لون خط العنصر.
- ' حشوة 'تنتج مساحة داخل حدود العنصر أو حول المحتوى.
- ' حافة يحدد المسافة حول العنصر.
- ' حجم الخط ”تحدد حجم الخط.
نمط 'color-1' div
.اللون- 1 {لون الخلفية: # 00ABB3 ؛
}
ال ' لون الخلفية 'على' . color-1 'شعبة.
نمط 'color-2' div
.اللون- 2 {لون الخلفية: #083AA9;
}
نمط 'color-3' div
لون الخلفية: #4C6793;
}
يمكن ملاحظة أن عرض العنصر يساوي المحتوى:
هذا عظيم! لقد تعلمنا بنجاح استخدام CSS ' العرض 'الملكية بالقيمة' تناسب المحتوى '.
استنتاج
تتيح لنا خاصية عرض CSS استخدام عدة قيم. هذه القيم هي بالنسبة المئوية أو وحدات البكسل أو أكثر. لتعيينه وفقًا للمحتوى ، فإن ' تناسب المحتوى يمكن تعيين قيمة. وصف هذا المنشور خاصية عرض CSS مع القيمة الملائمة للمحتوى مع عرض عملي.