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

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

إنشاء كتلة مع ارتفاع يحتوي على نسبة مئوية معينة من عرضها

  1. إنشاء بنية HTML من 2 كتل:
    الوحدة الأولى لديها 2 فصول. باستخدام فئة العناصر المستجيبة للعنصر، قم بتثبيت وحدة المواقع النسبية. يجب أن يتم تنفيذ ذلك بحيث كانت كتلة 2 (التي سيكون لها تحديد المواقع المطلقة) بالنسبة لها. بالإضافة إلى ذلك، يتم استخدام هذه الفئة أيضا لإضافة عنصر الزائفة قبل محتويات العنصر المقابل (استجابة العنصر): قبل. سيقوم هذا العنصر بتعيين الارتفاع الضروري للمكتبة المتعلقة بعرضه باستخدام أعلى خصائص CSS. خدعة هذه الطريقة هي أنه إذا تشير خاصية الحشو إلى القيمة ليس في البكسل، ولكن في المئة، سيتم حسابه من قبل المتصفح بالنسبة لعرضهوبعد وبالتالي، يمكنك الحصول على كتلة مع ارتفاع ضروري. الإجراء التالي هو تحديد المواقع المطلقة للكتلة ومحاذاة ذلك في الكتلة الأولى.
  2. أضف إلى الصفحة التالي رمز CSS: ؛ / * المحتوى القطري العنصر * / العرض: 100٪؛ / * عرض العنصر * /) .ITEM-16BY9 (الحشو-الأعلى: 56.25٪؛ / * (9:16) * 100٪ * /) .item \u003e .مكونت (الموقف: المطلق؛ / * عنصر الموضع المطلق * / / * موقف الموضع * / الأعلى: 0؛ اليسار: 0؛ اليمين: 0؛ أسفل: 0؛) / * إذا لزم الأمر (كتل تحتوي على فئات بيانات) * / .ITEM -4BY3 (أعلى الحشو: 75٪؛ / * (3: 4) * 100٪ * /) .ITEM-2BY1 (الحشو-الأعلى: 50٪؛ / * (1: 2) * 100٪ * /) .ITEM -1BY1 (أعلى الحشو: 100٪؛ / * (1: 1) * 100٪ * /)

تطبيق التكنولوجيا أعلاه عند إنشاء Buotstrap Carousel

إذا لم تكن معتادا على Bootstrap وترغب في معرفة ما هو عليه، فيمكنك استخدام المقالة مقدمة إلى Bootstrap.

النظر في مثال سيستخدم فيه هيكل HTML أعلاه ورمز CSS لعرض شرائح Bootstrap Carousel.

كصور، سوف نستخدم الملفات التالية:

  • carousel_1.jpg (العرض \u003d 736px، الارتفاع \u003d 552px، نسبة العرض إلى الارتفاع (ارتفاع العرض) \u003d 1.33)؛
  • carousel_2.jpg (العرض \u003d 1155PX، الارتفاع \u003d 1280 بكسل، نسبة العرض إلى الارتفاع (ارتفاع العرض) \u003d 0.9)؛
  • carousel_3.jpg (العرض \u003d 1846px، الارتفاع \u003d 1028px، نسبة العرض إلى الارتفاع (ارتفاع العرض) \u003d 1.8)؛
  • carousel_4.jpg (العرض \u003d 1140px، الارتفاع \u003d 550 بكسل، نسبة العرض إلى الارتفاع (ارتفاع العرض) \u003d 2.07)؛
  • carousel_5.jpg (العرض \u003d 800PX، الارتفاع \u003d 600PX، نسبة العرض إلى الارتفاع (ارتفاع العرض) \u003d 1.33)؛

سيتم تعيين الصور كخلفية. سيسمح لك ذلك بالاستخدام في صور Bootstrap 3 Carousel بنفس نسب الارتفاع.


أتش تي أم أل وضع علامة كاروسيل:

CSS كود كاروسيل:

