معلومات نظرية مختصرة أشياء للذكرى

وصف

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

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

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

بناء الجملة

لغة البرمجة
XHTML

قيم

أي عدد صحيح موجب بالبكسل أو النسبة المئوية.

القيمة الافتراضية

العرض الأصلي للصورة.

HTML5 IE Cr Op Sa Fx

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

نص الفقرة الأولى

النص الثاني

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

لنقم الآن بإجراء التغيير الأول ونقوم بترميز عرض الفقرة الأولى (width:50px):

نص الأول

النص الثاني

بشكل عام، حدث ما كان متوقعًا - انخفض الحجم الأفقي إلى القيمة المحددة في width:50px، ولا يزال ارتفاع الفقرة يتكون بفضل height:auto (القيمة الافتراضية). ونتيجة لذلك، أصبح الأمر بحيث يمكن أن يحتوي على النص بأكمله.

لكن لنحدد الآن ارتفاع الحاوية باستخدام height:15px.

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

التجاوز يعني "تجاوز السعة" أو بمعنى آخر "تجاوز سعة المحتوى". يتحدث عما يجب أن يحدث للمحتوى إذا لم يتناسب مع المساحة (الحاوية) المخصصة له.

يحتوي Overflow على عدة قيم صالحة، ولكن القيمة الافتراضية هي مرئي (إظهار):

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

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

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

على سبيل المثال، إذا استخدمنا overflow:auto، فسنكون قادرين على التمرير على طول المحور فقط حيث لا يتناسب المحتوى مع حدود الحاوية:

نص الأول

النص الثاني

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

هناك أيضًا أشكال مختلفة لكتابة هذه القاعدة تتعلق بـ CSS3، ولكنها مدعومة من قبل جميع المتصفحات، مما يعني أنه يمكن استخدامها بأمان. أنا أتحدث عن خياري overflow-x وoverflow-y، اللذين يسمحان لك بضبط أو عدم ضبط التمرير على محاور فردية (x - أفقي، y - عمودي).

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

الارتفاع والعرض كنسبة مئوية - لماذا تحتاج إلى نوع Doctype؟

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

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

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

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

قد يبدو الأمر مختلفًا (اقرأ المزيد عن هذا في المقالة المذكورة أعلاه)، لكن هذا الخيار سيعمل دائمًا:

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

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

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

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

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

إذا قمنا بإزالة تعريف doctype من رمز المستند، فسنرى الصورة التالية:

بالنسبة لوضع المعايير التالية (يتم كتابة الإعلان في بداية المستند)، يجب عليك أولاً تعيين ارتفاع الحاوية (في حالتنا، بالنسبة لـ Div، ستكون الحاوية هي علامة Body) وبعد ذلك فقط المتصفح سوف يتعامل بشكل صحيح مع الارتفاع:100%:

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

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

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

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

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

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

أنت قد تكون مهتم

الموضع (المطلق والنسبي والثابت) - طرق تحديد موضع عناصر Html في CSS (قواعد اليسار واليمين والأعلى والأسفل)
تعويم ومسح في CSS - أدوات تخطيط الكتلة
الحشو والهامش والحدود - تعيين الحشو الداخلي والخارجي في CSS، بالإضافة إلى الحدود لجميع الجوانب (أعلى، أسفل، يسار، يمين)
تحديد المواقع باستخدام Z-index وقاعدة CSS Cursor لتغيير مؤشر الماوس
ما هو CSS وكيفية ربط أوراق الأنماط المتتالية بها وثيقة HTMLوبناء الجملة الأساسي لهذه اللغة
محددات العلامة والفئة والمعرف والمحددات العامة، بالإضافة إلى محددات السمات في CSS الحديثة تصاميم مختلفة للداخلية و روابط خارجيةعبر CSS
الأولويات في Css وزيادتها بسبب المهم ودمج وتجميع المحددات وأنماط المستخدم والمؤلف
العرض (كتلة، لا شيء، مضمّن) في CSS - اضبط نوع عرض عناصر Html على صفحة الويب
وحدات البعد (البكسل، Em، Ex) وقواعد الوراثة في CSS

مرحبًا، عزيزي القارئ.

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

قبل دراسة هذا الدرس راجع الدروس السابقة:

النظرية والتطبيق

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

وفي CSS لكل كتلة