يحتوي قسم الخلفية على حشوة. كيفية المسافة البادئة في CSS؟ خيارات متقدمة لإدارة خصائص الكتلة

08.10.2023

تتكون أي صفحة ويب من عناصر موجودة فيها، ويكون تخطيط كتلة div مسؤولاً دائمًا عن موضعها. بالطبع، هناك أيضًا تخطيط جدول باستخدام العلامات

, ,
، وهناك جدل حول النظام الأفضل للاستخدام - القائم على الكتلة أم القائم على الجدول. ومع ذلك، في الواقع، لن تجد حاليًا أيًا من المواقع الحديثة والشعبية والمريحة التي تستخدم التخطيط الجدولي فقط. في أحسن الأحوال، يتم استخدامه فقط للغرض المقصود منه - أي إنشاء الجداول، ولكن ليس لتشكيل بنية الموقع نفسها.

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

علامة DIV والممتلكات العائمة

أساس نظام الكتلة هو العلامة

، وهي الحاوية للمحتوى. وقد تحتوي أيضًا على حاويات أخرى بداخلها
.

استخدام علامة DIV ليس أكثر صعوبة من . كقاعدة عامة، يتم تشكيل هيكل الموقع القياسي على النحو التالي: هناك حاوية رئيسية

(غالبًا ما يتم تعيين فئة تسمى المجمع، والحاوية، والرئيسية، وما إلى ذلك). يوجد داخل هذه الحاوية كتل من القائمة وجزء المحتوى والشريط الجانبي.

بشكل افتراضي، يقع كل كتلة جديدة مع خط جديد. من أجل وضع كتلة على يسار أو يمين كتلة أخرى (على سبيل المثال، لوضع شريط جانبي على اليمين)، استخدم خاصية تعويم. بشكل افتراضي، تحتوي على القيمة "لا شيء"، ولكن يمكنك أيضًا تعيين القيم "يسار" و"يمين".

دعونا نفكر في هذه الخاصية باستخدام مثال مكون من كتلتين.

كتلة المحتوى
كتلة الشريط الجانبي

هذا الكود سيعطي النتيجة التالية:

خاصية واضحة

من المهم أن نأخذ في الاعتبار أن الخاصية float لا تنطبق فقط على الكتلة نفسها التي تم تسجيلها فيها، ولكن أيضًا على العنصر اللاحق الذي سيتبع هذه الكتلة. أي أنه إذا أضفنا كتلة أخرى إلى الكتلتين الموصوفتين أعلاه دون تحديد أي خصائص لها، فلن يتم تحديد موقعها على سطر جديد، بل ستبدأ على يمين الكتلة الثانية.

لتجنب ذلك، يستخدم تخطيط block div الخاصية Clear، والتي يجب تعيينها للكتلة التي نريد وضعها على سطر جديد. في أغلب الأحيان، يتم ضبطه على "كلاهما" لهذا الغرض، ولكن يمكننا أيضًا ضبطه على "يسار" أو "يمين" إذا أردنا ليس فقط وضع الكتلة على سطر جديد، ولكن أيضًا ضبط محاذاتها.

دعونا نضيف عنصرا جديدا إلى المثال أعلاه:

كتلة المحتوى
كتلة الشريط الجانبي
كتلة جديدة تقع أدناه

نتيجة:

المسافة البادئة في تخطيط الكتلة

بالإضافة إلى موقع الكتل، من المهم تعيين مسافات بادئة بين الكتل وداخلها. لهذا، يتم استخدام خصائص الهامش والحشو، على التوالي.

يتم تعيين المسافات البادئة بشكل منفصل للأجزاء العلوية واليمنى والسفلية واليسرى من العنصر. ويمكن تحديدها في سطر واحد من خلال إدراج أربع قيم:

الهامش: 20 بكسل 10 بكسل 0 40 بكسل

سيتم وضع الكتلة التي تحتوي على هذه المعلمات على مسافة 20 بكسل أسفل العنصر الأصلي، وعشر بكسل من العنصر الأيمن، ولن تحتوي على حشوة في الأسفل، وستحتوي على 40 بكسل من الحشو على اليسار.

إذا تم تحديد جميع المؤشرات نفسها في خاصية الحشو، فستكون هذه هي الحشو الداخلي للمحتوى فيما يتعلق بحدود الكتلة التي يقع فيها.

يمكنك أيضًا تعيين خصائص منفصلة للحواف الفردية باستخدام الهامش العلوي، والهامش السفلي، والهامش الأيسر، والهامش الأيمن (وبالمثل للحشو). في هذه الحالة، إذا لم يتم تحديد أي من الحواف، فستكون المسافة البادئة على جانبها صفرًا أو سيتم تحديدها بواسطة خصائص CSS العامة المحددة للكتل الموجودة على الصفحة.

غالبًا ما يتم استخدام تخطيط الكتلة عند إنشاء موقع ويب أو مدونة. ونتيجة لذلك، غالبًا ما يكون من الضروري وضع مسافة بادئة للكتل. لهذا السبب، حول كيفية وضع مسافة بادئة في CSSالموصوفة بالتفصيل في هذا الدرس. بالنسبة للمتصفح، كل علامة عبارة عن حاوية تحتوي على محتوى وحشوة وهوامش خارجية وحدود. في هذا الدرس سوف نتعلم كيفية عمل مسافات بادئة داخلية وخارجية، ونأخذ في الاعتبار معالمها الرئيسية.

يوضح الشكل أدناه بوضوح معلمات المسافة البادئة للكتلة:

كما ترون، يمكن عمل مسافة بادئة في أربعة اتجاهات: مسافة بادئة علوية (أعلى)، مسافة بادئة سفلية (أسفل)، مسافة بادئة يسرى (يسار) ومسافة بادئة يمنى (يمين). يمكن أن تكون وحدات القياس عبارة عن بكسلات ونسب مئوية ووحدات CSS أخرى - تعرف على المزيد عنها. يستخدم هذا البرنامج التعليمي وحدات البكسل.

حشوة الكتلة

الخاصية المسؤولة عن الحشو في CSS هي حشوة. لذلك، دعونا نلقي نظرة على مثال لإعداد الحشو الداخلي لكتلة:

الحشو العلوي: 5 بكسل؛ /*الحشوة العلوية*/ الحشوة اليسرى: 8px; /*الحشوة اليسرى*/ الحشوة اليمنى: 8px; /*الحشوة اليمنى*/ الحشوة السفلية: 5px; /*الحشوة السفلية*/

