it-swarm.dev

الفرق بين العرض التلقائي والعرض 100 في المئة

في السابق ، كان افتراضاتي حول العرض التلقائي يعمل كما لو كانت محتوياته الآن قليلة المعرفة ولا يعمل كما لو كان عرض الكتلة ممتلئًا. لذلك أنا مرتبك هنا مع العرض 100 ٪ والعرض التلقائي. هل يمكن لأي شخص أن يصفني عن الاختلافات بين هذه الشرح مع شرح

70
Navin Rauniyar

عرض السيارات

العرض الأولي لعنصر مستوى الكتلة مثل div أو p تلقائي. هذا يجعلها تتوسع لتشغل كل المساحة الأفقية المتاحة داخل الكتلة التي تحتوي عليها. إذا كان يحتوي على أي حشوة أفقية أو حد ، فإن عروضها لا تضيف إلى العرض الكلي للعنصر.

العرض 100 ٪

من ناحية أخرى ، إذا قمت بتحديد العرض: 100٪ ، فسيكون العرض الإجمالي للعنصر 100٪ من الكتلة المحتوية عليه بالإضافة إلى الهامش الأفقي والحشو والحدود (إلا إذا كنت قد استخدمت التحجيم المربع: border-box تتم إضافة الهوامش فقط إلى 100٪ لتغيير كيفية حساب إجمالي عرضها). قد يكون هذا ما تريده ، ولكن على الأرجح ليس كذلك.

لتصور الفرق ، انظر هذه الصورة:

enter image description here

المصدر

101
Bhojendra Rauniyar
  • سيحاول width: auto; بأقصى قدر ممكن الإبقاء على عنصر بنفس عرض الحاوية الأصلية عند إضافة مساحة إضافية من الهوامش أو الحشو أو الحدود.

  • width: 100%; سيجعل العنصر واسع مثل الحاوية الأصلية. سيتم إضافة تباعد إضافي إلى حجم العنصر دون النظر إلى الأصل. هذا عادة ما يسبب مشاكل.

enter image description hereenter image description here

59
Ian Jennings

إنه حول الهوامش والحدود. إذا كنت تستخدم width: auto ، ثم أضف حدًا ، فلن تصبح div أكبر من الحاوية الخاصة بها. من ناحية أخرى ، إذا استخدمت width: 100% وبعض الحدود ، فسيكون عرض العنصر 100٪ + حد أو هامش. لمزيد من المعلومات راجع هذا .

8
Mateusz

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

من ناحية أخرى ، إذا قمت بتحديد العرض: 100٪ ، فسيكون العرض الإجمالي للعنصر 100٪ من الكتلة المحتوية عليه بالإضافة إلى الهامش الأفقي والحشو والحدود (إلا إذا كنت قد استخدمت التحجيم المربع: border-box تتم إضافة الهوامش فقط إلى 100٪ لتغيير كيفية حساب إجمالي عرضها). قد يكون هذا ما تريده ، ولكن على الأرجح ليس كذلك.

مصدر:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

4
Gokul Gopala Krishnan

باستخدام العرض: السيارات ؛ + عرض: كتلة مضمنة. في المغلق إعطاء تأثير رائع.

width : auto;
display: inline-block;
2
Mohammed Javed

العرض الأولي لعنصر مستوى الكتلة مثل div أو p تلقائي.

استخدم العرض: تلقائي للتراجع عن العروض المحددة بشكل صريح.

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

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

2
Michael Unterthurner

العرض 100 ٪: سيجعل المحتوى بنسبة 100 ٪. سيتم إضافة الهامش ، الحد ، الحشو إلى هذا العرض ، وسوف يتجاوز العنصر إذا تمت إضافة أي من هذه العناصر.

العرض التلقائي: سوف يلائم العنصر في المساحة المتاحة بما في ذلك الهامش والحدود والحشو. المساحة المتبقية بعد ضبط الهامش + الحشو + الحدود ستكون متاحة العرض/الارتفاع.

العرض 100٪ + تحجيم الصندوق: صندوق الحدود: سوف يلائم أيضًا العنصر في المساحة المتاحة بما في ذلك الحدود ، الحشو (الهامش سيجعله يفيض في الحاوية).

1
Nishant Baranwal