CSS تعويم: الوصف وخصائص

تعويم - واحدة من الوظائف الأساسية للغة وCSS (والمتتالية في أوراق الأنماط - تنسيق المتتالية). وقد وجدت هذه اللغة منذ عام 1996 وما زالت مستمرة في التطور. في هذه اللحظة، وقد استخدمت للمطورين النسخة الثالثة من CSS. مع CSS لغة البرمجة من الممكن لإنشاء موقع جميل والسرور التي لن تظهر عفا عليها الزمن أو غير مريحة للمستخدم، حتى لو كنت لا تستخدم جافا سكريبت. الاحتمالات الحديثة من النسخة الثالثة من التصريح.

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

CSS تعويم - لماذا هو المطلوب؟

تعويم - الملكية لعناصر لتحديد المواقع. كل يوم، فإنه يمكن أن ينظر إليه على صفحات الجرائد والمجلات، والنظر في الصور والنص، والتي هي بدقة جدا يلتف حولها. и CSS при использовании функции Float должно произойти то же самое. في عالم HTML ورمز CSS باستخدام وظيفة تعويم يجب أن يحدث نفس الشيء. ولكن يجدر بنا أن نتذكر أن تحرير الصور ليست دائما أن الغرض الرئيسي من هذه الوظيفة. ويمكن استخدامه لإنشاء موقع شعبية من عناصر الموقع في اثنان، ثلاثة، أربعة أعمدة. في الواقع، يتم استخدام خاصية CSS تعويم إلى تقريبا أي أتش تي أم أل العنصر. ومعرفة أساسيات تحرير عناصر التخطيط باستخدام وظيفة تعويم، ثم الممتلكات، لخلق أي تصميم الموقع لن يكون صعبا.

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

CSS وصف تعويم للممتلكات

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

نحن تعويم الخاصية لديه أربع قيم:

• تعويم: وراثة.
• تعويم: الحق؛
• تعويم: اليسار،
• تعويم: لا شيء؛

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

كيفية تعويم العمل؟

تعويم CSS الملكية يعمل بكل بساطة. كل ما تم وصفه أعلاه، يمكن أن يتم من دون الكثير صعوبة. بعد ذلك، كل شيء سيكون بنفس السهولة. ولكن قبل أن أواصل دراسة خصائص تعويم بقيمة نظرة قليلا في نظرية. كل موقع على شبكة الإنترنت هو عنصر من الكتلة. فمن السهل أن نرى هذا من خلال فتح وحدة التحكم في Google Chrome عن طريق الضغط على Ctrl + شيفت + نص J.، العنوان، صورة، وصلات، وسيتم عرض جميع المكونات الأخرى للموقع بنات، فقط أحجام مختلفة. في البداية، كل هذه الكتل تتبع بعضها البعض. كما هو مبين في المثال التالي، سلسلة كود دفعة واحدة بعد أخرى، وهكذا يبدو أنها بدقة واحدة وراء الأخرى.

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

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

وظيفة واضحة لحل المشاكل

نحن تعويم يتميز قلب كل - واضحة. معا - لا يسفك الماء. كل من هذه الميزات يكمل كل منهما الآخر، وجعل المطور سعيدة. كما ذكر أعلاه، الخلايا المجاورة الخروج من مسارها الطبيعي، وكذلك البدء في "تعويم" باعتبارها العنصر الذي يستخدم خاصية الطفو (على سبيل المثال، تعويم CSS الأعلى). ونتيجة لذلك، بدلا من عنصر عائم يحصل على اثنين، وليس في المكان الذي يهدف لترتيب المطور. ومنذ تلك اللحظة بدأت لتوها جميع المشاكل.

في مسح وظيفة لديها خمسة القيم:

• : يسار.
• : يمين؛
• : كلا.
• : وراثة.
• لا شيء؛

عن طريق القياس يمكننا أن نفهم عندما فمن الأفضل لاستخدام وظيفة واضحة. وإذا كنا قد كتبت خط في تعويم كود: الحق. (والمقصود رمز CSS)، يجب أن تكون وظيفة واضحة: الحق؛. نفس خصائص الصخور وتعويم: غادر؛ سوف تكمل واضحة: اليسار، . عند كتابة التعليمات البرمجية واضح: على حد سواء؛ اتضح أن العنصر الذي يتم تطبيقه، سيكون هذا ميزة أدناه العناصر التي ينطبق ظيفة تعويم. وراثة يأخذ الإعدادات من العنصر الأصلي، ولكن لا شيء لا يجعل أي تغييرات على هيكل الموقع. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. إذا كنت أفهم كيف تنقل وظائف واضحة، يمكنك إرسال بريد HTML فريدة وغير عادية وCSS تعويم رمز، الأمر الذي سيجعل من موقع الويب الخاص بك فريدة من نوعها في نوعه.