في هذا المثال، يتم تعيين الحشو بشكل منفصل لكل جانب من الكتلة. بالإضافة إلى ذلك، هناك عدة طرق لتعيين المسافة البادئة في CSS:

الهامش: 5px 8px 5px 8px؛ /*الهوامش العلوية، اليمنى، السفلية، اليسرى*/ هامش: 5px 8px 5px; /*يصف الهوامش العلوية، اليسرى، اليمنى، السفلية*/ هامش: 5px 8px; /*يصف الهوامش العلوية والسفلية، اليمنى واليسرى*/ هامش: 7px; /*يصف جميع الحشوات الداخلية بحجم 7 بكسل*/

من الأسهل أن تتذكر الأول و الطرق الأخيرة. في الحالة الأولى، يتم وضع المسافات البادئة في اتجاه عقارب الساعة (أعلى، يمين، أسفل، يسار) - يمكننا تحديد أي مقدار من المسافة البادئة في الحالة الأخيرة، ستكون المسافات البادئة على جميع الجوانب هي نفسها.

حظر الهوامش

الخاصية المسؤولة عن الهوامش في CSS هي هامِش. أمثلة على الهوامش في CSS:

الهامش العلوي: 5 بكسل؛ /*الهامش العلوي*/ الهامش الأيسر: 10px; /*الهامش الأيسر*/ الهامش الأيمن: 10px; /*الهامش الأيمن*/ Margin-bottom: 5px; /*الهامش السفلي*/
الحشو: 5px 10px 5px 10px؛ /*الهوامش العلوية، اليمنى، السفلية، اليسرى*/ الحشو: 5px 10px 5px; /*يصف الحشو العلوي واليسار واليمين والسفلي*/ الحشو: 5px 10px; /*يصف الحشو العلوي والسفلي واليمين واليسار*/ الحشو: 7px; /*يصف جميع الهوامش التي يبلغ حجمها 7 بكسل*/

هكذا، كيفية وضع مسافة بادئة في CSS- السؤال ليس صعبا، ولكنه وثيق الصلة بالموضوع. لفهم المعلومات الموضحة أعلاه بشكل أفضل، يجب أن تتذكر أن هناك خاصيتين: الحشو - المسافات البادئة الداخلية والهامش - المسافات البادئة الخارجية. كما تعلم أيضًا، هناك عدة طرق لتعيين المسافات البادئة، يمكنك استخدامها.

في كثير من الأحيان، يواجه مصممو التخطيط مشاكل في وضع العناصر على الصفحة بسبب وجود مسافات بادئة إضافية في مواقف معينة. ستنظر المقالة في الحالة التي يتم فيها وضع صورة داخل كتلة، مما يؤدي إلى مسافة بادئة غير معروفة. ستجد هنا شرح وحل لهذه المشكلة.

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

دعونا نلقي نظرة على مثال عملي

لذلك، من أجل الوضوح وتصور أفضل للمشكلة، أقترح أن ننظر إلى كل شيء، وإذا جاز التعبير، "لمسها" في الممارسة العملية. نحن نأخذ أي صورة ونضعها في div. أدناه يمكنك رؤية رمز المثال:

HTML

< div> < img src= "img.png" width= "250px" alt= "" />

عند إنشاء الأنماط، املأ الخلفية الداخلية للكتلة باللون الأحمر. في الظروف العادية، ستشغل الصورة كامل المساحة داخل الكتلة وستغطي الخلفية الحمراء. نكتب رمز التسجيل

div ( العرض: كتلة؛ العرض: 250 بكسل؛ الهامش: 0 بكسل تلقائي؛ /*توسيط الكتلة*/ الخلفية: #ff0000;/*املأ الكتلة باللون الأحمر،لتصور الحشو*/ ) الجسم ( الخلفية: #eee; )

ونتيجة لذلك، سيظهر لنا المتصفح الصورة التالية

انطلاقا من الشريط الأحمر في الجزء السفلي من الحاوية، يمكن القول أن هناك مسافة بادئة غير مفهومة. باستخدام لوحة مشرف الموقع في المتصفح، أصبح من المعروف أن المسافة البادئة كانت 5511 بكسل.

من المضحك جدًا أن جميع المتصفحات الشائعة بها هذا الخطأ، لكن برنامج Internet Explorer المفضل لدى الجميع يعمل بشكل لا تشوبه شائبة في هذه الحالة.

سبب المسافة البادئة

كشخص حاصل على تعليم تقني عالي، يمكنني أن أؤكد لكم أنه لا شيء يحدث عبثًا، كل شيء له سبب. بعد أن نظرت في هذه المسألة، كنت مقتنعا بذلك مرة أخرى. يكمن الارتباك كله في الخصائص القياسية للعناصر. بشكل افتراضي، تحتوي علامة img على خصائص العنصر المضمنة، وهذا بدوره يعني أنه سيتم محاذاة العنصر مع الخط الأساسي للنص. يقع هذا الخط أعلى الحافة السفلية للكتلة مباشرةً، حيث يوجد هامش إلزامي للنص - مساحة لـ "ذيول" الحروف.

حل المشكلة

لتصحيح هذا العيب البسيط، يكفي تعيين خصائص عنصر الكتلة للصورة. ستساعدنا خاصية العرض في ذلك؛ حيث سنخصصها للصورة عرض: كتلة؛ والتخلص من المشاكل غير الضرورية. يمكنك أيضًا تمكين المحاذاة الرأسية عبر خاصية المحاذاة الرأسية. سيساعد هذا أيضًا في التخلص من المسافة البادئة غير المرغوب فيها.

ما هي المتصفحات التي تعمل فيها؟

6.0+ 5.0+ 9.5+ 4.0+ 3.0+ - -

يتكون أي عنصر كتلة من مجموعة من الخصائص، مثل أوراق الملفوف المتراكبة فوق بعضها البعض. أساس الكتلة هو محتواها (يمكن أن يكون نصًا أو صورة أو ما إلى ذلك)، ويتم تحديد عرضها بواسطة خاصية العرض، والارتفاع بواسطة الارتفاع؛ توجد حشوات حول المحتوى، مما يؤدي إلى إنشاء مساحة فارغة من المحتوى إلى الحافة الداخلية للحدود؛ ثم تأتي الحدود نفسها (الحدود) وتكتمل الكتلة بالهوامش (الهامش)، المساحة الفارغة غير المرئية من الحافة الخارجية للحدود. ترتيب تأثير هذه الخصائص على الكتلة محدد بوضوح ولا يمكن انتهاكه. في الشكل. ويبين الشكل 3.1 الكتلة كمجموعة من هذه الخصائص.

أرز. 3.1. الخصائص التي تشكل عنصر الكتلة

من أجل الوضوح، يمكن تمثيل خصائص الكتلة في شكل دمى متداخلة (الشكل 3.2). يمكن إدخال أي دمية تعشيش صغيرة في دمية ماتريوشكا أكبر حجمًا، ولكن ليس العكس.

أرز. 3.2. دمى ماتريوشكا

في الواقع، ليست هناك حاجة لأي من هذه الخصائص، بما في ذلك المحتوى، لذا يمكنك تشكيل أي كتل تحتوي على مجموعات من خصائص الحشو والحدود والهامش، أو الاستغناء عنها على الإطلاق.

الحقول

سيكون الهامش هو المسافة من الحافة الداخلية للحد أو حافة الكتلة إلى المستطيل الوهمي الذي يحد محتويات الكتلة. ولأن قيم الهامش قد تختلف من كل جانب، يتم استخدام تعبيرات "الهامش العلوي" أو "الهامش العلوي" وما شابه ذلك للأوجه الأخرى. ينبغي فهم تسمية "الهامش" على أنها نفس قيمة الهامش لجميع الأطراف. الغرض الرئيسي من الهوامش هو إنشاء مساحة بيضاء حول محتوى عنصر الكتلة، مثل النص، بحيث لا تتناسب مع حافة العنصر. يؤدي استخدام الهوامش إلى زيادة سهولة قراءة النص وتحسينه مظهرالصفحات. يوضح المثال 3.1 استخدام الحقول لتنسيق النص.

مثال 3.1: استخدام خاصية الحشو

الحقول

لقد جاؤوا ليهزمونا، ليعذبونا ويحرقونا أحياء، وجاءوا ليفعلوا بنا، نحن الإنجليز الأحرار، نفس الشيء الذي فعله كورتيز بهنود أناهواك.


وتظهر نتيجة المثال في الشكل. 3.3.

أرز. 3.3. الهوامش حول النص

لا يمكن أن تكون قيم الحقل سالبة.

الحدود

الحدود عبارة عن خطوط حول هوامش عنصر ما على جانب واحد أو اثنين أو ثلاثة أو أربعة جوانب من العنصر. كل سطر له سمك ونمط ولون. لإنشاء حدود، استخدم خاصية الحدود العامة، التي تقوم بتعيين كل هذه المعلمات في وقت واحد، ولإنشاء خطوط على الجوانب الفردية لعنصر ما، يمكنك استخدام خصائص border-left و border-top و border-right و border-bottom، على التوالي تعيين الحدود إلى اليسار والأعلى واليمين والأسفل. يوضح المثال 3.2 إضافة خط إلى يسار العنصر.

مثال 3.2. خط منقط أحمر

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

خط



نتيجة هذا المثاليظهر في الشكل. 3.4.

أرز. 3.4. السطر بجوار النص

يتم التحكم في المسافة من السطر إلى النص بواسطة قيمة الحشو.

المسافات البادئة

المسافة البادئة هي المساحة الفارغة من الحافة الخارجية للحد أو الهوامش أو محتويات الكتلة. كما ذكرنا سابقًا، الحدود ذات الهوامش اختيارية وقد تكون غائبة، لذا فإن كيفية إنشاء الحشو تعتمد على الموقف. كما هو الحال مع الهوامش، يتم استخدام تعبيرات "الهامش العلوي" أو "الهامش العلوي"، وما شابه ذلك للأطراف الأخرى. ينبغي فهم تسمية "المسافات البادئة" على أنها نفس قيمة المسافة البادئة لجميع الجوانب.

الميزات التالية هي سمة من المسافات البادئة.

  • الحشو شفاف ولا يتأثر بلون الخلفية أو صورة الخلفية المحددة للكتلة. ومع ذلك، إذا تم تعيين الخلفية على العنصر الأصلي، فستكون مرئية أيضًا على الهوامش.
  • يمكن أن تأخذ المسافات البادئة، على عكس الهوامش، قيمة سالبة، مما يؤدي إلى إزاحة الكتلة بأكملها في الاتجاه المحدد. لذا، إذا تم إعطاء الهامش الأيسر: -10 بكسل، فسيؤدي ذلك إلى نقل الكتلة بمقدار عشرة بكسل إلى اليسار.
  • تتميز المسافات البادئة بظاهرة تسمى "الانهيار"، عندما لا يتم تلخيص المسافات البادئة للعناصر القريبة، بل يتم دمجها مع بعضها البعض.
  • يتم حساب المسافات البادئة، المحددة كنسبة مئوية، من عرض محتوى الكتلة. وهذا ينطبق على كل من المسافات البادئة الرأسية والأفقية.

يوضح المثال 3.3 طي الحشو وجعله شفافًا.

مثال 3.3. باستخدام المسافة البادئة

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

المسافات البادئة

يزأر الأسد فقط عندما يعلن أن الأرض ملك له أو يعلن نفسه ملك الطبيعة.


وتظهر نتيجة هذا المثال في الشكل. 3.5. يرجى ملاحظة أن المسافة بين الكتل هي 20 بكسل، وليس 40، والتي يتم الحصول عليها عن طريق جمع الحشو العلوي والسفلي للكتل. يحدث هذا بسبب تأثير الانهيار، حيث يتم دمج الهوامش القريبة.

أرز. 3.5. حشوة العنصر

يوضح الشكل بوضوح أن اللون الذي تم تعيينه من خلال خاصية الخلفية لا يتجاوز حدود العنصر ولا يؤثر على الحشو.

عرض الكتلة هو قيمة معقدة ويتكون من عدة قيم للخصائص:

  • العرض - عرض المحتوى، أي. محتويات الكتلة؛
  • الحشو لليسار والحشو لليمين - الهامش الموجود على يسار ويمين المحتوى؛
  • الحدود اليسرى والحدود اليمنى - سمك الحدود على اليسار واليمين؛
  • الهامش الأيسر والهامش الأيمن - الهامش الأيسر والأيمن.

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

أرز. 3.6. عرض الكتلة

إذا لم يتم تحديد العرض، فسيتم تعيينه افتراضيًا على تلقائي. في هذه الحالة، سيشغل عرض الكتلة كامل العرض المتاح مع الحفاظ على قيم الهوامش والحدود والحشو. تحت العرض المتاح في في هذه الحالةوهذا يعني عرض محتوى الكتلة الأصلية، وإذا لم يكن هناك أصل، فسيتم عرض محتوى المتصفح.

لنفترض أن النمط التالي مكتوب لطبقة.

العرض: 300 بكسل؛ /* عرض المحتوى */ هامش: 7px; /* قيمة الحشو */ الحدود: 4 بكسل أسود خالص؛ /* خيارات الحدود */ الحشو: 10 بكسل; /* الهوامش حول النص */

سيكون عرض الكتلة وفقًا لهذا الإدخال مساويًا لـ 342 بكسل، ويتم الحصول على هذه القيمة عن طريق إضافة قيمة عرض المحتوى بالإضافة إلى الحشو الأيسر والحد الأيسر والهامش الأيسر، بالإضافة إلى الهامش الأيمن والحد الأيمن والحشو الأيمن. دعونا نلخص كل الأرقام.

العرض = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

تجدر الإشارة إلى أن نموذج الكتلة مع تشكيل العرض يحمل في طياته الكثير من المضايقات. يتعين عليك دائمًا إجراء العمليات الحسابية عندما تحتاج إلى تعيين عرض كتلة معين. تبدأ المشاكل أيضًا عند الجمع وحدات مختلفةالقياسات، وخاصة النسب المئوية والبكسل. لنفترض أنه تم ضبط عرض المحتوى على 90%، وإذا أضفنا الهوامش والحدود المحددة بالبكسل، فمن المستحيل حساب العرض الإجمالي للكتلة، نظرًا لأن النسب المئوية لا تتم ترجمتها مباشرة إلى بكسلات (في CSS3 يمكن تلخيص ذلك ، ولكن هذه الميزة غير مدعومة في جميع المتصفحات). ونتيجة لذلك، قد يتجاوز العرض الإجمالي للكتلة عرض صفحة الويب، الأمر الذي سيؤدي إلى ظهور شريط تمرير أفقي. هناك طريقتان للخروج من هذا الموقف - تغيير خوارزمية نموذج الكتلة واستخدام الطبقات المتداخلة.

خوارزمية نموذج الكتلة

كما ذكرنا سابقًا، يتم تشكيل عرض الكتلة من عرض المحتوى وقيم الهوامش والحدود والحشو. في المتصفح إنترنت إكسبلوررفي وضع التوافق (بمعنى آخر، عندما لا يتم تحديد نوع مستند)، تتغير الخوارزمية تلقائيًا ويتم ضبط عرض الكتلة بأكملها على width . لا تغير المتصفحات الأخرى الخوارزمية بهذه السهولة، بالإضافة إلى أنك تعلم أن وضع التوافق شرير. يحتوي CSS3 على خاصية رائعة لحجم الصندوق والتي ستكون مفيدة لنا. عند التعيين على border-box، يبدأ العرض في تضمين الهوامش والحدود، ولكن ليس الحشو. وبالتالي، من خلال ربط تغيير حجم المربع بقيمة مربع الحدود بنمطنا، يمكننا ضبط العرض كنسبة مئوية وتحديد الحدود والحشو بأمان دون خوف من تغيير عرض الكتلة. لسوء الحظ، هناك مشكلة صغيرة في هذه الخاصية، كما هو الحال عادة مع المتصفحات - لا تفهمها جميع المتصفحات. أنا سعيد لأن المتصفحات تدعم على الأقل الخصائص الخاصة بالمتصفح. في الجدول 3.1 يظهر دعم المتصفح.

طاولة 3.1. دعم المتصفح لخاصية تغيير حجم الصندوق
المتصفح إنترنت إكسبلورر الكروم الأوبرا سفاري فايرفوكس
إصدار 8.0+ 2.0+ 7.0+ 3.0+ 1.0+
ملكية تحجيم الصندوق - تغيير حجم مربع webkit تحجيم الصندوق - تغيير حجم مربع webkit -moz-box-sizing

كما ترون من الجدول، هناك ارتباك وتذبذب في الخصائص، لذلك سيتعين عليك عمل هجين والإشارة إلى الخصائص الثلاثة في نفس الوقت (المثال 3.4).

مثال 3.4. عرض الكتلة

XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx

عرض الكتلة

عرض الكتلة 100%


سيعمل هذا المثال في جميع المتصفحات المدرجة في الجدول. ومع ذلك، فإن الإصدار 3.1 غير صالح في CSS3 بسبب استخدام خصائص غير قياسية تبدأ بـ -moz و -webkit. عرض الكتلة هو 100% بما في ذلك قيم الحشو. بدون خاصية تغيير حجم الصندوق، سيظهر شريط تمرير أفقي في المتصفح.

طبقات متداخلة

يعد استخدام خاصية تغيير حجم الصندوق مفيدًا للجميع، إلا أنها لا تعمل في الإصدارات القديمة من IE. إذا كنت تصمم موقع ويب يعتمد على IE7 وIE6، فإن الطريقة القديمة المثبتة لتداخل الطبقات مناسبة لك. الفكرة بسيطة - بالنسبة لعنصر الكتلة الخارجية يتم تعيين العرض المطلوب فقط، وبالنسبة للكتلة المتداخلة يتم تعيين كل شيء آخر - الهوامش والحدود والحشو. نظرًا لأن العرض الافتراضي للكتل يساوي العرض المتاح للعنصر الأصلي، فسوف تتداخل الكتل إلى حد ما مع بعضها البعض، ولكن سيتم تحديد العرض الفعلي للعنصر المدمج بوضوح. يوضح المثال 3.5 استخدام الطبقات المتداخلة.

مثال 3.5. طبقات متداخلة

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

عرض الكتلة

عرض الطبقة 100%


وتظهر نتيجة هذا المثال في الشكل. 3.7.

أرز. 3.7. عرض الكتلة بالنسبة المئوية

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

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

أرز. 3.8. ارتفاع الكتلة

وفي الوقت نفسه، على الرغم من التشابه في مبادئ بناء العرض والارتفاع، إلا أن لديهم اختلافات كبيرة. ينطبق هذا على الحالة التي لم يتم فيها تحديد العرض والارتفاع، ثم يتم ضبطهما افتراضيًا على auto . بالنسبة لعرض الكتلة، هذا هو الحد الأقصى لعرض المحتوى المتاح، وبالنسبة لارتفاع الكتلة، هذا هو ارتفاع المحتوى. أيضًا، بالنسبة لعرض الكتلة، يكون عرض الأصل معروفًا، حتى لو لم يتم تحديده بشكل صريح. يتيح لك ذلك ضبط العرض كنسبة مئوية. إن استخدام النسب المئوية للارتفاع لن يؤدي إلى شيء، لأن ارتفاع الوالد غير محسوب ويجب تحديده. يوضح المثال 3.6 كيفية ضبط ارتفاع الكتلة كنسبة مئوية.

مثال 3.6. ارتفاع الكتلة

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ارتفاع الكتلة

ارتفاع الطبقة 100%


وتظهر نتيجة هذا المثال في الشكل. 3.9.

أرز. 3.9. ارتفاع الكتلة بالنسبة المئوية

للعلامة

في المثال، الأصل هو العلامة ، لذا قمنا بتعيين قيمة ارتفاعه على 100%. في نفس الوقت على تنطبق نفس القواعد على
لذلك لن يتم حساب قيمة النسبة المئوية من ارتفاع الصفحة، بل من ارتفاع المحتوى. لذلك بالنسبة للوالد ، وهي العلامة ، تحتاج أيضًا إلى ضبط قيمة الارتفاع على 100%. فقط في هذه الحالة، سيعتمد ارتفاع الكتلة كنسبة مئوية على ارتفاع الصفحة.

نظرًا لأن الارتفاع يتأثر بالهوامش والحدود والحشو، فسيظهر المثال شريط عموديانتقل. يمكنك التخلص من هذا التأثير باستخدام نفس الطرق المستخدمة في العرض، أي استخدام خاصية تغيير حجم الصندوق، أو استخدام الطبقات المتداخلة.

هناك ميزة أخرى مرتبطة بالارتفاع - عندما يتجاوز محتوى الكتلة أبعادها عند ارتفاع معين، يبدأ عرض المحتوى أعلى الكتلة (الشكل 3.10).

أرز. 3.10. تجاوز حجم الكتلة

يظهر الكود الذي ينتج نتيجة مماثلة في المثال 3.7.

مثال 3.7. تجاوز حجم الكتلة

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ارتفاع الكتلة

يزأر الأسد فقط عندما يعلن أن الأرض ملك له أو يعلن نفسه ملك الطبيعة.

يمكن أن يصل طول نطاق صيد الأسد إلى ثلاثين كيلومترًا وعرضه.



لتجنب مثل هذه المشاكل، من الأفضل عدم ضبط ارتفاع المحتوى، ثم سيتم حساب ارتفاع الكتلة تلقائيًا. ومع ذلك، هناك حالات يجب فيها الإشارة إلى الارتفاع بوضوح، فمن المستحسن إضافة خاصية التجاوز إلى النمط بالقيمة auto أو Hidden . نتائجها مختلفة، وتضيف أشرطة التمرير تلقائيًا عند الحاجة إليها (الشكل 11 أ)، ويخفي المخفي كل شيء لا يتناسب مع الأبعاد المحددة (الشكل 11 ب).

أ. القيمة التلقائية

ب. المعنى الخفي

أرز. 11. استخدام خاصية التجاوز

خلفية

إذا قمت بتعيين لون الخلفية والحد المنقط للكتلة في نفس الوقت، يصبح ملحوظًا أن الحد يمتد داخل المنطقة الملونة. الحقيقة في متصفحات مختلفةتوجد اختلافات، خاصة أن Internet Explorer حتى الإصدار 7.0 يتضمن خطأً يتم فيه عرض الخلفية على طول الحافة الداخلية للحدود (الشكل 12 ج). بدءًا من الإصدار 8.0، تم تصحيح هذا الخطأ، ويتم عرض الخلفية وفقًا للمعايير (الشكل 12 د). تعرض المتصفحات Opera (الشكل 12أ) وFirefox (12b) وSafari وChrome (الشكل 12e) الخلفية بشكل صحيح. يتم ملاحظة اختلافات طفيفة عند عرض المربع المنقط، ولكنها لا تؤثر على نموذج الصندوق.

د. سفاري، كروم

أرز. 12. عرض الخلفية في المتصفح

يوضح المثال 3.8 كيفية إنشاء تعليمات برمجية للحصول على مثل هذا الحد.

مثال 3.8. الخلفية والحدود

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

إطار

أُووبس...


لا يمكن ملاحظة الاختلافات في طريقة رسم المتصفحات للحدود إلا على الخلفيات الملونة والخطوط المنقطة. بالنسبة للإطار الصلب، سيكون مظهر الكتلة في المتصفحات هو نفسه تقريبًا.

نموذج مربع CSS إنجليزييسمى نموذج الصندوق (الصندوق عبارة عن صندوق). تساعد هذه الترجمة قليلاً على فهم جوهر نموذج الكتلة. خلاصة القول هي أنه عند تشكيل صفحة على الشاشة، يتم استخدام الكتل - مناطق مستطيلة من الشاشة.

يعد نموذج مربع CSS أحد أسس فهم CSS، وهو نموذج تنسيق المستندات.

قبل أن تتعلم CSS، يجب أن تكون قد تعلمت HTML، مما يعني أنه يجب عليك معرفة ذلك علامات HTMLوتنقسم إلى عناصر كتلة وعناصر مضمنة.

  • عناصر الكتلة هي علامات تنشئ كتلة، أي أنها تشغل العرض المتاح بالكامل (من الحافة إلى الحافة)، ويعتمد ارتفاع عنصر الكتلة على محتواه، ويحتل عنصر الكتلة دائمًا سطرًا جديدًا. أمثلة على عناصر الكتلة - العلامات

    و

    .
  • العناصر المضمنة هي علامات لا تنشئ كتلًا خاصة بها، ولكنها تؤثر على عرض محتويات الكتلة. مثال على هذه العلامات هو , , وغيرها.

دعونا نلقي نظرة على الاختلافات بين مجموعات العناصر هذه باستخدام مثال.

نموذج صندوق CSS

كتلة علامة p. هذا قطعة من النصتم تمييزه بعلامة em.



يوضح هذا المثال بوضوح تلك العلامات

و

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

تشغل عرض الشاشة بالكامل، ارتفاعها يساوي ارتفاع محتواها. ولجعل هذا مرئيًا، تم تعيين كلا العنصرين على لون خلفية أصفر.

علامة لقد قمت للتو بتنسيق النص داخل الكتلة

اقرأ المزيد عن الكتل.

يحتوي أي عنصر كتلة على مجموعة محددة من الخصائص التي يمكن تغييرها متى مساعدة في CSS.

أساس الكتلة هو محتواها أو محتوياتها؛ يتم تحديد عرض حقل المحتوى بواسطة خاصية العرض، والارتفاع بواسطة خاصية الارتفاع. لكن الكتلة بها أيضًا حقول أخرى، تتداخل مع بعضها البعض مثل أوراق الملفوف.

من الأسهل إظهار ذلك في شكل رسم.

نرى أنه بالإضافة إلى حقل المحتوى نفسه، تحتوي الكتلة على ثلاث خصائص أخرى:

  • المسافة البادئة الداخلية - الحشو - باللغة الإنجليزية "الحشو". الحشو هو ما يحشو، ما يملأ باطن الشيء. الحشو هو جزء الكتلة من حافة المحتوى إلى الحدود.
  • الحدود - باللغة الإنجليزية، هي "الحدود". يمكن تعيين حدود عنصر الكتلة أنماط مختلفة: خط متصل، نقاط، خط منقط؛ يمكنك ضبط لون الحدود. سنناقش بالتفصيل كيفية إدارة الممتلكات الحدودية أدناه.
  • المسافة البادئة الخارجية - الهامش - باللغة الإنجليزية "الهامش". من الناحية الاقتصادية، الهامش يعني الفرق بين التكلفة والسعر.

لأغراض هذه المقالة، لن نأخذ في الاعتبار خاصية المخطط التفصيلي. فقط لاحظ: هذه الخاصية لا تؤثر على حجم الكتلة.

يمكن التحكم في الخصائص المتبقية باستخدام CSS عن طريق تحديد حجمها وبعض قيم الأنماط الأخرى. دعونا ننظر إلى هذا مع مثال.

نموذج صندوق CSS

كتلة علامة div.

كتلة العلامة ص. تحتوي هذه الفقرة على خصائص افتراضية.

النمط: الحشو: 10 بكسل.

النمط: الهامش: 30 بكسل.



يجب أن تكون النتيجة مثل هذا:


الشكل 2. المثال رقم 2 عمليًا.

نرى حدًا أسود بسمك 3 بكسل حول الكتلة التي أنشأتها العلامة

. يتم تنسيق الفقرة الأولى بشكل افتراضي، باستثناء لون الخلفية. في الفقرة الثانية، تم ضبط الحشو الداخلي على 10 بكسل، ومن الواضح أن المساحة المملوءة بلون الخلفية حول النص قد زادت. لا تحتوي الفقرة الثالثة على مسافة بادئة داخلية، ولكن تم تعيين هامش قدره 30 بكسل. نرى أن المسافة بين هذه والفقرة الثانية أكبر من المسافة بين الثانية والأولى - وهذه هي الطريقة التي تعمل بها المسافة البادئة الخارجية.

الحدود والحشوة هي خصائص كتلة اختيارية، ويمكن ضبطها جميعًا على الصفر.

كيف يتم تعيين ألوان الخلفية لهذه الخصائص؟

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

خيارات متقدمة لإدارة خصائص الكتلة

بالإضافة إلى إدارة جميع جوانب الكتلة مرة واحدة، من الممكن التحكم في كل جانب من كل خاصية على حدة. فيما يلي رسم يوضح خصائص CSS للتحكم في تصميم الكتلة بهذه الطريقة.


الشكل 3. نموذج مربع CSS.

دعونا نلقي نظرة فاحصة على خصائص الكتل ونعطي أمثلة على استخدامها.

حشوة داخلية

الحشو الداخلي - المسافة من الحافة الداخلية للحد إلى المستطيل الشرطي الذي يحد من محتوى الكتلة. نظرًا لأن المسافة البادئة الداخلية يمكن أن تكون مختلفة لكل جانب من جوانب الكتلة، فإنهم يقولون "مسافة بادئة داخلية علوية" أو "مسافة بادئة علوية". تجدر الإشارة إلى أن كتب CSS المختلفة تستخدم ترجمات مختلفة لخاصية الحشو، في بعضها تسمى ببساطة الحشو، وفي البعض الآخر تسمى الحقل، وتسمى خاصية الهامش الحشو.

تتمثل الوظيفة الرئيسية للحشو في إنشاء مساحة فارغة بين محتوى الكتلة والحدود، على سبيل المثال لمنع النص من التدفق على الحدود. تجعل المسافات البادئة الصفحة تبدو أكثر جاذبية، وسيكون النص المصمم باستخدامها أكثر قابلية للقراءة.

نموذج صندوق CSS



يجب أن تكون النتيجة مثل هذا:

الشكل 4. المثال رقم 3 في العمل.

نرى كتلة مصممة بشكل جميل مع حشوة على الحدود.

حدود

الحدود هي خطوط حول المحتوى الداخلي للعنصر. يمكن تعيين الحدود لجميع جوانب الكتلة، أو لأي رقم. يمكنك ضبط سمك الحدود ونمطها ولونها. لإنشاء إطار (حدود)، كما هو مكتوب سابقًا، توجد خاصية حدود في CSS. في هذه الخاصية يمكنك تحديد جميع خصائص الإطار (السُمك والنمط واللون). ولإنشاء حدود على الجوانب الفردية للكتلة، تحتاج إلى استخدام خصائص border-top و border-right و border-bottom و border-left.

نموذج صندوق CSS



يجب أن تكون نتيجة تنفيذ الكود كما يلي:


الشكل 5. عمل المثال رقم 4.

الهامش الخارجي - الهامش

الحشو هو المسافة من حدود الكتلة إلى حافتها الخارجية. يتم تعيين الهوامش بواسطة خاصية الهامش. كما هو الحال مع الحشو والحدود، يمكن ضبط الحشو على جانبي الكتلة. على سبيل المثال، تتحكم خاصية الهامش الأيسر في الهامش الأيسر للكتلة.

ميزات المسافات البادئة الخارجية.

  • الهامش دائما شفاف. لا يقبل لون الخلفية أو صورة الخلفيةتعيين للكتلة التي ينتمي إليها. ومع ذلك، فإنه يأخذ على خلفية العنصر الأصل.
  • يتم تلخيص الهوامش. إذا تم تحديد هوامش 25 بكسل بين الكتل، فلن تكون المسافة بينها 50 بكسل، بل 25 بكسل، نظرًا لأن الهوامش الخارجية تتداخل مع بعضها البعض.
  • يمكنك ضبط الهامش على قيمة سالبة. تقوم هذه القيمة بتحريك الكتلة، على سبيل المثال الإعلان هامش-يسار : -20px سوف يحرك الكتلة إلى اليسار بمقدار عشرين بكسل.
  • يمكن تعيين المسافات البادئة كنسبة مئوية؛ ويتم حساب هذه المسافات البادئة بناءً على حجم كتلة المحتوى. سيتم ذلك لكل من الهوامش الأفقية والرأسية.
نموذج صندوق CSS

لقد مرت آلاف السنين. لقد توقفت الآلية المصممة للعمل إلى الأبد. تضررت أنظمة دعم الحياة.

لقد مرت آلاف السنين. لقد توقفت الآلية المصممة للعمل إلى الأبد. تضررت أنظمة دعم الحياة.

نظر الغريب حوله. كانت هناك صحراء في كل الاتجاهات حتى الأفق.



دعونا نلقي نظرة على هذا المثال بمزيد من التفصيل. يجب أن تكون نتيجة تنفيذه مثل هذا:

الشكل 6. عمل المثال رقم 5.

للعلامة

يبلغ سمك الحدود المحددة هنا 1 بكسل. يتم ذلك بحيث يكون من الواضح أين تبدأ منطقة المسافة البادئة الخارجية لهذه العلامة.

علامة واحدة

وضعت في الكتلة

مع مجموعة ألوان الخلفية ويمكن ملاحظة أن المسافة البادئة الخارجية للعلامة

لون خلفية العلامة المقبولة

. والعلامات

تلك الموجودة خارج هذه الكتلة لها لون هامش أبيض، يتوافق مع لون خلفية الكتلة تقصير.

الفقرة الأخيرة الفارغة يبلغ ارتفاعها 20 بكسل، وقد تم وضعها في المثال فقط لتسهيل رؤية أن المسافة بين الفقرات هي 20 بكسل وتساوي ارتفاع هذه الفقرة الفارغة. في ورقة الأنماط للعلامة

تم تعيين إعلان الهامش على 20 بكسل، ويمكنك أن ترى أن المسافات البادئة الخارجية للفقرات تندمج وأن المسافة بين الفقرات ليست 40 بكسل، بل 20 بكسل.

عرض الكتلة هو قيمة مركبة، وهو عبارة عن مجموع قيم عدة خصائص:

  • العرض - عرض محتوى الكتلة؛
  • الحشو لليسار والحشو لليمين - الحشو لليسار واليمين للمحتوى؛
  • الحدود اليسرى والحدود اليمنى - سمك الحدود على اليسار واليمين؛
  • الهامش الأيسر والهامش الأيمن - الهامش الخارجي على اليسار واليمين.

يمكن أن تكون قيم بعض الخصائص تساوي الصفر، وبالتالي لا تؤثر على عرض الكتلة.

في الشكل 7، تتم الإشارة إلى الكتلة بخط منقط أسود.


الشكل 7. عرض الكتلة.

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

لنحسب عرض الكتلة باستخدام النمط التالي كمثال:

العرض: 400 بكسل؛ /* عرض الكتلة */ الحشو: 5px; /* الهامش إلى الحدود */ border-width: 3px; /* سمك الحدود */ هامش: 7px; /* هامِش */

لنجمع جميع المصطلحات التي تشكل عرض الكتلة:

عرض الكتلة = 400 + 5*2 + 3*2 + 7*2 = 430 بكسل.

نموذج الكتلة القديمة

تاريخيًا، لم يتم دائمًا استخدام طريقة حساب عرض الكتلة الموضحة أعلاه. في الوقت الحالي، هذا هو المعيار المعتمد من قبل W3C. لكن في السابق، لم تكن خاصية العرض مساوية لحقل المحتوى، بل كانت تمثل مساحة الكتلة، والتي تتضمن خاصية الحدود. كان مصدر نموذج الكتلة هذا هو MicroSoft وعمل على أساسه متصفح الانترنت Explorer حتى الإصدار 7. يوضح الشكل مقارنة بين نموذجين للكتلة.

الشكل 8. نموذجان للكتلة.

هناك عدد كبير من المستندات القديمة المتاحة عبر الإنترنت والتي تم إنشاؤها في نموذج الكتلة القديم، والذي يسمى أيضًا "وضع التوافق". لذلك لا يستحق شطبها.

من المهم أن نعرف: إذا لم يتم تحديد الوثيقة، ثم تقوم المتصفحات بالتبديل إلى وضع التوافق.

خاصية حجم الصندوق

عند حساب عرض الكتلة، قد تنشأ مشاكل معينة عند استخدام النسبة المئوية كوحدة قياس في خاصية العرض. الفائدة هي القيمة النسبية، وهذا يجعلها غير متوقعة إلى حد ما، خاصة إذا تم تحديد المساحة المتروكة والحدود بوحدات مطلقة. ونتيجة لذلك، فمن الممكن أن يتجاوز العرض الإجمالي للكتلة عرض نافذة المتصفح، وهذا يؤدي إلى ظهور شريط التمرير الأفقي.

لن نخوض في جوهر المشكلة بالتفصيل، فهذا ليس مستوى هذه المقالة. هنا سأشير فقط إلى أن النظام القديم قد يكون مفيدًا في بعض الأحيان. لتمكين تغيير خوارزمية نموذج الصندوق في CSS3، تم تقديم خاصية مفيدة لتغيير حجم الصندوق. عند تعيين مربع الحدود، يبدأ عرض المربع في تضمين الهوامش والحدود، ولكن ليس الحشو. وبالتالي، من خلال تعيين قيمة خاصية box-sizing، border-box، يمكننا ضبط عرض الكتلة كنسبة مئوية وتحديد خصائص الحدود والحشو للقيمة التي نحتاجها بأمان، دون خوف من أن يتغير عرض الكتلة .

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

يوضح الشكل 9 جميع الخصائص التي تشكل الارتفاع الإجمالي للكتلة المشار إليها بالخط الأسود المنقط.


الشكل 9. ارتفاع الكتلة.

على الرغم من أن صيغة تحديد ارتفاع الكتلة وعرضها متشابهة جدًا من حيث المبدأ، إلا أن هناك اختلافات كبيرة في هذا الصدد عند العمل مع الكتل.

دعنا ننتقل مباشرة إلى مثال وننظر إلى حالة تم فيها ضبط خصائص العرض والارتفاع للكتلة على 200%.

نموذج صندوق CSS



يتم أيضًا إعطاء الكتلة لون خلفية لإظهار مساحتها. وهنا ما يبدو:

الشكل 10. عمل المثال رقم 6.

نرى أنه تم تشكيل شريط تمرير أفقي، حجمه ضعف حجم نافذة المتصفح، أي. عرض الكتلة دائمًا يساوي 200% من العنصر الأصلي - نافذة المتصفح. ولكن لا يوجد مثل هذا التأثير في العمودي. استخدام النسب المئوية لتحديد الارتفاع ليس له معنى، لأن الارتفاع الافتراضي للارتفاع الأصل غير موجود ويجب تحديده.

نموذج صندوق CSS

كتلة بعرض = 200% وارتفاع = 100%.


هنا العنصر الأصلي لـ

- تيجو ، تم ضبط الارتفاع على 50 بكسل، والارتفاع لـ
تم ضبطه على 100%. أي أن هذه العلامة يبلغ ارتفاعها 50 بكسل.

الشكل 11. عمل المثال رقم 7.

يمكن ملاحظة أن المساحة الملونة #F3F3D6 قد زادت. إذا تم تقليل ارتفاع نافذة المتصفح بشكل أكبر، فسيظهر شريط تمرير رأسي، وهو ما لم يكن الحال في المثال السابق.

إذا كان في هذا المثال، ولكن كيف يمكنني تعيين معلمة الارتفاع للكتلة كنسبة مئوية ويعمل. حاول تغيير المثال السابق وضبط خاصية height لمحدد الجسم على 100%. هذا المثال لن يعمل. لماذا؟ لأنه للعلامة يتم تحديد الارتفاع بالنسبة إلى الأصل - العلامة ، وهناك لم يتم تحديد الارتفاع. إذن 100% من لا شيء يساوي لا شيء. لحل هذه المشكلة عليك كتابة النمط التالي:

نموذج صندوق CSS

كتلة بعرض وارتفاع = 200%.


فقط عن طريق ضبط الارتفاع على 100% للعلامات و سنكون قادرين على ضبط الارتفاع بالنسبة المئوية للعلامة

وسوف تعمل.

الشكل 12. عمل المثال رقم 8.

هناك شيء آخر يجب أخذه في الاعتبار عند العمل باستخدام ارتفاع الكتلة وهو أنه إذا تجاوز المحتوى حجم الكتلة، فإنه يتجاوز الكتلة. فيما يلي مثال على هذا الرمز:

نموذج صندوق CSS

لقد مرت آلاف السنين. لقد توقفت الآلية المصممة للعمل إلى الأبد. تضررت أنظمة دعم الحياة.



يوضح المثال أن النص قد تجاوز حدود الكتلة.

الشكل 13. عمل المثال رقم 9.

من السهل جدًا تجنب ذلك - فقط لا تقم بتعيين ارتفاع المحتوى (الارتفاع). ومع ذلك، في بعض الأحيان تحتاج إلى تحديد بدقة ارتفاع الكتلة. في هذه الحالة، يمكنك استخدام خاصية overflow مع القيمة auto . ستقوم هذه الخاصية بإنشاء شريط تمرير في الكتلة إذا تجاوز حجم المحتوى حجم الكتلة.

لنضيف خاصية overflow إلى نمط المثال رقم 9 مع القيمة auto وستكون النتيجة هكذا:

الشكل 14. خاصية التجاوز مع القيمة auto.

تحتوي الخاصية overflow على قيمة أخرى يمكن استخدامها أيضًا لضبط ارتفاع الكتلة - وهي مخفية. تخفي هذه القيمة ببساطة كل ما لا يتناسب مع أبعاد الكتلة المحددة.

الشكل 14. خاصية التجاوز مع القيمة المخفية.

الحد الأدنى والحد الأقصى لعرض العنصر

في هذه المقالة، من المناسب أيضًا تذكر خاصيتي min-width وmax-width، اللتين تحددان الحد الأدنى والحد الأقصى لعرض العنصر، على التوالي.

تعمل الخاصية min-width على النحو التالي: إذا قام المستخدم بتغيير حجم نافذة المتصفح، فإن عرض الكتلة لا يصبح أقل من الحد الأدنى، وفي هذه الحالة يظهر شريط التمرير. سيعتمد عرض العنصر على قيم خصائص العرض وأقصى عرض وأدنى عرض.

يوضح الجدول كيفية قيام المتصفحات بحساب عرض الكتلة عند استخدام هذه الخصائص.

طاولة 1. عرض العنصر
قيم الممتلكات عرض
الحد الأدنى للعرض < عرض < أقصى عرض عرض
الحد الأدنى للعرض > عرض > أقصى عرض الحد الأدنى للعرض
الحد الأدنى للعرض > عرض < أقصى عرض الحد الأدنى للعرض
الحد الأدنى للعرض < عرض عرض
الحد الأدنى للعرض > عرض الحد الأدنى للعرض
الحد الأدنى للعرض > أقصى عرض الحد الأدنى للعرض
الحد الأدنى للعرض < أقصى عرض أقصى عرض

خاصية max-width - تحدد الحد الأقصى لعرض العنصر. مثال على استخدام خاصية max-width:

نموذج صندوق CSS

لقد مرت آلاف السنين. لقد توقفت الآلية المصممة للعمل إلى الأبد. تضررت أنظمة دعم الحياة.

نظر الغريب حوله. كانت هناك صحراء في كل الاتجاهات حتى الأفق.


الحد الأدنى والحد الأقصى لارتفاع العنصر

وبالمثل، هناك خصائص لتعيين الحد الأدنى والحد الأقصى لارتفاع العنصر: min-height و max-height .



مقالات ذات صلة
أنواع
  • التعليمات
  • مقارنة
  • مفتاح مجاني
  • المعاينة الفنية
  • أخبار
مقالات شعبية
مقالات جديدة