كيفية تحديد المواقع في html css. التمركز

)، القوائم (

) وعناصر أخرى.

والآن حول

أوه.

كما ذكر أعلاه، يمكنك تعيين موقع أي عنصر HTML. ليست هناك حاجة لاستخدام العلامة دائمًا لهذا الغرض

. كما أن استخدام هذه العلامة لا يلزمك بإعطائها أي موضع على صفحة الويب.
معنى استخدام الكتلة المحددة بواسطة العلامة
يأتي إلى التوحيد. بعد كل شيء، يمكنك وضع عناصر أخرى بداخله (الفقرات والصور وما إلى ذلك). يؤدي هذا إلى إنشاء كتلة كبيرة ذات محتوى متنوع، وهو أمر أسهل بكثير في وضعه على صفحة الويب مقارنة بكل عنصر على حدة.
تحديد موضع العناصر.
هناك أربعة أنواع رئيسية لتحديد المواقع:
1. ثابت
2. مطلق
3. ثابت
4. نسبي)
ثابتة
يستخدم كموقع افتراضي. في هذه الحالة، وجهات نظر المتصفح كود أتش تي أم أل، يقسمها إلى عناصر ويؤلف منها صفحة. والنتيجة هي تسلسل لعدد من العناصر. يتم عرضها بالترتيب الذي تمت الإشارة إليه به في كود html.
تطبيق المعلمات اليسار والأعلى واليمين والأسفللا يؤدي إلى أي نتائج.
يجب أخذ الوضع الثابت في الاعتبار عند استخدام الوضع النسبي.
مطلق
باستخدام تحديد المواقع المطلقة، يتم تحديد إحداثيات الزاوية اليسرى العليا من الكتلة. في هذه الحالة، يتم حساب الإحداثيات بالنسبة لموقع العنصر الأصلي. إذا كان العنصر الأصلي عبارة عن نافذة متصفح، فسيتم محاذاة الكتلة بالنسبة إليه. إذا كان هناك عنصر آخر تقع ضمنه الكتلة، فستحدث المحاذاة بالنسبة لهذا العنصر.
مُثَبَّت
بالفعل من الاسم يصبح من الواضح أنه في في هذه الحالةتم إصلاح العنصر. وهو موجود في مكان محدد على صفحة الويب ولا يتحرك إلى أي مكان. غالبًا ما يتم استخدام هذه المحاذاة للنوافذ المنبثقة، حيث يتم توسيطها ولا تتحرك أثناء تمرير الصفحة.
نسبي
هذا النوع من تحديد المواقع يمكن أن يكون صعبا. اسمها ليس مناسبًا تمامًا. كثير من الناس يخلطون بين الموضع النسبي والمطلق للعناصر. قد يبدو أن المحاذاة مرتبطة بالعنصر الأصلي. وفي حالة تحديد المواقع المطلقة - بالنسبة لنافذة المتصفح. ولكن هذا ليس صحيحا.
من الضروري أن نفهم أن موقع العنصر في هذه الحالة يحدث بالنسبة إلى مكانه في وضع ثابت. وهذا ما ذكر أعلاه.
ببساطة، أنت تطلب من المتصفح أن ينقل عنصرًا بعدد كبير من وحدات البكسل بالنسبة إلى مكان وجوده افتراضيًا.
هناك نقطة صعبة أخرى. ماذا يحدث إذا كان العنصر الأصل لديه تحديد المواقع النسبيةوالعنصر المتداخل فيه مطلق؟ وفي هذه الحالة سيتم حساب إحداثيات العنصر الفرعي بالنسبة للعنصر الأصلي مع مراعاة إزاحته إن وجدت.
لخص.
لذلك، هناك خاصية موضع. يمكن لهذه الخاصية أن تأخذ 4 قيم ثابت ومطلق وثابت ونسبي. الافتراضي هو ثابتة.
عند تحديد إحداثيات لعنصر ما، يجب عليك أيضًا إخبار المتصفح بكيفية حساب تلك الإحداثيات. علينا أن نعطيه نقطة انطلاق.
لا تنس أنه إذا لم يكن هناك ممتلكات موضعلن يتم أخذ الإحداثيات بعين الاعتبار، وستبقى الكتلة قيد التشغيل نفس المكان، في وضعه الساكن.