البند المستجيب (الموقف: قريب؛ / * تحديد المواقع النسبية * /) .ITEM- استجابة: قبل عرض العنصر ككتلة * / المحتوى: ""؛ / * محتوى العنصر الزائفي * / العرض: 100٪؛ / * عرض عنصر * /) .ITEM-16BY9 (الحشو-الأعلى: 56.25٪؛ / * (9:16) * 100٪ * /) .ITEM استجابة\u003e .مكانية (الموضع: مطلق؛ / * عنصر الموضع المطلق * / / * الموقف الموضع * / الأعلى: 0؛ اليسار: 0؛ اليمين: 0؛ أسفل: 0؛ خلفية الحجم: غطاء! مهم؛)

آخر تحديث: 04/21/2016

يتم تعيين أبعاد العناصر باستخدام خصائص العرض (العرض) والارتفاع (الارتفاع).

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

العرض: 150px؛ العرض: 75٪؛ الارتفاع: 15EM؛

بكسل تحديد العرض الدقيق والارتفاع. تعتمد وحدة القياس EM على ارتفاع الخط في العنصر. إذا كان حجم الخط للعنصر، على سبيل المثال، هو 16 بكسل، ثم 1 م لهذا هذا العنصر سيكون 16 بكسل. وهذا هو، إذا كان العنصر لديه عرض في 15EM، فسيكون ذلك بالفعل 15 * 16 \u003d 230 بكسل. إذا كان العنصر لا يحدد حجم الخط، فسيتم أخذه من المعلمات الموروثة أو القيم الافتراضية.

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

لديها عرض 75٪، ثم العرض الفعلي لهذه الكتلة
إنه 1000 * 0.75 \u003d 750 بكسل. إذا كان المستخدم يغير حجم نافذة المتصفح، وعرض عنصر الجسم، وبالتالي، فإن عرض كتلة DIV المضمنة سيغير أيضا.

تعمل القيم النسبة المئوية لعملية الارتفاع على غرار خاصية العرض، الآن يتم احتساب الطول فقط في ذروة عنصر الحاوية.

على سبيل المثال:

الأبعاد في CSS3.

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

الأبعاد في CSS3.

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

يجب النظر في حسابات مماثلة عند تحديد حجم العناصر.

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

    min-Width: الحد الأدنى للعرض

    ماكس العرض: أقصى عرض

    الحد الأدنى من الارتفاع: الحد الأدنى للارتفاع

    ماكس الارتفاع: الحد الأقصى للارتفاع

Min-Width: 200PX؛ العرض: 50٪؛ ماكس العرض: 300px؛

في هذه الحالة، يكون عرض العنصر 50٪ من عرض حاوية العنصر، لكنه لا يمكن أن يكون أقل من 200 بكسل وأكثر من 300 بكسل.

تجاوز كتلة العرض

تسمح لك خاصية تحجيم المربع بتجاوز الأبعاد المثبتة للعناصر. يمكن أن تأخذ واحدة من القيم التالية:

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

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

    العرض: 200 بكسل الارتفاع: 100px؛ الهامش: 10 بكسل؛ الحشو: 10 بكسل؛ الحدود: 5px الصلبة #CCC؛ لون الخلفية: #eee؛ حجم التحجيم: مربع الحشو.

    هنا، سيكون عرض المحتوى الحقيقي للمحتوى الداخلي للكتلة مساويا 200px (العرض) - 10 بكسل (اليسار - اليسار) - 10 بكسل (يمين الحشو) \u003d 180 بكسل.

    تجدر الإشارة إلى أن معظم المتصفحات الحديثة لا تدعم هذه الخاصية.

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

    العرض: 200 بكسل الارتفاع: 100px؛ الهامش: 10 بكسل؛ الحشو: 10 بكسل؛ الحدود: 5px الصلبة #CCC؛ لون الخلفية: #eee؛ تحجيم مربع: مربع الحدود؛

    هنا ستكون عرض المحتوى الحقيقي للمحتوى الداخلي للكتلة مساويا لعقد 200 بكسل (عرض) - 10 بكسل (غادر الحشو) - 10 بكسل (يمين الحشو) - 5 بكسل (عرض الحدود) - 5 بكسل (عرض الحدود ) \u003d 170px.

على سبيل المثال، نحدد كتلتين تختلف فقط مع قيمة خاصية تحجيم المربع:

الأبعاد في CSS3.

تعريف الحجم الفعلي في CSS 3
تعريف الحجم الفعلي في CSS 3

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

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

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

