تقديم مجموعة من الشروحات والمواضيع التي تهم بالحاسوب والانترنت من حيث الاستخدام والانشاء والتصميم والحماية، مع الاهتمام بمدونات بلوجر ومواقع التواصل الاجتماعي خصوصا فيسبوك وتويتر

النشرة البريدية @

خصائص التحكم في نموذج الصندوق في CSS

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

خصائص نموذج الصندوق في CSS
أهلا و سهلا بكم من جديد، 
سنتعرف اليوم عن الخصائص التي تتحكم في نموذج الصندوق في CSS، إذ من المفترض أن كل عنصر يحتوي على محتويات content وحشو padding وإطار  border وحاشية margin، هذه الخصائص يمكننا التحكم فيها من خلال إضافة مجموعة من القيم. سنتعرف في البداية على نموذج الصندوق في CSS، ثم خاصية الحاشية margin، و خاصية الحشو padding، وخصائص الإطارات، وارتباطا بنموذج الصندوق سنتعرف على خصائص تعويم العناصر ووضعية العناصر والطبقات، وخاصيتي العرض والارتفاع width و height.

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

نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، المثال التوضيحي يوضح أجزاء نموذج الصندوق:
الخصائص التي تتحكم بالصناديق المختلفة هي padding وmargin  و border، سنستعرضها بالتفصيل.

خاصية الحاشية margin 

خاصية الحاشية margin تتحكم بالمسافة بين كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة:
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
أو يمكننا تجميع كل هذه السطور في سطر واحد، مرتبة كالتالي: أعلى يمين أسفل يسار.
margin: 5px 5px 5px 5px;

خاصية الحشو padding 

خاصية الحشو padding تتحكم في المسافة في داخل العنصر نفسه بين محتويات العنصر والإطار.
padding-left:120px;
padding: 20px 20px 20px 80px;

خصائص الإطارات border

أنظر الدرس

خصائص تعويم العناصر ووضعية العناصر والطبقات

أنظر الدرس

خصائص العرض والارتفاع width و height

خصائض العرض "width"

width: 200px;
max-width:310px ;
min-width:310px ;

خصائص الارتفاع "height"

height: 500px;
max-height:310px ;
min-height:310px ;

ليست هناك تعليقات :

أضف تعليق

free tracking