في هذا الدرس سنرى طريقة التحكم في الصناديق باستعمال css ب:
الطول width
العرض height
المربع باللون الرمادي يحمل class اسمها box وهو بعرض 300 بيكسل على 300 طول. وداخله فقرة تحتل 75 في المائة من المساحة طولا وعرضا.
سنحصل على النتيجة التالية :
يمكن كذلك التحكم في الطول والعرض بطريقة أخرى، وذلك باستعمال خاصيتين أخريين وهما:
Max-width
Max-height
Min-width
Min-height
Max يجب أن يكون الحجم اقل من هذا المحدد وأن لا يتجاوزه.
Min يجب أن يكون الحجم أكبر من هذا وأن لا يكون اقل منه
يحتمل قيمتين
Hidden إذا تجاوز الصندوق الحد المحدد قم باخفاءه
Scroll إذا تجاوز الصندوق الحجم المحدد قم بإظهار خط النزول للأسفل
Inline يظهر الصنادق بجانب بعضها البعض
Inline-block يلعب نفس الدور بالنسبة ل inline إلا أنه يمكن تحديد الطول والعرض.
Block يظهر الصنادق لوحدها
None اخفاء الصندوق
- التحكم في الحجم
- عمل خطوط محيطة
- اختيار المساحات الداخلية والخارجية
- اظهار واخفاء المربعات
الطول والعرض
يمكن التحكم في طول وعرض أي مربع باستعمال خاصيتينالطول width
العرض height
<div class="box">
<p>يمكنك تعلم أي شيء، ما دمت ترغب في ذلك وتعمل لتحقيق الأمر.</p>
</div>
باضافة كود cssdiv.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 |
الحد 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;
}
كلما زادت قيمة القاعدة كلما أصبحت الرؤوس أكثر دائرية.