تين. 1. كتلة عنصر نموذج

1. ارتفاع العنصر

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

بناء الجملة

ص (الارتفاع: 100px؛)

2. عرض العنصر

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

بناء الجملة

P (العرض: 100PX؛)

3. ارتفاع وعرض العنصر المطلق

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

DIV (الخلفية: # 6A7690؛ الموقف: مطلق؛ أعلى: 0؛ أسفل: 0؛ اليسار: 50٪؛ اليمين: 0؛) / * في هذه الحالة، ارتفاع العنصر 100٪، العرض 50٪ من كتلة الوالد * /
تين. 2. ارتفاع وعرض العنصر المطلق

4. مسافات بادئة العنصر

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

إذا تم تحديد ثلاث قيم، على سبيل المثال، DIV (الحشو: 10PX 20PX 30PX؛)، ثم سيتم توزيعها بالترتيب التالي: القيمة الأولى هي المسافة البادئة العليا، والثاني هو المسافة البادئة اليمنى واليسرى، والثالث هو انخفاض المسافة البادئة.
إذا تم تحديد قيمتين، على سبيل المثال، DIV (الحشو: 10px 20px؛)، ثم أول واحد سوف المهمة المسافة البادئة العليا والسفلى، والثاني هو الصحيح واليسار.
قيمة واحدة، على سبيل المثال، DIV (الحشو: 10 بكسل؛)، ستترك نفس المسافة البادئة لجميع جوانب العنصر.

بناء الجملة

P (الحشو: 5px 10px 15px 10px؛)

4.1. المسافات البادئة على جانب واحد من العنصر

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

ص (الحشو - اليسار: 10 بكسل؛)

5. مجالات العنصر

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

إذا تم تحديد ثلاث قيم، على سبيل المثال، DIV (الهامش: 10PX 20PX 30PX؛)، ثم سيتم توزيعها بالترتيب التالي: القيمة الأولى هي الحقل العليا، والثاني - الحقل الصحيح واليسار، الثالث - الحقل السفلي.
إذا تم تحديد قيمتين، على سبيل المثال، DIV (الهامش: 10PX 20PX؛)، فستكون أولا مهمة الحقل العلوي والسفلي، والثاني هو اليمين واليسار.
قيمة واحدة، على سبيل المثال، DIV (الهامش: 10 بكسل؛)، ستقوم بتعيين نفس الحقول لجميع جوانب العنصر.

(الهامش: 0 السيارات؛) سوف يعمل فقط إذا تم تحديد عرض العنصر بوضوح.


تين. 3. الهامش: السيارات؛ لعنصر وضعف تماما

بناء الجملة

DIV (الهامش: 5PX 10PX 2PX 5PX؛)

5.1. الحقول على جانب واحد من العنصر

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

ص (هامش يسار: 10 بكسل؛)

6. حد العرض والارتفاع

كما تدعم CSS العديد من الخصائص المرتبطة بارتفاع وعرض عناصر موقد VEB: Min-Heighd، Min-Width، Max-Height و Max-Width. تتيح لك هذه الخصائص ضبط الحد الأدنى والحد الأقصى لقيمة عرض أو ارتفاع العنصر، وإعطاء العنصر القدرة على ملء المساحة المتوفرة. غالبا ما تستخدم الخصائص لتصميم صفحات الويب التكيفية. يتم استخدامه لجميع العناصر، باستثناء البنود الصغيرة والجدول. دائما ما تأتي بعد القاعدة الرئيسية، أي بعد تحديد عنصر الارتفاع أو العرض. غير موروث.

يمكنك تعيين الأبعاد التقليدية باستخدام وحدات واحدة من القياس، وقيود الأبعاد باستخدام وحدات أخرى، على سبيل المثال:

DIV (العرض: 400PX؛ ماكس العرض: 50٪؛)

سيكون للعنصر عرض 400 بكسل فقط إذا لم تتجاوز هذه القيمة 50٪ من عرض الحاوية، وإلا سيتم تقليل عرضه.



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

العرض

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

مجمعي السكني (
العرض: 400PX؛ / * عرض 400 بكسل * /

}
أو في المئة:

myblockpercent50 (
العرض: 50٪؛ / * عرض 50٪ من عرض الكتلة أو النافذة (إن لم يكن داخل الكتلة بعرض ثابت) * /
اللون: # F1F1F1؛ / * كتلة رمادية فاتحة * /
}
وفقا لذلك، نحصل على كتلة ستكون دائما نصف من الوالد.

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

مثال على التصميم التكيفيوبعد انظر، تغيير أحجام نافذة البرازيل:

هذا بالطبع، ركض إلى الأمام. ولكن يجب أن تفهم ما ولماذا تحتاج. نعم، ولمس نتيجة لطيفة)

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

