أهلًا. اليوم
سنتحدث عن نموذج المربع (الصندوق). إن تعريف نموذج المربع (الصندوق)
يمثل حقًا مفهومًا عامًا لل CSS يساعدك على تحديد حجم العنصر الخاص بك ووضعه
في المكان الذي تريده. إذًا، أول شيء
سنتحدث عنه هو الارتفاع والعرض. أعلم أنني قد استخدمت هذا بالفعل قليلاً
في بعض محاضراتي الأخرى، لكنني أردت أن أكون محددةً
جدًا في كيفية عمله. وأول إحدى الأشياء التي تكون
بحاجة إلى معرفتها هى أن ارتفاع وعرض أي عنصر مضمن
هو المحتوى نفسه. لذا، إذا كان لديك رابط، فإن ارتفاع وعرض هذا الرابط هو فقط ذلك النص
الخاص بالجزء القابل للنقر لهذا الرابط. إن العناصر الغير مضمنة، وكل ما
يمثل كتلاً، ,والكتل المضمنة وأشياء من هذا القبيل يمكن أن يكون لها خصائص الطول والعرض،
وقد رأينا هذا في محاضرة العرض. لذلك إن كان لديك أى وقت عنصرًا
مضمنًا، وقمت بإعطائه ارتفاعًا (طولاً) وعرضًا، فإن المتصفح سيقوم فقط بتجاهله. أما فيما يتعلق بأي شيء آخر، سيعمل المتصفح بشكل رائع،
ويمكنني المضي قدمًا وتغيير ذلك من أجلك. كما أن هناك بعض الأشياء الأخرى التي يتعين علينا أن
نأخذها بعين الاعتبار إذًا، عندما تكون لدينا عناصر، هي كيفية ملاءمتها للشاشة. وإحدى الطرق السهلة لك لوضع الأشياء بشكل استراتيجي على
صفحتك، هى أن تقوم بوضع إطارات حولها. حتى وإن كنت لا تريد هذه الإطارات
لاحقًا في نهاية ما تنتجه من عمل، أرى أن التركيز على فكرة
تحديد المساحة التي يشغلها عنصر ما أمر مفيد للغاية. لذا فإن أى عنصر يمكن أن يكون له إطارًا حوله
سواء كان عنصرًا مضمنًا، أو كتلة أو كتلة مضمنة. كما تحدد خصائص هذه الإطارات
تصميم الإطار الذي تريده، وعرض ولون الإطار. إنه أمر بسيط للغاية. إن شكل الإطار هو الشيء الوحيد
الذي عليك تحديده. إذا لم تحدد لونًا،
أو إن لم تحدد عرضًا، فليس هناك مشكلة. سيكون اللون الافتراضي هو الأسود و
ربما بكسل واحد. لكن عليك أن تقرر
نوع النمط الذي تريده. لذا، فقد أخبرت كافة طلابي،
بأنني أريد منهم في هذه الحالة بأن يقوموا بعمل إطار محكم واحد بكسل حولهم، ولا
يمكنني أن أخبركم باللون لأنني لم أصل بعد لهذا الحد من العبقرية،
ولكنني أعتقد أنه سيكون لونًا أزرقًا. وبخصوص نمط الإطار الذي تريد تحديده،
نجد أن معظم الناس يستخدمون دائمًا إطارات محكمة، وهناك الكثير من الأنماط المختلفة. يمكنك استخدام الإطار المنقط والمتقطع،
,والسميك، والمخفي، والداخلي، والخارجي. هناك الكثير من الأشياء المختلفة
التي يمكنك القيام بها فالأمر يتعلق فى حقيقة الأمر بنوع الاختلاف النمطي
للجزء الخاص بك. ولا أعير اهتمامًا كبيرًا لذلك،
لأنني اعتدت فقط على استخدام الإطارات المحكمة. بمجرد أن تقرر نوع النمط الذي تريده ،
يمكنك تحديد العرض واللون. لذلك عندما يحين وقت ضبط العرض
إذا قررت القيام بذلك، يمكنك ضبطه بعدد من بكسل أو يمكنك استخدام
الكلمات الرئيسية : رفيعة أو متوسطة أو كبيرة. عندما يحين وقت ضبط اللون، يمكنك أن تفعل نفس الشيء
الذي كنا نفعله طوال الوقت. يمكنك فقط استخدام الاسم ،
مثل الأزرق ، أو قيمة RGB أو القيمة السداسية، أو ما إلى ذلك. كما
تعلم إنها أيضًا دقيقة. لذا يمكن أن تأخذ فقط لون
أي شيء تحتها. لذلك عندما يحين وقت تحديد
حجم الإطار الخاص بك الذي تريده يمكنك التحديد بأربع طرق مختلفة. في المثال الأول،
يمكنك فقط إعطائها رقمًا واحدًا في هذه الحالة، ثلاثة بكسل. وما ستفعله، هو وضع إطار ثلاثي البكسل
حول العنصر بأكمله تمامًا كهذا. إذا قررت إعطائه قيمتين ، فهل
ستقوم بإنشاء إطار ثلاثي البكسل في الأعلى وفي الأسفل، وإطار عشرة بكسل على اليسار واليمين. هذه طريقة شائعة حقًا لإعداد وضبط
الأشياء عند القيام بإنشاء الإطارات وخصائص أخرى ،
حيث أنه من الرائع اختصارها ولا يزال من السهل جدًا فهمها
وقراءتها. إذا أعطيته ثلاث قيم ،
فسيكون الأمر أصعب قليلاً ، ودائمًا ما أأتعثر في ذلك، لذا سأقوم
بإبراز الصورة فقط للتأكد من ذلك. القيمة الأولى دائمًا هي الأعلى. ينبغي أن يكون إطارك العلوي 3 بكسل. 10 بكسل لليسار واليمين،
و 20 بكسل للأسفل. آخرها عندما تعطي أربع قيم ،
وعندما تعطي أربع قيم فهذا يمثل في الأساس أعلى ،
يمين ، أسفل ، يسار. وهذا سيجعل للإطارات
أربع قيم مختلفة. لذلك يستخدم معظم الأشخاص إما القيمة الواحدة، والقيم الأربع، و
يستخدم عدد قليل منهم القيمتين أيضًا. في الغالب، وأحد الأسباب التي من أجلها أعرض عليكم
هذا هى أنه قد يكون مخيفًا حقًا وأنت تتساءل عما يفعله الناس
أثناء قيامهم بذلك. وهذا ما يفعلونه. إنهم يستخدمون الاختصارات حتى
يتحرك الإطار إلى اليمين، أو إلى اليسار، أو أن يتجه إلى الأعلى أو إلى الأسفل. فالهامش يمثل بشكل أساسي المساحة
التي تكون خارج إطارك. فعندما أقول على سبيل المثال بينك
وبين جارك أو أو ربما ما يجب أن أقوله حقًا هو تلك المسافة بين العنصر والعنصر المجاور له. لذا فهو يعطيك تلك المساحة التي تريدها كي
لا تسمح لأي شخص أن يلمسك. وبالنسبة للهوامش،
كلما صممت هامشًا إيجابيًا فأنت كما لو كنت تقصد في الأساس،
تحرك العنصر إلى اليمين أو إلى الأسفل. إذا صممت هامشًا سلبيًا، فأنت في الواقع كما لو كنت
تقترب من جارك. أنت تجعلها تتحرك لليسار أو لأعلى الحواشي مشابهه جدًا من حيث المفهوم للهامش ولكن بدلاً من ذلك، تكون هذه المسافة بين
العنصر وإطاره. إنه يمنحها
مساحة إضافية صغيرة بالداخل. قد تعتقد أن هذا قد
أثر سلبًا على النص غالبًا في بعض الحالات. وبنفس الطريقة،
كلما كان لديك قيم موجبة للحواشي، فأنت تحركها
للخارج من العنصر. وتمنحها مساحة أكبر. إذا أعطيته حواشي سالبة، فأنت تقوم في الواقع
بتحريك الإطار بالقرب من العناصر الموجودة
بجانبها أو ربما في الأعلى. لذا مع الهامش والحواشي، كل ما
عليك فعله هو إعطاء قيمة عددية. ستعطيه على سبيل المثال
3 بكسل أو 10%. لا تعطيه أي نوع من الألوان. ستكون دائمًا شفافة. وستظل الحواشي دائمًا بنفس
لون العنصر وستظل الهامش دائمًا بنفس لون،
الأصل ، وربما هيكل الصفحة. فهم تمامًا مثل الإطارات،
يمكن تعريفهم بإعطاء قيم من 1 إلى 4. لذا إذا وضعت هامشًا بثلاثة بكسلات ، فسيكون
هامشًا بمقدار ثلاثة بكسل حول كل شيء. إذا قلت مساحة الحواشي، عشرة بكسل، خمسة بكسل،
سيتيح لكل هذا أن يكون ليك  أعلىٍ، وأسفل، ويسار، ويمين. لذا فدعوني أريكم صورة سريعة
لما أتحدث عنه. في هذه الحالة،
أعرض لكم هنا نصي، والذي يعد هو العنصر الفعلي الخاص بي. لقد ذكرت أن هذا هو ما أريد الاستمرار فيه. الأزرق هو لو الإطار الذي يحيط بالنصر الخاص بي. والأصفر هو لون الحواشي. إنها تلك المسافة بين نصي والإطار،
واللون البرتقالي هو لون الهامش ما تقوله، هو أن
لا تضعني بجانب أى شيء اّخر. فلتعطني تلك المساحة الكبيرة حول نفسي. لذا فلتعطيك تلك المساحة القدرة على أن تتحرك فقراتك لأسفل. قد تتحرك عناصر التقسيم الخاصة بك لأسفل ثم لأعلى. لذا، فقم فقط بممارسة ذلك. وبينما تمارس أكثر وأكثر، ستعرف أكثر أيها هوامش
أيها حواشي. إحدى الأشياء التي تحتاج إلى فهمها
عندما تقوم بعمل الحواشي والإطار، والهامش، وكافة هذه الأشياء هو أن
HTML يخبرك بأن الارتفاع والعرض الخاصين بك تم إضافتهما. وهذا يعني أنك إن قررت أنك تريد
توسيع عرض العنصر الخاص بك حتى 200 بكسل،
ينبغي عليك أن تضع في الحسبان حجم كافة الجوانب و
الخصائص الأخرى. إذًا، ففي هذه الحالة، فجزء من العرض
سيكون الهامش،بالإضافة إلى الإطار، بالإضافة إلى الحواشي،
بالإضافة إلى العنصر الفعلي نفسه. وبالتالي فإن كل هذا
يشكل ما نسميه العرض الفعلي للعنصر الخاص بك. وسيكون هذا مهمًا عندما تقوم
بالنظر إلى صفحتك وتصميمها وتحاول أن تقرر المسافة
التي تريد أن يشغلها مل عنصر. لذا إذا نظرنا إلى هذا المثال الموجود هنا،
حيث يكون العرض 100 بكسل، نجد أن الحواشي 10 بكسل،
والهامش 5 بكسل، والإطار 1 بكسل. اّمل أن تقوم الاّن
بالتفكير في تلك الحسبة، وأعدك ألا أعطيك المزيد من العمليات الحسابية أكثر
من ذلك لمعرفة مقدار العرض الذي يحتاجه هذا العنصر،
أو ما تحتاجه عناصر التقسيم بالفعل في صفحتك. وفي هذه الحالة يكون العرض 132 بكسل. 100 بكسل زائدة، 10 بمسل زائدة، 5 بكسل زائدة،
واحد بكسل زائد، واحد بكسل زائد، خمسة بكسل زائدة، عشرة بكسل زائدة. تم إضافة كل منهم. وبتلك الطريقة، يكون الارتفاع هو الارتفاع الخاص بك
بك مضافًا إليه الحواشي العليا والسفلى والهامش العلوي والسفلي، والإطار العلوي
والسفلي. حسنًا، عندما نتحدث عن الهامش، أود فقط أن أطرح تلك
الشريحة على الرغم من أنه لا يتوافق مع العديد من الأشياء الأخرى
التي كان من الضروري التحدث عنها. ولكن لأن الهامش
هام جدًا عندما تريد توسيط
العناصر في الصفحة. عندما نريد توسيط النص،
يمكننا فقط محازاة النص لوسط الصفحة، وبدا كل شيء حقًا على ما يرام. لكنك عندما تريد توسيط العناصر،
فالأمر يكون صعبًا قليلاً. ولذا فإن الطريقة الافتراضية
للقيام بذلك هي استخدام الهامش الصفري التلقائي. لذا إذا تذكرت، فالصفر الأول
يرمز إلى الأغلى والأسفل، وبالتالي لن يكون هناك
حقًااهتمامًا بذلك حقًا. فخاصية التلقائية هذه هى التي تحركه يسارًا ويمينًا. والاّن لن يتم هذا إلا إذا
تم عرض العنصر: الكتلة، إذا لم يتم تحريك العنصر، يعني ذلك أن
العنصر ليس له عرض تلقائي، مما يعني أنك قمت بتحديده. ويشير هذا الاّخير إلى حالة إذا عدم ثبات
وضع العنصر بشكل مطلق. لم أتطرق الاّن لتغطية وضع العناصر بعد. لذا فإن الخبر السار هنا هو طالما أنني لم أقم
بالتطرق إلى هذا، فلن أطلب منك أن تتعامل معه، ولا داعي
للقلق بشأن هذين الأمرين. ولكن إن حاولت وضع عناصرك
في الصفحة، عد إلى هذا الجزء إن احتجت لذلك، وقم بالمراجعة للتأكد
من فهمك لكافة هذه الخصائص بشكل سليم. وهذه هى أفضل طريقة لتوسيط
العناصر في الوقت الحالي. أخيرًا، في سياق حديثنا عن هذا، أريد
أن أضيف خيارًا اّخرًا، يطلق عليه تحجيم المربع. ونعني بتحجيم المربع أخذ بعض
الأجزاء من الارتفاع الإضافي والعرض الإضافي. والخيارات المتاحة أمامك
هي صندوق (مربع) المحتوى، صندوق محتوى تحجيم المربع، وهذه مجرد إضافاتك الافتراضية. عليك أن تتذكر
مقدار المساحة التي تستخدمها. والشيء التالي يطلق عليه مربع الإطار. ويأخذ مربع الإطار في الواقع العرض،
المحتوى، الحواشي، وكافة الإطارات في الاعتبار. لذا، إذا فرضت أنك تريد
أن يكون العرض 200 بكسل، فلن يجعل ذلك في واقع الأمر
العنصر 200 بكسل. سيجعله 200 بكسل
مطروحًا منه مساحة الحواشي والإطار. وإحدى الأشياء الأخيرة التي ينبغي أن نتذكرها
هى أننا يجب أن نأخذ في عين الاعتبار الحواشي والإطار، ولا نأخذ في الاعتبار الهامش. ختامًا، ومن إحدى الأشياء التي سأعرضها عليكم
في هذا المثال خلال ثانية فقط عدة طرق يمكنكم من خلالها ضبط ارتفاع
وعرض العناصر المختلفة. وهناك طريقتان شائعتان لذلك. إحداهما تسمى الطريقة المطلقة، عندما تكون ضبط عنصر
بحجم معين. وهى أن تعبر عن رغبتك في الحصول على عدد كبير من البكسلات
أو من المليمترات أو عدة سنتيمترات. البكسل هو الطريقة الشائعة لقياس الحجم. والنوع الاّخر للقياس يطلق السلس. فهو يحدد الحجم استانادًا على العناصر المحيطة
أو العناصر الأصلية. لذا يمكن استخدام أشياء كالنسبة المئوية. يمكنك استخدام VW والتي تعني عرض منفذ العرض ، وال vh والتي تعني
ارتفاع منفذ العرض. يمكنك استخدام أيضًا أشياءً مثل
em، Rem وهى غير شائعة الاستخدام، ولكنها قامت بضبط الحجم
مقارنة بالحجم الأصلي. لذا فلنمضي قدمًا ونلاحظ
المثال الذي أطرحه فيمكننا أن نجربه قليلاً. لن يكون هذا كافيًا لتوضيح
كل ما يمكننا القيام به، ولكن أتمنى أن نبدء ها هاو ملف
html بسيط جدًا. ها هو الجانب الأيسر والجانب الأيمن. ولكن كما ترون، ليسوا على
اليسار ولا على اليمين الاّن. ولكنهما فقط فوق بعضهما البعض. لذا فأول شيء أريد أن أعرفه هو
إذا كان بإمكانك وضع هذه العناصر بجانب بعضها البعض. سيتعين عليك
الجمع بين العرض والارتفاع والعرض والحواشي. لذا، دعونا نقم بذلك. لذا فهنا في ملف ال CSS الخاص بي، يمكنك على الفور رؤية
ما قمت به في الخلفية. والاّن، عندما تريد أن ترى الأشياء بجانب
بعضها البعض، عليك أن تمنحها عرضًا، لأنها تشغل الاّن 100%. قد تكون إحدى الخيارات أماك هو المضي قدمًا،
والقيام بالضبط لنوع معين من بالكسلات. ربما قل 200 بكسل،
و 200 بكسل وترى ماذا قد يحدث، ومعرفة ما إذا كان يعمل. ومشكلة القيام بذلك، كما قمت
بحذف تعليقي في درس البرمجة الخاص بي، هو أنهم كأشخاص يستخدمون أحجامًا مختلفة من المتصفحات قد تكون
أرقامًا كبيرة جدًا او صغيرة جدًا. لذا فما فعلته هو أنني مضيت قدمًا وقمت
بضبط العرض الخاص بي حتى 48%. ,والاّن القيام بذلك رائعًا حقًا، و
سأخرج عن هذا السطر لمدة ثانية واحدة، لأن معظم الناس لديهم
فكرة أنك تريد ضبط العرض لمقياس أصغر. ما ينسونه، هو أنهم على الرغم من
أنهم لم يأخذوا سوى 48%، سأجعله
في الحقيقة شيئًا صغيرًا جدًا. 20%، لن يكونوا بجانب بعضهم البعض. لذا عليك أن تتذكر أنك بحاجة
إلى اللجوء تلك القياسات السلسة. فلنعد هنا، سأعيدها
إلى 40%. حتى وإن قمت بالتقليل، حتى تخبر المتصفح أعلم أن هذا محظورًا، ولكني
سأغيره إلى كتلة مضمنة، لن يسمح أبدًا للعناصر الكتل أن تكون لجانب بعضها البعض. لذلك، عليك أن تتذكر أن تقوم بضبط
كل من العنصرين. لذا، فلنمضي قدمًا ونقوم بالحفظ وإعادة التحميل. وهكذا يمكنك أن ترى أنني قد مضيت
قدمًا وقمت بضبط العرض الخاص بي. وقمت بحظر خاصية العرض الخاص بي. وانتهيت من ضبط الحواشي. ومن الإطار، ومن بعض الهوامش. لذا، فاّخر شيء سوف أقوم به فقط لأنتهي
من جعلكم تروا ماذا يحدث، هو أنني سأمضي قدمًا وسأغير هذا حتى 50%، لأن هذا
حقًا خطأ مشترك يقع فيه الناس. يقولون با إلهي،
أنا أريد شيئين بجانب بعضهما البعض. سأجعل كلاً منهم 50%. لا تنسي عندما تفعل ذلك أن أنه لن يعمل لأن نسبة الخمسين بالمائة
هذه قبل أن تذع الإطار في الحسبان. لذا تأكد من أنك تستغل
كافة هذه الأشياء، من أنك تستغل الهامش، من أنك تستغل
الحواشي، من أنك تستغل الإطار. لأن هذه هى الطريقة التى ستحصل بها على الأشياء التي
تعمل بالتبديل والتغيير والتعديل. لذلك دعونا نمضي قدما و نراجع. وعندما يحين الوقت،
ابدأ بتنفيذ كل هذه الأفكار، نموذج المربع الخاص بك مع
الحواشي الخاصة بك، والمحتوي، والهامش، وهكذا، فأنت تحتاج حقًا إلى تصميم الرسومات
على الورق أولاً، لأنه من الصعب تغيير الأشياء بعد أن تكون قد قمت بإنشاء
الخطوط العريضة لها، أليس كذلك؟ لذا فقم بالتصميم أولاً، ثم قم بالبرمجة بعد ذلك. والشيء الثاني الذي ينبغي عليك
أن تفعله هو أن تستخدم نموذج المربع من أجل تقليل تعقيد عملية البرمجة. أو على الأقل التعقيدات
الخاصة بك والتي تتعلق وضع العناصر في المكان المناسب والعمل على حلها. أخيرًا، بغض النظر عما تفعله، عليك أن تتذكر أن الهامش
يجب أن تضعه دائمًا في الاعتبار. قد يكون الأمر شاقًا في البداية عندما تحاول
ترتيب صفحتك، وجعل الأمور تسير بالضبط
حيث تريدها، لم نتحدث حتى عن تحديد الموقع حتى الاّن، وهذا يعتبر عنصرًا اّخرًا. لذا فالاّن، تدرب على هذه الأشياء بشكل مبسط. واستخدم عنصر الفحص للتعامل معها، وعليك ألا تغير
ترميزك كثيرًا. حتى تتمكن من الحصول على الأشياء فقط
بالطريقة التي تريد أن تبدو بها. ولا تقلق،
فكلنا نقع في أخطاء. ونحن جميعا في هذا معا. ولكني أعتقد أن
صفحتك تقرب أكثر وأكثر لتصبح شيئًا تقوم بنشرة
حقًا على شبكة الإنترنت. أحسنت.