هل تعرف كيفية استخدام سمة CSS overflow دعنا نقدمها لك بالتفصيل! لقد تراكمت لدينا بعض الخبرة ونود أن نشاركها معكم، يرجى تصحيح بعضكم البعض.
قيمة خاصية تجاوز سعة CSS :
1. مرئي: القيمة الافتراضية، لن يتم قطع المحتوى وسيتم عرضه خارج مربع العنصر؛
2. مخفي: سيتم قطع المحتوى وسيكون المحتوى المتبقي غير مرئي؛
3. التمرير: سيتم قطع المحتوى، لكن المتصفح سيعرض أشرطة التمرير لعرض المحتوى المتبقي؛
4. تلقائي: إذا تم قطع المحتوى، فسيعرض المتصفح أشرطة التمرير لعرض المحتوى المتبقي؛
هناك أيضًا خاصيتان شقيقتان لـ overflow و overflow-y و overflow-x، والتي نادرًا ما يتم استخدامها. دعونا نلقي نظرة على كل من هذه القيم ونناقش الاستخدام والتقنيات الشائعة.
(1) السيارات
القيمة التلقائية للتجاوز تشبه إلى حد كبير قيمة التمرير. الشيء الوحيد الذي تحله هو مشكلة ظهور أشرطة التمرير عندما لا تحتاج إليها.
(٢) مخفي
القيمة المعاكسة للقيمة الافتراضية المرئية مخفية. سوف يخفي كل شيء خارج الصندوق. يعد هذا مفيدًا حقًا للتعامل مع المحتوى الديناميكي الذي قد يسبب بعض مشكلات التخطيط بسبب تجاوز المحتوى. ومع ذلك، يرجى تذكر أن المحتوى المخفي باستخدام هذه الطريقة لن يكون مرئيًا على الإطلاق (إلا إذا نظرت إلى الكود المصدري). على سبيل المثال، إذا قام بعض المستخدمين بتعيين الخط الافتراضي للمتصفح الخاص بهم ليكون أكبر مما كنت تريده، فسوف تقوم بدفع بعض النص خارج المربع وإخفائه تمامًا.
(3) مرئية
إذا لم تقم بتعيين سمة التجاوز، فستكون قيمة سمة التجاوز الافتراضية مرئية. لذا بشكل عام، لا يوجد سبب لتعيين خاصية التجاوز على وجه التحديد لتكون مرئية إلا إذا كنت تريد تجاوز القيمة التي تم تعيينها عليها في مكان آخر. الشيء المهم الذي يجب تذكره هنا هو أنه على الرغم من أن المحتوى خارج الصندوق مرئي، إلا أن المحتوى لا يؤثر على سير عمل الصفحة. بشكل عام، على الأقل لا تحتاج إلى تعيين ارتفاع ثابت للمربعات التي يكون محتواها نصًا، لذلك لن تواجه هذا الموقف.
(4) انتقل
سيؤدي تعيين قيمة تجاوز السعة للمربع للتمرير إلى إخفاء المحتوى المعروض خارج المربع، ولكنه سيوفر شريط تمرير للتمرير داخل المربع بحيث يمكن عرض المحتوى المتبقي. ومن الجدير بالذكر أن استخدام التمرير سيؤدي إلى إنشاء أشرطة تمرير أفقية وعمودية في نفس الوقت، حتى لو كان المحتوى يتطلب واحدًا منهم فقط.
مثال: استخدام قيم السمات المرئية والمخفية
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>visible: القيمة الافتراضية، لن تتم معالجة المحتوى الفائض، وسيتم عرض المحتوى خارج منطقة محتوى العنصر <br>مخفي: إخفاء محتوى منطقة محتوى العنصر الفائض؛ <br>التمرير: إخفاء محتوى منطقة محتوى العنصر الفائض، وإنشاء شريط تمرير على يسار العنصر وأسفله العناصر الموجودة في العنصر عن طريق تحريك شريط التمرير.<br>تلقائي: في حالة حدوث تجاوز للمحتوى، سيتم إنشاء شريط تمرير على الجانب الأيسر من العنصر. يمكنك عرض كل المحتوى الموجود في العنصر عن طريق تحريك شريط التمرير ;<br>ورث: وراثة قيمة سمة التجاوز من العنصر الأصلي. </div><divclass=scroll>مرئي: القيمة الافتراضية، لن تتم معالجة المحتوى الفائض، وسيتم عرض المحتوى خارج منطقة محتوى العنصر؛<br>مخفي: إخفاء محتوى منطقة محتوى العنصر الفائض؛<br >التمرير: قم بإخفاء المحتوى الموجود في منطقة محتوى العنصر الفائض، وقم بإنشاء شريط تمرير على الجانب الأيسر وأسفل العنصر، ويمكنك عرض كل المحتوى الموجود في العنصر عن طريق تحريك شريط التمرير؛<br> تلقائي: في حالة حدوث تجاوز للمحتوى، سيكون على الجانب الأيسر من العنصر. قم بإنشاء شريط تمرير، ويمكنك عرض كل المحتوى الموجود في العنصر عن طريق تحريك شريط التمرير؛<br>وراثة: ترث قيمة التجاوز. السمة من العنصر الأصل. </div><divclass=auto>مرئي: القيمة الافتراضية، لن تتم معالجة المحتوى الفائض، وسيتم عرض المحتوى خارج منطقة محتوى العنصر؛<br>مخفي: إخفاء محتوى منطقة محتوى العنصر الفائض؛<br >التمرير: قم بإخفاء المحتوى الموجود في منطقة المحتوى الخاصة بالعنصر الفائض، وقم بإنشاء شريط تمرير على الجانب الأيسر وأسفل العنصر، ويمكنك عرض كل المحتوى الموجود في العنصر عن طريق تحريك شريط التمرير؛<br> تلقائي: في حالة حدوث تجاوز للمحتوى، سيكون على الجانب الأيسر من العنصر. قم بإنشاء شريط تمرير، ويمكنك عرض كل المحتوى الموجود في العنصر عن طريق تحريك شريط التمرير؛<br>وراثة: ترث قيمة التجاوز. السمة من العنصر الأصل. </div></body></html>نتائج التشغيل:
