الرئيسية دورة تصميم المواقع html css تلعم لغة css: نظام الصندوق CSS Boxes (درس مهم جدا)

تلعم لغة css: نظام الصندوق CSS Boxes (درس مهم جدا)

تلعم لغة css: نظام الصندوق CSS Boxes (درس مهم جدا)

في هذا الدرس سنرى طريقة التحكم في الصناديق باستعمال css  ب:

  • التحكم في الحجم
  • عمل خطوط محيطة
  • اختيار المساحات الداخلية والخارجية
  • اظهار واخفاء المربعات

الطول والعرض

يمكن التحكم في طول وعرض أي مربع باستعمال خاصيتين
الطول  width
العرض height
<div class="box">
<p>يمكنك تعلم أي شيء، ما دمت ترغب في ذلك وتعمل لتحقيق الأمر.</p>
</div>
باضافة كود css

div.box {
height: 300px;
width: 300px;
background-color: #bbbbaa;}
p {
height: 75%;
width: 75%;
background-color: #0088dd;}

المربع باللون الرمادي يحمل class اسمها box وهو بعرض 300 بيكسل على 300 طول. وداخله فقرة تحتل 75 في المائة من المساحة طولا وعرضا.

سنحصل على النتيجة التالية :


يمكن كذلك التحكم في الطول والعرض بطريقة أخرى، وذلك باستعمال خاصيتين أخريين وهما:
Max-width
Max-height
Min-width
Min-height
Max  يجب أن يكون الحجم اقل من هذا المحدد وأن لا يتجاوزه.
Min يجب أن يكون الحجم أكبر من هذا وأن لا يكون اقل منه


Overflow

يحتمل قيمتين
Hidden  إذا تجاوز الصندوق الحد المحدد قم باخفاءه
Scroll إذا تجاوز الصندوق الحجم المحدد قم بإظهار خط النزول للأسفل

نظام الصندوق

من القواعد التي تتطلب القليل من الإنتباه لفهمها. وهي تتألف من القواعد التالية:

Margin  :  الهامش الذي يفصل بين الصندوق ومحيطه من الخارج
Padding :  الهامش من داخل الصندوق
Boder    :  الحد المحيط بالعنصر

شكل نظام الصندوق CSS BOX MODEL
نظام الصندوق CSS BOX MODEL

الحد Border

.box{
border: 1px #000000 solid;
}

الحد يتم اضافته باستعمال قاعدة border والتي تحتوي على هذه القيم:
حجم الخط ولونه ونوعه. النوع يمكن أن يكون متواصل، على شكل نقط..

المحيط الداخلي Padding

.box{
padding: 10px  0px 5px 30px;
}

المحيط الداخلي هنا يحمل أربعة قيم وهي على التوالي أعلى يمين اسفل يسار:
10px في الأعلى
0px عل اليمين
5px في الأسفل
30px على اليسار
.box{
padding: 10px;
}

هنا 10px من جميع الجهات

.box{
padding: 10px 0px;
}

هنا 10px  أعلى وأسفل، ثم 0px يمين ويسار

المحيط الخارجي Margin

يعمل بنفس طريقة padding اي المحيط الداخلي

التوسيط Centring

لجعل أي مربع في الوسط يكفي استعمال قاعدة المحيط الخارجي من اليمين واليسار مثلا:

.box{
margin-right: auto;
margin-left: auto;
}

أو بكل بساطة:
.box{
margin: 0px auto;
}

التوجيه Float
يمكن توجيه أي عنصر إلى اليمين أو اليسار باستعمال قاعدة float والتي تحتمل قيمتين: يسار right  أو يمين left

.box { 
float: right;
}

الإظهار Display

تحتمل أربع خيارات
Inline  يظهر الصنادق بجانب بعضها البعض
Inline-block يلعب نفس الدور بالنسبة ل inline  إلا أنه يمكن تحديد الطول والعرض.
Block يظهر الصنادق لوحدها
None اخفاء الصندوق

الرؤوس الدائرية

لجعل الرؤوس الخاصة بأي صندوق دائرية، يكفي اضافة قاعدة border-radius كما يلي:

.box {
border-radius: 5px;
}

كلما زادت قيمة القاعدة كلما أصبحت الرؤوس أكثر دائرية.
مواضيع مشابهة
On.

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله