تنظيم ملاحظات الدراسة اليومية في نمط تصميم HTML

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

ملاحظات تعلم نمط تصميم HTML

لقد تعلمت هذا الأسبوع بشكل أساسي أنماط تصميم HTML ، والآن سألخص محتوى التعلم الخاص بي على النحو التالي:

واحد. تعلم نموذج الصندوق

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

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

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