Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

[ دورة CSS ] الصندوق النموذجي CSS – الدرس الاول

Home // Blog // [ دورة CSS ] الصندوق النموذجي CSS – الدرس الاول

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
يمكن اعتبار وسوم HTML مثل الصندوق , وباستخدام لغة CSS مع الصندوق النموذجي يعني أننا نستخدم التصميم والتخطيط .
يعتبر الصندوق النموذجي مهماً في الاحتواء على عناصر HTML ويتألف من الهوامش الخارجية والحدود والهوامش الداخلية ومحتوى الصفحة (النص) .
في الصورة التالية تشرح لنا كيفية شكل الصندوق النموذجي :

 الصندوق النموذجي

شرح الصورة والاختلافات بين الأجزاء المختلفة :

  • الهوامش الخارجية margin : تزيد المسافة حول حواف الجدول كما أن الهوامش الخارجية لاتحتوي على لون خلفية فهي شفافة تماماً .
  • الحدود border : وهي المساحة بين الهوامش الداخلية والمحتوى . يتأثر الحدود مباشرة مع لون خلفية الجدول .
  • الهوامش الداخلية padding : تزيد المسافة حول المحتوى . تتأثر الهوامش الداخلية مباشرة مع لون خلفية الجدول أيضاً .
  • المحتوى : محتوى الجدول حيث تظهر النصوص والصور للزائر .

لكي تقوم بضبط الارتفاع والعرض للجدول يجب أن تعرف تماماً كيف يعمل الصندوق النموذجي .


العرض والارتفاع للعناصر

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

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

دعونا نقوم بعملية الحساب الآن :

  1. العرض 250px
  2. ضبط اليمين واليسار للهوامش الداخلية + 20px
  3. ضبط اليمين واليسار للحدود + 10px
  4. ضبط اليمين واليسار للهوامش الخارجية + 20px
  5. أي الناتج أو العرض الكلي = 300px

لنفترض أن العرض الكلي هو 250 بكسل عندها يمكننا التعديل على العناصر كالتالي :

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

العرض الكلي للعنصر يجب أن يتم حسابه كالتالي :
العرض الكلي للعنصر = العرض + الهوامش الداخلية اليمنى + الهوامش الداخلية اليسرى + حدود اليسار + حدود اليمين + الهوامش الخارجية اليسرى + الهوامش الخارجية اليمنى .

الارتفاع الكلي للعنصر يجب أن يتم حسابه كالتالي :

الارتفاع الكلي للعنصر = الارتفاع + الهوامش الداخلية العليا + الهوامش الداخلية السفلى + أعلى الحدود + أسفل الحدود + + الهوامش الخارجية العليا + + الهوامش الخارجية السفلى


مسألة توافقية المتصفحات

ان المسائل السابق لايظهر بشكل جيد على متصفح اكسبلورر IE8 الاصدار الثامن والنسخ الأقدم .
ان المتصفح IE8 الاصدار الثامن والنسخ الأقدم تتضمن عرض الهوامش الداخلية والحدود اذا تم تحديد نوع صفحة HTML .
لحل هذه المشكلة قم بإضافة تعريف الصفحة <!DOCTYPE> في أعلى صفحة HTML
مثال

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] الصندوق النموذجي CSS – الدرس ال... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM