كيفية الضغط على عنصر إلى الحد السفلي من كتلة باستخدام كس

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

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

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

1. المهمة هي الضغط على العنصر إلى الحد السفلي للكتلة
2. طرق الضغط على العنصر إلى الحد الأدنى
3. 1. باستخدام خاصية الموقف
4. 2. باستخدام فليكس بوكس
5. 3. استخدام خاصية الهامش الأعلى
6. باستخدام خاصية كس "الموقف: المطلق"
7. كيفية الضغط على عنصر باستخدام خاصية " القاع: 0
8. تطبيق "الموقف: ثابت"
9. خيار الملكية باستخدام كس فليكسبوكسيس
10. أمثلة على استخدام خاصية "محاذاة الذات: فليكس إند"
11. استخدام خاصية "الهامش العلوي: تلقائي"
12. القيم الإيجابية والسلبية لـ" أعلى "و" أسفل " للعناصر
13. سؤال وجواب
14. كيف يمكنني استخدام المغلق للضغط على عنصر إلى الحد السفلي من كتلة?
15. التي ينبغي أن تستخدم الخاصية المغلق للضغط على عنصر إلى الحد السفلي من كتلة?
16. هل من الممكن الضغط على عنصر إلى الحد السفلي للكتلة دون استخدام تحديد المواقع?

المهمة هي الضغط على العنصر إلى الحد السفلي للكتلة

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

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

1. - يسمح لعنصر بالخروج من تدفق المستند ويسمح لنا بتعيين موضعه بالنسبة للعنصر الأصل.
2. - تعيين الإزاحة من الحد السفلي للعنصر الأصل إلى 0.
3. - تعيين الإزاحة من الحافة اليسرى للعنصر الأصل إلى 0. في هذه الحالة ، سيتم محاذاة العنصر بالكامل على طول الحد الأيسر للكتلة.

مثال على الكود:

.الأم {

موضع: نسبي;

الارتفاع: 300 بكسل;

}

.الطفل {

موضع: مطلق;

أسفل: 0;

اليسار: 0;

}

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

مثال على الكود:

.الأم {

عرض: فليكس;

الاتجاه المرن: العمود;

الارتفاع: 300 بكسل;

}

.الطفل {

الهامش الأعلى: تلقائي;

}

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

طرق الضغط على العنصر إلى الحد السفلي

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

1. باستخدام خاصية الموقف

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

يتم الضغط على العنصر مقابل الحد السفلي للكتلة

2. باستخدام فليكس بوكس

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

يتم الضغط على العنصر مقابل الحد السفلي للكتلة

3. استخدام خاصية الهامش الأعلى

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

يتم الضغط على العنصر مقابل الحد السفلي للكتلة

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

قم بتطبيق الأنماط التالية على العنصر المضغوط:

الممتلكات

القيمة

من موقف

مطلق

أسفل

0

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

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

كيفية الضغط على عنصر باستخدام خاصية " القاع: 0

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

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

هنا مثال على رمز كس يظهر استخدام الجزء السفلي: 0:

.خاصية الحاوية {

موضع: نسبي;

الارتفاع: 400 بكسل;

}

.تذييل {

موضع: مطلق;

أسفل: 0;

العرض: 100%;

لون الخلفية: # اف 5 اف 5 اف 5;

الحشو: 10 بكسل;

}

في المثال أعلاه ، سيتم الضغط على العنصر الذي يحتوي على فئة "التذييل "مقابل الحد السفلي للحاوية مع فئة" الحاوية". تسمح الخاصية المطلقة للموضع بفصل العنصر عن الدفق ، بينما تقوم الخاصية السفلية: 0 بمحاذاته على طول الحد السفلي للحاوية. يتم تعيين قيمة العرض أيضا إلى 100%; لكي يشغل العنصر العرض المتاح للحاوية بالكامل ، والحشو: 10 بكسل ؛ يضيف هامشا صغيرا من الحافة.

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

تطبيق خاصية" الموضع: ثابت"

الموضع: تسمح لك الخاصية الثابتة بتثبيت عنصر في الصفحة ، بالنسبة إلى نافذة المتصفح ، بغض النظر عن التمرير.

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

مثال:

.عنصر ثابت {

موقف: ثابت;

أسفل: 0;

اليسار: 0;

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

، بحيث يتم ترتيب العناصر في عمود.

تعيين الخاصية للكتلة الأصل

تبرير-المحتوى: المسافة-بين;

بحيث يتم توزيع العناصر بالتساوي عموديا.

تعيين الخاصية لعنصر الطفل

الهامش الأعلى: تلقائي;

، بحيث يضغط على الحد السفلي للكتلة.

نموذج التعليمات البرمجية:

"'المغلق

.حاوية {

عرض: فليكس;

الاتجاه المرن: العمود;

تبرير-المحتوى: المسافة-بين;

}

.البند {

1. الهامش الأعلى: تلقائي;

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

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

2. الركن 2

   الركن 3 قد يكون هناك محتوى آخر هنا محاذاة العنصر الحالي على طول الحد السفلي: الركن 4 الركن 5

   الركن 6 المثال 2: قد يكون هناك محتوى آخر هنا

3. محاذاة العنصر الحالي على طول الحد السفلي:

   الركن 7 العنصر 8 الركن 9

   العنصر 10 العنصر 11 العنصر 12

المثال 3:

العنصر 13

العنصر 14

العنصر 15

العنصر 16

العنصر 17

العنصر 18

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

استخدام خاصية "الهامش العلوي: تلقائي"

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

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

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

في ما يلي مثال على استخدام أعلى الهامش: خاصية السيارات:

العنصر العلوي

العنصر السفلي

.حاوية {

عرض: فليكس;

الاتجاه المرن: العمود;

}

.أعلى عنصر {

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

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

القيم الإيجابية والسلبية لـ" أعلى "و" أسفل " للعناصر

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

تحدد القيمة "أعلى" الإزاحة من الحد العلوي للعنصر الأصل. تسمح لك القيمة الموجبة لـ" الأعلى " بالضغط على العنصر إلى الحد العلوي ، وتسمح لك القيمة السالبة بالابتعاد عنه.

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

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

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

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