CSS - marginauto؛ - كيف تعمل

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

لكن اولا, ماذا فعلت تلقاءي فعلا?

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

"تلقائي" يشغل المساحة المتاحة

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

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

فو تعويم عن طريق تناول المساحة المتاحة

منذ تلقاءي في كل من الهوامش اليمنى واليسرى تأخذ مساحة "المتاحة" على قدم المساواة ، ما رأيك سيحدث عندما تكون القيمة تلقاءي يتم إعطاء واحد فقط من هؤلاء?

الهامش الأيسر أو الأيمن مع تلقاءي سيشغل كل المساحة "المتاحة" مما يجعل العنصر يبدو وكأنه قد تم مسحه يمينًا أو يسارًا.

“تلقاءي” محسوبة على 0px

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

وهذا سوف يهزم الغرض الأولي من استخدام شيء من هذا القبيل تطفو. بالتالي تلقاءي سيكون لها قيمة 0px في هذه العناصر.

تلقاءي لن يعمل أيضًا على عنصر كتلة نموذجي إذا لم يكن له عرض. كل الأمثلة التي أظهرتها لك لها حتى الآن عروض.

عرض القيمة تلقاءي سوف نحصل على 0px هوامش. عادةً ما يغطي عرض عنصر الكتلة الحاوية الخاصة به عندما يكون تلقاءي أو 100٪ وبالتالي الهامش تلقاءي سيتم احتساب ل 0px في مثل هذه الحالة.

ماذا يحدث للهوامش العمودية ذات القيمة تلقاءي?

تلقاءي في كل من الهوامش العلوية والسفلية يتم حسابها دائمًا على 0px (باستثناء العناصر المطلقة). يقول المواصفات W3C مثل هذا:

“إذا “هامش قمة” أو “الهامش السفلي” هو “تلقاءي”, القيمة المستخدمة هي 0 "

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

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

قد يكون أيضًا بسبب تأثير انهيار الهامش (انهيار العناصر المجاورة” الهوامش) وهو استثناء آخر للهوامش العمودية.

ومع ذلك ، يبدو أن الحالة الأخيرة هي حالة غير مرجحة - نظرًا لأن العناصر التي لا تنهار على هوامشها - مثل Floats والعناصر التي بها فيض غير ذلك مرئي, لا يزال تعيين هوامش عمودية 0px لـ تلقاءي.

توسيط العناصر ذات التمركز المطلق

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

هذا هو المكان الذي تأتي فيه مواصفات W3C أخرى:

"إذا كان الثلاثة “اليسار”, “عرض”, و “حق” هي “تلقاءي”: أول مجموعة أي “تلقاءي” القيم ل “ترك هامش” و “الهامش الأيمن” إلى 0 ... "

"إذا لم يكن أي من الثلاثة “تلقاءي”: إذا كان كل من “ترك هامش” و “الهامش الأيمن” هي “تلقاءي”, حل المعادلة تحت القيد الإضافي بأن الهوامش تحصل على قيم متساوية "

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

تشير المواصفات أيضًا إلى شيء مشابه للهوامش الرأسية.

“إذا كل ثلاثة من “أعلى”, “ارتفاع”, و “الأسفل” هي السيارات ، مجموعة “أعلى” إلى موقف ثابت ... ”

“إذا لم يكن أي من الثلاثة “تلقاءي”: إذا كان كل من “هامش قمة” و “الهامش السفلي” هي “تلقاءي”, حل المعادلة تحت القيد الإضافي بأن الهوامش تحصل على قيم متساوية ... ”

وبالتالي ، لعنصر مطلق أن يكون تركزت عموديا, انها أعلى, ارتفاع, و الأسفل لا ينبغي أن تكون القيم تلقاءي.

الآن من خلال الجمع بين كل هذه ، هذا ما نحن عليه”سوف تحصل على:

استنتاج

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

قد لا يكون تحويل عنصر إلى مطلق تمامًا بحيث يمكن توسيطه عموديًا فكرة رائعة. هناك خيارات أخرى مثل فليكس بوكس ​​وتحويل المغلق التي هي أكثر ملاءمة لهؤلاء.