يعد تخطيط موقع الويب أحد المهام الرئيسية للمطور. عندما ننشئ موقعا على الويب ، من المهم أن يتم ترتيب العناصر الموجودة على الصفحة بدقة وجمال. في بعض الأحيان يكون من الضروري تمديد الكتلة إلى العرض الكامل للشاشة ، وإنشاء تأثير ملء الشاشة أو تصميم عناصر خاصة على الصفحة.
هناك عدة طرق لتمديد كتلة إلى العرض الكامل للشاشة باستخدام كس. واحدة من أكثر الطرق شيوعا هي استخدام خاصية العرض بالقيمة المناسبة وتعيين العرض: معلمة الكتلة للكتلة. على سبيل المثال ، لتمديد كتلة بعرض 100٪ عبر عرض الشاشة بالكامل ، يمكنك استخدام رمز كس التالي:
شعبة {
عرض: كتلة;
العرض: 100%;
}
إذا كنت بحاجة إلى تمديد الكتلة أفقيا فقط ، يمكنك استخدام خاصية عرض كس وتعيين القيمة إلى احسب(100 ٪ — زب) ، حيث س هي قيمة المسافة البادئة التي تريد تركها على حدود الكتلة.
- طرق تمتد كتلة في كس
- باستخدام خاصية العرض: 100%;
- تطبيق خاصية النمو المرن
- تعيين خاصية الموقف: مطلق;
- باستخدام اليسار: 0 واليمين: 0 خصائص;
- تطبيق الحشو: 0 والهامش: 0 خصائص;
- باستخدام العرض: خاصية الشبكة;
- سؤال وجواب
- هل من الممكن أن تمتد كتلة إلى العرض الكامل للشاشة دون استخدام المغلق?
طرق تمتد كتلة في كس
يعد تمديد الكتلة إلى العرض الكامل للشاشة أحد المتطلبات الرئيسية عند إنشاء صفحات ويب حديثة سريعة الاستجابة. هناك عدة طرق في كس لتحقيق هذا الهدف. دعونا ننظر إلى الأكثر شعبية منهم.
باستخدام خاصية العرض
يسمح للكتلة باحتلال كل المساحة المتاحة أفقيا.
باستخدام عنصر زائف:: بعد
. تحتاج إلى إضافة التعليمات البرمجية التالية إلى كس:
.حاوية:: بعد {
عرض: كتلة;
المحتوى: "";
واضح: كلاهما;
}
سوف يستغرق العرض المتاح بالكامل من الشاشة.
باستخدام منهجية فليكس بوكس
يمكنك تحديد أن الكتلة يجب أن تشغل كل المساحة المتاحة. على سبيل المثال:
.حاوية {
عرض: فليكس;
فليكس-تنمو: 1;
}
سوف تمتد إلى العرض الكامل للشاشة من الحاوية الأم.
يعتمد اختيار طريقة تمديد الكتلة في كس على المتطلبات والميزات المحددة لصفحة الويب التي يتم تطويرها. استخدم الطرق المقدمة والتجربة لتحقيق النتيجة المرجوة.
باستخدام خاصية العرض: 100%;
طريقة واحدة لتمتد كتلة إلى العرض الكامل للشاشة باستخدام كس هو استخدام العرض: 100 ٪ الملكية؛. تحدد هذه الخاصية أن عرض الكتلة يجب أن يساوي 100 ٪ من عرض الأصل.
من أجل استخدام هذه الخاصية ، تحتاج إلى تعيين قواعد كس التالية:
- تعيين عرض كتلة الأصل الذي يقع كتلة الهدف ، كنسبة مئوية. على سبيل المثال:
- إذا كانت الكتلة الأصل داخل عنصر ، فيمكنك تعيين النمط التالي:
- الجسم {
- العرض: 100%;
- }
- إذا كان للكتلة أصل لها عرض معين ، فأنت بحاجة إلى تعيين هذا العرض كنسبة مئوية:
- .الأم {
- العرض: 80%;
- }
- اضبط عرض الكتلة المستهدفة على 100%:
- .الهدف {
- العرض: 100%;
- }
الآن ستشغل الكتلة المستهدفة العرض المتاح بالكامل من الأصل.
من المهم ملاحظة أنه في بعض الأحيان قد تكون هناك حاجة إلى أنماط إضافية للعرض الصحيح: على سبيل المثال ، إلغاء الهوامش أو دمج الكتل في سلسلة. قد تختلف الأنماط أيضا اعتمادا على المتطلبات المحددة للتصميم والتخطيط.
تطبيق خاصية النمو المرن
الخاصية فليكس تنمو هي واحدة من الأدوات الرئيسية لتمتد كتلة إلى العرض الكامل للشاشة باستخدام كس. يسمح لك بتحديد مقدار الكتلة التي يجب أن تمتد وفقا للكتل الأخرى داخل الحاوية.
يعد استخدام خاصية النمو المرن مفيدا بشكل خاص في المواقف التي يكون فيها من الضروري إنشاء تصميم تكيفي سيتم عرضه بشكل صحيح على شاشات بأحجام مختلفة.
لاستخدام خاصية النمو المرن ، يجب تعيين عرض خاصية كس: فليكس للحاوية الأصل. بعد ذلك ، يمكنك تعيين خاصية النمو المرن للعناصر الفرعية.
يتم تحديد قيمة خاصية النمو المرن كرقم يحدد مقدار الكتلة التي يجب تمديدها مقارنة بالكتل الأخرى. على سبيل المثال ، إذا كان كتلة لديها فليكس-تنمو:1 مجموعة الممتلكات ، وكتلة أخرى لديها فليكس—تنمو: 2 ، ثم الكتلة الثانية سوف تمتد مرتين.
ستشغل العناصر ذات القيمة العالية للنمو المرن مساحة أكبر في الحاوية. إذا كانت جميع العناصر الفرعية لها نفس قيمة النمو المرن ، فسيكون لها نفس العرض وستمتد على كامل العرض المتاح للشاشة.
تحديد الموقف: الملكية المطلقة;
إذا كنت بحاجة إلى تمديد كتلة إلى العرض الكامل للشاشة باستخدام كس ، طريقة واحدة لتحقيق ذلك هو استخدام الموقف: الملكية المطلقة; في تركيبة مع خصائص كس الأخرى.
الموضع: تتيح لك الخاصية المطلقة التحكم الكامل في موضع عنصر ما على الصفحة. عند استخدام هذه الخاصية ، يتم إزاحة العنصر بالنسبة إلى أقرب حاوية ذات موضع غير ثابت (بخلاف القيمة "الثابتة").
فيما يلي مثال على كيفية استخدام الموضع: مطلق ؛ خاصية لتمديد كتلة إلى العرض الكامل للشاشة:
محتوى الكتلة...
في هذا المثال ، ديف مع فئة" حاوية " هي حاوية التي لديها تحديد المواقع النسبية باستخدام الموقف: النسبية ؛ الملكية. هذا مهم من أجل ضبط الموضع المطلق للوحدة الداخلية.
كتلة داخلية مع فئة "كتلة كاملة العرض"لها موضع مطلق باستخدام الموضع: خاصية مطلقة؛. ثم ، باستخدام خصائص اليسار: 0 ؛ واليمين: 0; نحدد أن الكتلة يجب أن توضع على اليسار واليمين بالنسبة للحاوية الأم ، وتمتد إلى عرضها الكامل.
- لاحظ أنه عند استخدام الموضع: مطلق ؛ الخاصية ، يخرج العنصر من التدفق الطبيعي ويعتمد موضعه فقط على الأصل مع وضع غير ثابت. قد يتطلب ذلك أنماطا إضافية لاستيعاب العناصر الأخرى في الصفحة.
- باستخدام اليسار: 0 واليمين: 0 خصائص;
طريقة واحدة لتمتد كتلة إلى العرض الكامل للشاشة باستخدام كس هو استخدام اليسار: 0 واليمين: 0 خصائص. تسمح لك هذه الخصائص بتعيين قيمة موضع الكتلة بالنسبة للعنصر الأصل.
لاستخدام هذه الخصائص ، مطلوب بنية هتمل التالية:
العنصر الرئيسي:
عنصر الطفل:
مثال:
مثال على استخدام خصائص اليسار: 0 واليمين:0;
بعد ذلك ، قمنا بتعيين الأنماط التالية للعناصر الأم والطفل:
.حاوية {
الموضع: نسبي ؛ / * حدد موضع العنصر */
العرض: 100٪ ؛ / * تعيين العرض إلى 100% */
}
.المحتوى {
الموضع: مطلق ؛ / * حدد الموضع المطلق للعنصر */
اليسار: 0 ؛ / * ضع العنصر على الحافة اليسرى للعنصر الأصل */
اليمين: 0; / * ضع العنصر على الحافة اليمنى للعنصر الأصل */
}
في هذا المثال ، ستشغل الكتلة التي تحتوي على فئة "المحتوى" العرض المتاح بالكامل للعنصر الأصل ، نظرا لأن حوافه اليسرى واليمنى مرتبطة بحواف العنصر الأصل باستخدام خصائص اليسار: 0 واليمين: 0.
وبالتالي ، باستخدام اليسار: 0 والخصائص الصحيحة: 0 يمكنك بسهولة تمتد كتلة إلى العرض الكامل للشاشة في المغلق.
تطبيق الحشو: 0 والهامش: 0 خصائص;
لإنشاء كتلة ممتدة عبر عرض الشاشة بالكامل باستخدام كس ، تحتاج إلى تعيين خصائص الحشو والهامش إلى 0.
تقوم خاصية الحشو بإعادة تعيين الهوامش داخل الكتلة ، وتقوم خاصية الهامش بإعادة تعيين الهوامش الخارجية للكتلة. يتيح لك تعيين القيمة إلى 0 لكلتا الخاصيتين إنشاء كتلة تشغل العرض المتاح بالكامل للشاشة.
مثال على استخدام الحشو: 0 والهامش: 0 خصائص:
هذه كتلة ممتدة عبر عرض الشاشة بالكامل.
في هذا المثال ، يتم إنشاء كتلة مع فئة "الحاوية" ، والتي يتم تعيين خصائص الحشو والهامش إلى 0. ثم يتم تعيين عرض الكتلة على 100 ٪ (مما يعني أن الكتلة ستشغل العرض المتاح بالكامل للشاشة) ويتم تعيين لون خلفية الكتلة.يوجد داخل الكتلة فقرة تحتوي على النص " هذه كتلة ممتدة عبر عرض الشاشة بالكامل."سيتم ضبط أبعاد هذه الفقرة تلقائيا على حجم الكتلة.
تطبيق الحشو: 0 وخصائص الهامش: 0 يسمح لك بإنشاء كتلة تشغل عرض الشاشة بالكامل ولا تحتوي على هوامش داخلية أو خارجية.
باستخدام العرض: خاصية الشبكة;
طريقة واحدة لتمتد كتلة إلى العرض الكامل للشاشة باستخدام كس هو استخدام العرض: الشبكة. إنها أداة قوية تسمح لك بإنشاء شبكة مرنة وقابلة للتكيف لوضع العناصر على الصفحة.
لاستخدام العرض: الشبكة ؛ الخاصية ، تحتاج أولا إلى تعيين قيمة هذه الخاصية إلى الحاوية التي سيتم وضع العناصر فيها. على سبيل المثال:
...
بعد ذلك ، يمكنك تعيين خصائص مختلفة لتوزيع العناصر داخل الحاوية. على سبيل المثال ، يمكنك استخدام أعمدة قالب الشبكة لتعيين عدد الأعمدة وعرضها:
.حاوية {عرض: الشبكة;
شبكة-قالب-أعمدة: 1 فر 1 فر 1 فر;
}
في هذا المثال ، ستحتوي الحاوية على 3 أعمدة ، سيشغل كل منها ثلث عرض الشاشة.
يمكنك أيضا استخدام شبكة قالب الصفوف لتعيين عدد وارتفاع الصفوف:
.حاوية {
عرض: الشبكة;
شبكة-قالب-صفوف: 100 بكسل 200 بكسل;