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