منع (
ماكس العرض: 800PX؛
لون الخلفية: # F1F1F1؛ / * كتلة رمادية فاتحة * /
الحشو: 20px؛
}
سيتخذ كتلة مع البيانات ذات العرض الأصل 200 بكسل قيمة مناسبة، ولكن إذا كانت كتلة الأصل أكبر، على سبيل المثال، 1000 بكسل، فستتأخذ بالفعل أقصى عرض لها، أي 800 بكسل. وهذا يعني أنه سيزيد بينما لن يكون عرض كتلة الوالد 801 بكسل وأكثر من ذلك. بعد ذلك، ستكون كتلة الكتلة دائما الحد الأقصى المسموح به لعرض 800 بكسل.

ارتفاع

هذه الخاصية هي المسؤولة عن ارتفاع العنصر. يتم استخدام نفس نفس المناسبة ل CSS ككمية. في معظم الأحيان نفس الاهتمام والبكسل.

معلومات (
الارتفاع: 200 بكسل / * ارتفاع كتلة سيكون 200 بكسل * /
الحشو: 10 بكسل؛ / * كرر المسافات البادئة داخل الكتلة \u003d) * /
}
من المنطقي، في الارتفاع، يمكنك تحديد القيم الدنيا والحد الأقصى لقيم الارتفاع لعنصر خصائص الحد الأدنى والارتفاع، على التوالي.

معلومات (
ماكس الارتفاع: 360px؛ / * الحد الأقصى لارتفاع كتلة * /
الحد الأدنى الطول: 120 بكسل؛ / * الحد الأدنى لارتفاع كتلة * /
}
كما ترون، يمكن أن تكون العقارات، وغالبا ما تحتاج إلى استخدامها في زوج.
أو الجمع بين القيم:

محتوى (
الارتفاع: 100٪؛ / * سيكون الارتفاع دائما 100٪ * /
العرض: 760px؛ / * ولكن العرض ثابت 760 بكسل * /
}
إذا كان لديك أي أسئلة، اكتب في التعليقات!

شكرا للاهتمام! النجاحات في الأسوأ!)

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

ميزات حساب الحساب والارتفاع

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

كقيمة عرض، يمكنك أيضا استخدام وحدة EM، والتي تعاني عن نفس حجم نص النص، ولكن فقط في الوحدات التقليدية. على سبيل المثال، قمت بتثبيت حجم الخط 24px. ثم 1EM لهذا البند سيكون مساويا 24 هريا، وإذا حددت العرض: 2EM، فسيكون العرض 2 × 24px \u003d 48 بكسلوبعد إذا لم يتم تحديد حجم الخط، فسيتم تورثه.

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

يتم احتساب النسبة المئوية وعرض عنصر الطفل بناء على حجم الوالد

ما هو في العرض والارتفاع

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

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

لتأمين المعرفة، إظهار مثال. افترض أن لديك عنصر مع هذا النمط:

العرض: 200 بكسل هامش يسار: 15 بكسل؛ الهامش الحق: 15 بكسل الحشو - اليسار: 10 بكسل الحدود اليسار: 3PX الصلبة # 333؛

لحساب عرض العنصر الفعلي، سنقوم بإضافة إضافة:

عرض + هامش يسار + هامش الأيمن + الحشو-اليسار + الحدود اليسار \u003d 200px + 15px + 15px + 10px + 3px \u003d 243px (العرض الفعلي)

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

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

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



في الدرس التالي، سوف تتعلم كيفية تجاوز عرض العنصر باستخدام خاصية مثيرة ومفيدة للغاية.