كس فلوت: دسكريبتيون، بروبيرتيز
تعويم - واحدة من الوظائف الأساسية للغة CSS(أوراق الأنماط المتتالية - تنسيق الجداول المتتالية). هذه اللغة موجودة منذ عام 1996 وما زالت تتطور. حاليًا ، يستخدم المطورون الإصدار الثالث من CSS. باستخدام لغة برمجة CSS ، من الممكن إنشاء موقع ويب جميل وممتع تمامًا لا يبدو قديمًا أو غير مريح للمستخدم ، حتى لو كنت لا تستخدم javascript على الإطلاق. الميزات الحديثة للنسخة الثالثة تسمح بذلك.
أيضا ، يمكن للمطورين استخدام أكثرخيارات التنسيق المريحة ، مثل Flexbox أو Position لتغيير مكان عنصر ما على الموقع ، ولكن أولاً وقبل كل شيء. تحتاج أولاً إلى فهم مزايا وعيوب خاصية Float.
CSS Float - لماذا هو مطلوب؟
تعويم - خاصية لعناصر تحديد المواقع. كل يوم يمكن رؤيته على صفحات الصحف والمجلات ، والنظر إلى الصور والنصوص ، التي تتدفق بدقة من حولهم. في عالم الرموز HTML و CSS عند استخدام وظيفة تعويم ينبغينفس الشيء يحدث. لكن تجدر الإشارة إلى أن تحرير الصور ليس دائمًا الغرض الرئيسي من هذه الوظيفة. يمكن استخدامه لإنشاء ترتيب شائع لعناصر الموقع في عمودين أو ثلاثة أو أربعة أعمدة. في الواقع ، تنطبق خاصية Float CSS على أي عنصر html تقريبًا. إن معرفة أساسيات تحرير تخطيط العناصر باستخدام وظيفة Float ، ثم خاصية ، لن يكون إنشاء أي تصميم موقع إلكتروني أمرًا صعبًا.
برامج تخطيط خاصة يمكن في بعض الأحيانلا تلاحظ الصور ، ولكن انتقل فوقها. تحدث أشياء مشابهة تمامًا أيضًا في تصميم الويب ، مع الأخذ في الاعتبار أن النص ، بدلاً من الزحف على الصورة ، يتم عرضه (إذا تم استخدام خاصية Float بشكل غير صحيح) بجوارها أو تحتها ، ولكن ليس دائمًا حيث يحتاج المطور إلى ذلك.
CSS تعويم وصف الممتلكات
في الواقع ، والقدرة على استخدام الممتلكاتتعويم هو جيد جدا حتى تصل الأكمام الخاصة بك لأي مصمم ويب. لكن لسوء الحظ ، قد يؤدي عدم فهم كيفية عمل هذه الوظيفة إلى حدوث تصادم بين عناصر الموقع وخيبة الأمل الأخرى من هذا النوع. في السابق ، حدثت حالات مماثلة أيضًا بسبب الأخطاء في المتصفحات. الآن سيتم الكشف عن سر كيفية استخدام خاصية Float بشكل صحيح ، ولن تظهر أي مشاكل أخرى بهذا الأمر.
تحتوي الخاصية Float على أربع قيم:
- تعويم: يرث.
- تطفو: صحيح ؛
- تعويم: اليسار.
- تعويم: لا شيء.
بالنسبة لأولئك الذين يعرفون اللغة الإنجليزية ، يجب أن تكون قيم معلمات الخاصية Float واضحة. ولكن بالنسبة لأولئك الذين لا يعرفون ، يمكن تقديم تفسير بسيط. معلمة : اليسار ؛ ينقل نص العنصر إلى أقصى الزاوية اليسرى للعنصر الأصل. يحدث الشيء نفسه (فقط في الاتجاه المعاكس) مع المعلمة bcgjkmpjdfybb : صحيح. قيمة : يرث أوامر العنصر لتولي على نفسهالإعدادات كالوالدين. وتسمى هذه العناصر أيضًا بالأطفال ، لأنها تقع داخل الوالد مباشرةً في كود html. خاصية : لا شيء ؛ يسمح للعنصر بعدم إزعاج التدفق الطبيعي للمستند ، يتم تعيينه افتراضيًا لجميع أجزاء الكود.
كيف تعويم العمل؟
تعمل خاصية Float CSS بكل بساطة. كل ما تم وصفه أعلاه يمكن القيام به دون صعوبة كبيرة. ثم كل شيء سيكون بهذه البساطة. ولكن قبل الاستمرار في دراسة خصائص Float ، فإن الأمر يستحق الفهم قليلاً للنظرية. كل عنصر من عناصر موقع الويب هو كتلة. من السهل التحقق من ذلك عن طريق فتح وحدة التحكم في Google Chrome عن طريق الضغط على Ctrl + Shift + J. سيتم عرض النصوص والعنوان والصورة والروابط وجميع المكونات الأخرى للموقع في كتل مختلفة الأحجام. في البداية ، كل هذه الكتل تذهب واحدة تلو الأخرى. كما ترون في المثال أدناه ، تنتقل أسطر الشفرة واحدة تلو الأخرى ، وبالتالي سيتم عرضها بدقة واحدة تلو الأخرى.
وهذا ما يسمى التدفق الطبيعي. مع هذا التدفق ، تقع جميع الكتل فوق بعضها البعض (دون عبور أجسام العناصر) رأسياً. في البداية ، توجد جميع محتويات صفحة الويب بهذه الطريقة. ولكن عند استخدام ، على سبيل المثال ، خصائص لغة CSS Float Left ، يترك العنصر موضعه الطبيعي على الصفحة وينتقل إلى الموضع الموجود في أقصى اليسار. مثل هذا السلوك يؤدي حتما إلى الاصطدام مع تلك العناصر التي بقيت في المسار الطبيعي.
بمعنى آخر ، العناصر بدلاً من ذلكتقع عموديا ، هي الآن بجانب بعضها البعض. إذا كان العنصر الأصل يحتوي على مساحة كافية ليتمكن من وضع طفلين بداخله ، فلا يوجد تصادم ؛ وإذا لم يكن الأمر كذلك ، فإن تداخل كائن على الآخر أمر لا مفر منه. من المهم للغاية تذكر ذلك لفهم كيفية عمل خاصية CSS Float.
وظيفة واضحة لحل المشاكل
وظيفة تعويم لديه صديق القلب - واضح. معا ليسوا تسرب المياه. كل من هذه الوظائف تكمل بعضها البعض وتجعل المطور سعيدًا. كما ذكر أعلاه ، تخرج العناصر المجاورة من التدفق الطبيعي وتبدأ أيضًا في "float" ، مثل العنصر الذي تم تطبيق خاصية Float عليه (على سبيل المثال ، CSS Float Top). نتيجة لذلك ، بدلاً من عنصر واحد عائم ، يتم الحصول على اثنين ، وليس على الإطلاق في المكان الذي ينوي المطور وضعه فيه. من هذه اللحظة ، كل المشاكل تبدأ.
تحتوي الدالة Clear على خمس قيم:
- : اليسار ؛
- : صحيح
- : كلاهما ؛
- : يرث
- لا شيء؛
عن طريق القياس ، يمكنك فهم متى يكون من الأفضل استخدام وظيفة Clear. إذا قمنا بكتابة سطر في الكود تطفو: صحيح ؛ (رمز CSS يعني) ، ثم يجب أن تكون الوظيفة واضح: صحيح،. نفس الشيء يتأرجح والخصائص تعويم: اليسار. سوف تكملها واضح: اليسار ؛. عند كتابة الكود واضح: كلاهما ؛ اتضح أن العنصر الذي ينطبق عليهستكون هذه الوظيفة أدنى العناصر التي يتم تطبيقها على وظيفة Float. يأخذ الوراثة الإعدادات من العنصر الأصل ، ولا شيء يُجري أي تغييرات على بنية الموقع. إذا فهمت كيف تعمل وظائف Float و Clear ، يمكنك كتابة رسالة فريدة وغير عادية HTML ورمز تعويم CSS لجعل موقع الويب الخاص بك فريدًا من نوعه.
باستخدام تعويم لإنشاء أعمدة
الخاصية Float مفيدة بشكل خاص عند الإنشاءالأعمدة الموجودة على الموقع (أو مركز محتوى CSS Float على صفحة الويب). هذه الشفرة هي الأكثر عملية وملاءمة ، لذلك يجدر التفكير في العديد من الخيارات لإنشاء قالب موقع مألوف مكون من عمودين. على سبيل المثال ، لنأخذ موقعًا قياسيًا على الويب يحتوي على محتوى على اليسار وشريط التنقل (يمين) ورأس وتذييل الصفحة. الرمز سيكون مثل هذا:
الآن تحتاج إلى معرفة ما هو هناهو مكتوب. يسمى العنصر الأصل ، الذي يحتوي على الجزء الأكبر من كود html ، بالحاوية. يسمح لك بمنع العناصر التي تطبق عليها وظيفة Float ، وتناثرها في اتجاهات مختلفة. إذا لم يكن الأمر كذلك ، فستطفو هذه العناصر على حدود المتصفح نفسها.
ثم ، في الكود #content و #navigation. تنطبق وظيفة Float على هذه العناصر. ينتقل #content إلى اليسار ، ويذهب #navigation إلى اليمين. هذا ضروري لإنشاء موقع عمودين. تأكد من تحديد العرض بحيث لا تتداخل الكائنات مع بعضها البعض. يمكن أيضًا تحديد العرض بنسبة مئوية. إنه أكثر ملاءمة من البكسل. على سبيل المثال ، 45٪ لـ #content و 45٪ لـ #navigation ، وإعطاء 10٪ المتبقية إلى خاصية الهامش.
الخاصية Clear ، التي تقع في #footer ، ليست كذلكيسمح للتذييل باتباع #navigation و #content ، ويتركه في نفس المكان الذي كان عليه. ماذا يمكن أن يحدث؟ ما لم تحدد خاصية مسح؟ في هذا الكود ، ستصعد #footer وتنتهي في النهاية تحت #navigation. سيحدث هذا لأن #navigation به مساحة كافية لاستيعاب عنصر آخر. يوضح هذا المثال التوضيحي بوضوح تام كيف تكمل خصائص Clear و Float بعضها البعض.
مشكلة كتابة التعليمات البرمجية
الأمثلة المذكورة أعلاه بسيطة للغاية. ولكن قد تكون هناك مشاكل معهم. بشكل عام ، في الواقع ، يمكن أن تحدث العديد من المشاكل غير المتوقعة مع وظيفة Float. غريبًا كما يبدو ، لا تنشأ المشكلات عادة مع CSS ، ولكن مع كود html. يؤثر المكان الذي يوجد به العنصر Float في كود html مباشرة على تشغيل العنصر الأخير. لتجنب أنواع مختلفة من الصعوبات ، من الأفضل اتباع قاعدة بسيطة - لوضع العناصر التي تحتوي على وظيفة Float أولاً في التعليمات البرمجية. دائما تقريبا ، وهذا يعمل ويقلل من سلوكهم غير متوقع.
صراع العناصر
يحدث التصادم عند الوالدعنصر لا يحتوي على العديد من الأطفال لا يمكن أن يحتويهم جميعًا ، ويتداخلون مع بعضهم البعض. يحدث حتى أنه قد لا يتم عرض العناصر ، ولكنها تختفي من الموقع. هذا ليس خطأ في المستعرض ، بل هو السلوك المتوقع والعناصر المناسبة مع وظيفة Float.
بسبب حقيقة أن هذه العناصر هي الأولى فيالتدفق العادي ، ومن ثم يتم انتهاكه بواسطة خاصية Float ، يمكن للمتصفح إزالتها من صفحة الموقع. ومع ذلك ، لا تيأس ، لأن الحل بسيط وواضح - استخدم خاصية Cear. من الممكن أنه من بين كل الطرق للخروج من هذه المشكلة ، فإن استخدام Clear هو الأكثر فعالية.
لكن مشكلة تصادم عناصر صفحة الويب يمكن حلها بطريقة أخرى. هناك طريقتان على الأقل:
- باستخدام وظيفة الموقف ؛
- تطبيق فليكس بوكس.
وظيفة الموقف جيدة في بعض الأحيان.بديل ل CSS تعويم. في وسط صفحة الويب ، عند استخدام Position ، من الأفضل وضع الصور. إذا قمت بتطبيق القيم بشكل صحيح: مطلق و: نسبي ، فستقع العناصر في مكانها ولن تتداخل مع بعضها البعض.
تحليل الموقف وتعويم رمز الوظيفة
يجدر بنا أن نفهم بمزيد من التفصيل كيف في الكود HTML و CSS Float يستبدل بـ Position. في الواقع ، الأمر بسيط للغاية. افترض أن هناك عنصر #content و # div.
#container {
العرض: 40 ٪ ؛
تعويم: اليسار.
الهامش: 10 بكسل ؛
}
#div {
العرض: 40 ٪ ؛
تطفو: صحيح ؛
الهامش: 10 بكسل ؛
}
#footer {
واضح: كلاهما ؛
}
في هذا المثال ، استخدم في الثانيةميزات الحاوية (CSS Div) يساعدك Float في إنشاء موقع قياسي بعمودين. لن ننسى ابدا وظيفة واضحة. بدون ذلك ، سيتم فقط تراكب العناصر على بعضها البعض.
لذا ، كيف يمكنك تغيير كود CSS و Float لاستخدام Postion؟ بسيط جدا:
#container {
العرض: 40 ٪ ؛
الموقف: نسبي
الهامش: 10 بكسل ؛
}
#div {
العرض: 40 ٪ ؛
الموقف: نسبي
الهامش: 10 بكسل ؛
}
في هذه الحالة ، يقبل #container و # divموقف المطور في العنصر الأصل. الشيء الرئيسي؟ ضع # div و # الحاويات في عنصر أصل واحد يناسب أحجامها.
Flexbox - كيف تساعد هذه الميزة في استبدال CSS Float؟
Flexbox هي الطريقة الأكثر تقدمًا لإنشاءمواقع الويب في الوقت الحالي ، لذلك لا تدعم هذه الإصدارات الإصدارات القديمة من المتصفحات. يجب عدم خصم هذه الحقيقة ، لأن المستخدمين الذين لديهم إصدارات قديمة من المتصفحات لن يتمكنوا من رؤية الإصدار الصحيح من الموقع.
Flexbox ليست خاصية ولكن منفصلةوحدة. لذلك ، يدعم flexbox عددًا من الخصائص التي تعمل معها فقط. بالإضافة إلى ذلك ، فإن وظيفة العرض ، التي تحتوي على ثلاثة معلمات مضمنة وكتلة وكتل مضمنة في flexbox ، بها تدفق مرن واحد فقط.
كيف يعمل فليكس بوكس؟
هذه التكنولوجيا سوف تساعد المطور بسهولة.محاذاة العناصر أفقيا وعموديا. يمكن لـ Flexbox أيضًا تغيير اتجاه وعرض ترتيب العناصر. تحتوي هذه التقنية على محورين: المحور الرئيسي والمحور المتقاطع ، حيث تم بناء Flexbox بالكامل حولهما. كما أنه يزيل تأثير وظائف Float و Clear. يقوم ببناء نظامه في الكود ، والذي يستخدم فيه خصائص فريدة له ، وبالتالي ، لسوء الحظ ، لن يكون قادرًا على تكرار خصائص أخرى في عناصر ، مثل Float و Position. وسيكون ذلك مفيدًا للغاية ، لأنه ، كما ذكر أعلاه ، يعمل Flexbox فقط في الإصدارات الأحدث من المتصفحات.
يجدر بنا أن نتذكر هذا الموقف في نهاية المطاف ،يقوم كل من Flexbox و Float بالقيام بنفس الشيء - إنهما ينشئان تصميمًا غير عادي ومبتكرة لموقعك. كل خيار من الخيارات المذكورة في المقالة يقوم بذلك بطريقته الخاصة وبالتالي له مزايا وعيوب. بالإضافة إلى ذلك ، يحدث أن تكون وظيفة Float مثالية في مكان ما (على سبيل المثال ، في موقع بهيكل بسيط) ، ولكن من الأفضل استخدام Position أو Flexbox في مكان ما.
علة الهامش المزدوج
ومع ذلك ، في بعض الأحيان ، للأسف ، الجميعيواجه المطور مشكلات مرتبطة بالكود المكتوب ، ولكن مع الأخطاء في نموذج مستعرض معين. على سبيل المثال ، يوجد في برنامج Internet Explorer خطأ يسمى Double Margin Bug. وهو يضاعف معامل الهامش بمقدار اثنين ، مما يؤدي إلى إزاحة عناصر الموقع خارج حدود المتصفح. لتجنب ذلك ، ما عليك سوى تحديد معامل الهامش في المئة. عادةً ما يحدث هذا الخطأ عندما تكون قيمة خصائص الهامش و Float هي نفسها.
#div {
تعويم: اليسار.
الهامش الأيسر: 10 بكسل ؛
}
سوف يحول هذا الرمز العنصر في Internet Explorer بمقدار 20 بكسل إلى اليسار. يمكنك تغيير الكود مثل هذا:
#div {
تعويم: اليسار.
الهامش الأيسر: 10 ٪ ؛
}
او هكذا
#div {
تعويم: اليسار.
الهامش الأيمن: 10 بكسل ؛
}
كلا الخيارين سوف يحل مشكلة إزاحة العناصر.
أخطاء المتصفح وعرض غير صحيح للموقع
تجدر الإشارة إلى أن Internet Explorer ليس كذلكالمتصفح الوحيد الذي يمكن أن يحدث الخلل. الإصدارات القديمة من Google Chrome و Mozilla تعرض بشكل غير صحيح بعض عناصر مواقع الويب الحديثة. يمكنك العثور على حل لكل من هذه الأخطاء. بشكل عام ، أود أن أشير إلى أن استخدام Float سيخلق تصميم موقع أصلي وجذاب. إن فهم أساسيات ومبادئ هذه الخاصية سيتجنب الأخطاء ويجعل الحياة أسهل لأي مطور.
</ p>