الآن دعونا نرى كيف يتم تعيين الإحداثيات.
ولهذه الأغراض، يتم استخدام أربعة أنواع من الخصائص:
1. الأعلى
2 اليسار
3. صحيح
4. القاع
قمة- القيمة الموجبة (على سبيل المثال، 20 بكسل) تحرك الكتلة بمقدار 20 بكسل لأسفل. القيمة السالبة (-20 بكسل) تحرك العنصر بمقدار 20 بكسل لأعلى. كل هذا يحدث بالنسبة إلى الزاوية اليسرى العليا.
غادر- التحول إلى اليسار أو اليمين حسب الإشارة. نسبة إلى الزاوية اليسرى العليا.
يمين- التحول إلى اليمين واليسار حسب الإشارة. نسبة إلى الزاوية اليمنى العليا.
قاع- التحول لأعلى أو لأسفل، يعتمد على الإشارة. يحدث بالنسبة إلى الزاوية اليسرى السفلى.
هنا هو رمز HTML:







وهذا هو CSS:
#1 {
الموقف:نسبي؛
أعلى: 100 بكسل؛
اليسار: 100 بكسل؛
العرض: 500 بكسل؛
الارتفاع: 500 بكسل؛
لون الخلفية:#CCCCCC;
}
#11 {
لون الخلفية:#003399;
الموقف:مطلق؛
أسفل: -30 بكسل؛
اليمين: -50 بكسل؛
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
}
#2 {
لون الخلفية:#990066;
العرض: 200 بكسل؛
الارتفاع: 300 بكسل
}
يمارس.
بينما كنت أكتب اكتشفت ذلك بنفسي.
واحدة من الأفضل جوانب CSSهو أن الأنماط تمنحنا القدرة على وضع المحتوى والعناصر على الصفحة بأي طريقة يمكن تخيلها تقريبًا. وهذا يضيف هيكلًا لتصميمنا ويساعد في جعل المحتوى أكثر وضوحًا.
هناك عدد قليل أنواع مختلفةتحديد المواقع في CSS، كل من هذه الأنواع لها نطاقها الخاص. في هذا الفصل، سنلقي نظرة على بعض حالات الاستخدام المختلفة - إنشاء تخطيطات قابلة لإعادة الاستخدام وتحديد موضع العناصر التي يمكن التخلص منها بشكل فريد - ووصف بعض الطرق للقيام بذلك.
تحديد المواقع عن طريق تعويم
إحدى الطرق لوضع العناصر على الصفحة هي من خلال الخاصية float. هذه الخاصية متعددة الاستخدامات ويمكن استخدامها بعدة طرق مختلفة.
بشكل أساسي، تأخذ الخاصية float عنصرًا، وتزيله من التدفق الطبيعي للصفحة، وتضعه على يسار أو يمين العنصر الأصلي. ستلتف جميع العناصر الأخرى الموجودة على الصفحة حول هذا العنصر. على سبيل المثال، سوف تلتف الفقرات حول الصورة إذا كان العنصر تم تعيين الخاصية العائمة.
عند تطبيق الخاصية float على عناصر متعددة في وقت واحد، فإنه يجعل من الممكن إنشاء تخطيط بعناصر عائمة بجوار أو مقابل بعضها البعض، كما هو موضح في تخطيط متعدد الأعمدة.
تأخذ الخاصية float عدة قيم، القيمتان الأكثر شيوعًا هي اليسار واليمين، والتي تسمح للعنصر بالطفو إلى يسار أو يمين العنصر الأصلي.
إمج (تعويم: اليسار؛)
تعويم في الممارسة العملية
لنقم بإنشاء تخطيط عام للصفحة برأس في الأعلى، وعمودين في المنتصف، وتذييل في الأسفل. ومن الناحية المثالية، ينبغي ترميز هذه الصفحة بالعناصر
,
,