من قبل ، واجهت العديد من المزالق الغريبة عند تعلم bootstrap. إذا قمت بعملي التحضيري قبل تعلم Bootstrap ، فيمكنني تجنب بعض المزالق إلى حد أكبر أو أقل. أدناه ، سوف يقدم لك المحرر معرفة سمة صندوق الحدود.
في ملف CSS الخاص بـ Boostrap: boostrap.css ، هناك جزء من الكود:
* {-webkit-box-size: border-box ؛ -Moz-Box-Size: Border-Box ؛ حجم الصناديق: صندوق الحدود ؛ }هذا يعني أنه عند كتابة الكود ، ستكون هذه الخاصية في كل مكان. إذن ما هو بحق الجحيم هذا حجم الصناديق: Boder-Box؟ دعونا نلقي نظرة أولاً على قطعة رمز عادية للغاية:
<viv> <viv> </viv> </viv>
قم بتشغيل الكود لمعرفة ذلك: الارتفاع الخارجي هو 702 بكسل ، والعرض الداخلي هو 500 بكسل ، والارتفاع 500 بكسل ؛ لا ينبغي أن يكون لدى الجميع أي شكوك هنا ، دعنا نلقي نظرة على قطعة أخرى من الكود الآن:
* {-webkit-box-size: border-box ؛ -Moz-Box-Size: Border-Box ؛ حجم الصناديق: صندوق الحدود ؛ } <viv> <viv> </viv> </viv>هذا الرمز هو في الواقع إضافة الرموز الأولى. يمكن فهم ببساطة أنك تبدأ الآن في كتابة الكود في إطار Boostrap. نتيجة تشغيل الكود هي: عرض الخارجي هو 500 بكسل وارتفاع داخلي هو 298 بكسل ؛
سبب هذه النتيجة هو: حجم الصناديق: صندوق الحدود بحيث لا يتأثر عرض وارتفاع العناصر بالحشو والحدود. على سبيل المثال ، في الكود أعلاه ، حتى لو كان الخارجي لديه حشوة وحدود ، فإن الحشو والحدود لن يؤثر على عرض وارتفاع الخارجي ، ولا يزال عرض وارتفاع الخارجي 500 بكسل ؛ ولكن أين ذهب الحشو والحدود؟ الجواب: اذهب إلى الداخل! افتح أداة تصحيح الأخطاء الخاصة بالمتصفح وشاهد تفاصيل نمط الخارجي:
يمكننا أن نرى بوضوح أن الحشو والحدود كلاهما صالحان ، لكنهما يشغلان المساحة الداخلية للخارج. نظرًا لأن الحشو: يحتل 100 بكسل عرض 200 بكسل وقيمة الارتفاع الخارجي ، وتحتل الحدود عرض 2 بكسل وقيمة الارتفاع للداخلية ، بحيث يمكن للداخلية الحصول فقط على عرض 298 بكسل وقيمة الارتفاع الخارجي.
إذا كانت لديك خبرة في تطوير الويب تحت IE ، فستجد أن حجم الصندوق: صندوق الحدود هو الوضع الغريب للإصدار السفلي من IE.
ما سبق هو المعرفة ذات الصلة حول إعداد boostrap للمربع الحدودي الذي قدمه لك المحرر. هل تعلمت ذلك؟ إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. في الوقت نفسه ، أود أن أشكر الجميع على دعمهم لموقع Wulin.com!
فيما يلي مقدمة موجزة لفهم صندوق الحدود حجم الصناديق
-بكيت-بوكس-حجم: صندوق الحدود ؛ ثم سيشمل العرض والارتفاع الذي وضعته DIV الحدود والحشو
<! doctype html> <html> <head> <title> size-size </title> <style type = "text/css" Border-Box ؛ "> Special </viv> </body> </html>