ما لا تعرفه عن حساب هوامش النسبة المئوية في CSS

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

عندما اكتشفت نتائج اختبار CSS المجاني الذي عرضته على الإنترنت خلال الأشهر الستة الماضية ، اكتشفت ذلك سؤال واحد تقريبا لا أحد حصلت على حق. من بين آلاف الأشخاص الذين أجروا الاختبار, أقل من 14 ٪ حصلوا على حق.

السؤال يتلخص في هذا: كيف تحسب هوامش النسبة المئوية?

السؤال

قل موقعك يحتوي على حاوية شعبة, وداخل ذلك ، المحتوى شعبة:

الآن ، دعنا نعطي هذا المحتوى شعبة الهامش العلوي:

.المحتوى الهامش الأعلى: 10 ٪ ؛

حسنًا ، إذن 10٪ ... لكن 10٪ ماذا? هذا هو السؤال الذي فقط 13.8٪ من الناس يمكنهم الإجابة بشكل صحيح. ضع في اعتبارك: هؤلاء الأشخاص لديهم حق الوصول إلى Google!

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

فكيف إذا قمت بتضييقه لك لأن السؤال في الاختبار هو في الواقع اختيار متعدد. إليك خياراتك:

10 ٪ من ارتفاع شعبة المحتوى
10٪ من ارتفاع حاوية div
10٪ من عرض div للمحتوى
10٪ من عرض حاوية div

تذكر أن 13.8٪ فقط من الناس يمكنهم اختيار الإجابة الصحيحة من هذه القائمة. هذا هو الطريق أسوأ من الصدفة!

انظر عن كثب إلى الإجابات ؛ سترى أن هناك شيئين فقط تحتاج إلى معرفتهما:

الحاوية أو المحتوى?

الاول هو حجم الهامش بناءً على حجم div div نفسه ، أو على حجم div container?

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

من المؤكد أن ثلثي الأشخاص الذين يأخذون الاختبار يحصلون على هذا الجزء من الإجابة بشكل صحيح.

العرض أو الارتفاع?

ثانيا, هو حجم الهامش على أساس عرض أو ارتفاع هذا العنصر?

إذا كنت تهتم ، فربما تكون على أهبة الاستعداد بالفعل. بالنسبة لعدد قليل جدًا من الأشخاص لاختيار الإجابة الصحيحة ، يجب أن يكون هذا سؤال خداع ، صحيح?

ومع ذلك ، أراهن أنك بالكاد تصدق ذلك الاجابة ليس ارتفاع. حسنا ، هذا ليس كذلك.

نعم ، نحن نتحدث عن هامش أعلى هنا. نعم ، حجم هذا الهامش هو قياس عمودي. نعم ، إذا كانت الكتلة تبلغ 50٪ من ارتفاع الحاوية ، ومنحتها هامشًا أعلى بنسبة 25٪ ، فمن المتوقع أن تصل إلى 25٪ من ارتفاع الحاوية.. وستكون مخطئا.

لا تشعر بالضيق إذا كنت تعتقد أنه يجب أن يكون الارتفاع. ما يقرب من 80 ٪ من الناس الذين يجرون الاختبار يتفقون معك:

يجعل الشعور ... لا ، حقا!

ما زلت لا أصدق ذلك؟ إليك اقتباس من مواصفات W3C CSS:

يتم حساب النسبة المئوية فيما يتعلق بعرض المربع المحتوي على المربع الذي تم إنشاؤه. لاحظ أن هذا صحيح بالنسبة لأعلى الهامش وأسفل الهامش أيضًا.

الشيء نفسه ينطبق على الحشو العلوي والسفلي ، في حال كنت تتساءل. بالنسبة للحدود ، من غير القانوني تحديد عرضها كنسبة مئوية.

لذا في هذه المرحلة ، ربما تفكر في أن منشئي CSS هم أيضًا مجنون, أو أنهم ارتكبوا خطأ غبي حقا. لكنني هنا لأخبركم ، هناك سببان وجيهان لوضع الهوامش العمودية على عرض الكتلة التي تحتوي على:

الاتساق الأفقي والرأسي

بالطبع ، هناك خاصية مختصرة تسمح لك بتحديد الهامش لجميع الجوانب الأربعة للكتلة:

الهامش: 10 ٪ ؛

هذا يمتد إلى:

أعلى هامش: 10 ٪ ؛ الهامش الأيمن: 10 ٪ ؛ الهامش السفلي: 10 ٪ ؛ الهامش الأيسر: 10 ٪ ؛

الآن ، إذا كتبت أيًا مما ذكر أعلاه ، فربما تتوقع أن تكون الهوامش على الجوانب الأربعة للكتلة متساوية الحجم ، أليس كذلك؟ ولكن إذا كان الهامش الأيسر والهامش الأيمن يستندان إلى عرض الحاوية ، وكان الهامش الأعلى والهامش السفلي يستندان إلى طوله ، فسيكونان مختلفان عادةً!

تجنب التبعية الدائرية

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

ارتفاع كتلة هو مسألة مختلفة. عادة ، الارتفاع يعتمد على الارتفاع المشترك لمحتوياته. تغيير ارتفاع المحتوى ، وقمت بتغيير ارتفاع الكتلة. انظر المشكلة?

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

أساس هوامش عمودية على عرض الحاوية تكسر تلك التبعية الدائرية ، وتمكن من وضع الصفحة.

ايس الطبقة

إذاً فهناك: أصعب سؤال في الاختبار ، والآن يمكنك الإجابة عليه. تريد أن تعرف كيف كنت تفعل في بقية الاختبار؟ جربه بنفسك. أعدك أن معظم الأسئلة أسهل بكثير من هذا السؤال.

في نفس الوقت ، أنا أبحث عن أصعب سؤال جديد! ما هي تفاصيل CSS التي تعتقد أن لا أحد يعرفها?

ملحوظة المحرر: هذا هو مكتوب ل Hongkiat.com من قبل كيفن يانك. كتب كيفن عن الويب منذ عام 1999 ، مع كتب على PHP ، CSS ، وجافا سكريبت باسمه. لقد استضاف أيضًا مواد إذاعية ، وتحدث في المؤتمرات ، وأنتج تدريبًا بالفيديو ، كل شيء عن الويب. يقود الآن فريق التطوير في Sit the Test ، وهو تطبيق ويب لإجراء الاختبارات عبر الإنترنت وأخذها.

اقرأ الآن: 10 خصائص CSS3 المخفية يجب أن تعرفها