عن طريق تعويم لإنشاء أعمدة

تطفو الميزة مفيدة بشكل خاص عند إنشاء الأعمدة على الموقع (أو موقع محتوى CSS تعويم في وسط الصفحة على شبكة الإنترنت). ومن هذا الرمز هو الأكثر عملية ومريحة، لذلك يجب عليك أن تنظر عدة خيارات لإنشاء موقع القالب المعتاد، وتتألف من عمودين. على سبيل المثال، واتخاذ موقع على شبكة الانترنت القياسية مع المحتوى على شريط التنقل الأيمن (شريط التنقل) إلى اليمين، رأس وتذييل الصفحة. رمز يشبه هذا:

الآن نحن بحاجة إلى فهم ما هو مكتوب هنا. العنصر الأصل فيها الجزء الرئيسي من أتش تي أم أل رمز يسمى الحاويات (حاوية). انها تسمح لك لمنع العناصر، التي يتم تطبيقها وظيفة تعويم لتفريق في اتجاهات مختلفة. إذا لم يكن، ثم قد طرحت هذه العناصر حتى الحدود للمتصفح.

ثم، في رمز وتذهب #navigation #content. وتستخدم هذه العناصر وظيفة تعويم. #content إرسالها إلى اليسار وإلى اليمين هو #navigation. فمن الضروري إنشاء موقع مع عمودين. تأكد من تحديد العرض، بحيث الكائنات لا تتداخل بعضها البعض. يمكنك تحديد عرض والنسبة المئوية. وذلك حتى أكثر راحة من بالبكسل. على سبيل المثال، 45٪ إلى 45٪ و#content ل#navigation، والباقي 10٪ لإعطاء هامش الممتلكات.

ممتلكات واضحة، والتي هي في #footer، لا يتبع #navigation تذييل و#content، لكنه يترك لنفس الموضع الذي كان فيه. ماذا يمكن أن يحدث؟ إذا لم تقم بتحديد الملكية واضحة؟ في هذا #footer كود ببساطة ترتفع وسوف تكون تحت #navigation. يحدث هذا يرجع ذلك إلى حقيقة أن #navigation مساحة كافية لاستيعاب أكثر من عنصر واحد. في هذا المثال التوضيحي كان مرئيا بوضوح كيف أن خصائص واضحة المصقول ويكمل كل منهما الآخر.

المشاكل التي قد تواجهها عند كتابة التعليمات البرمجية

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

اشتباك عناصر

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

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

ولكن المشكلة اصطدام عناصر صفحة الويب يمكن حلها بطريقة أخرى. هناك نوعان من طرق على الأقل:

• استخدام الوظيفة.
• تطبيق حول flexbox.

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

تحليل رمز الدالة وتعويم الوظيفة

и CSS Float заменить на Position. يجب أن تتعامل مع أكثر من طريقة في HTML و CSS تعويم استبداله الوظيفة. في واقع الأمر في غاية البساطة. دعنا نقول أن هناك #container عنصر و#div.

#container {

العرض: 40٪؛

تعويم: اليسار،

هامش: 10px؛

}

#div {

العرض: 40٪؛

تعويم: الحق؛

هامش: 10px؛

}

#footer {

واضح: على حد سواء؛

}

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

إذا كيف يمكنك تغيير في CSS وتعويم متاحة لاستخدام المركز؟ بسيطة جدا:

#container {

العرض: 40٪؛

الموقف: النسبية.

هامش: 10px؛

}

#div {

العرض: 40٪؛

الموقف: النسبية.

هامش: 10px؛

}

في هذه الحالة #div #container واتخاذ الموقف اللازم من المطور في العنصر الأصل. الشيء الرئيسي؟ وضع #div و#container العنصر الأصل واحد، والتي سوف تتوافق مع حجمها.

حول flexbox - هذه الوظيفة سوف يحل محل CSS تعويم؟

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

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

كيف حول flexbox؟

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

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

علة هامش مزدوج

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

#div {

تعويم: اليسار،

هامش اليسار: 10px؛

}

وهذا الرمز تحول عنصر في Internet Explorer 20 بكسل اليسار. يمكنك تعديل التعليمات البرمجية كما يلي:

#div {

تعويم: اليسار،

هامش اليسار: 10٪؛

}

أو نحو ذلك

#div {

تعويم: اليسار،

الهامش اليمين: 10px؛

}

كل من هذه الخيارات لن تحل المشكلة من عناصر النزوح.

متصفح البق وموقع العرض غير صحيحة

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