مدل جعبه ای CSS/بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model

بهمن ۱۹, ۱۳۹۷ ثبت دیدگاه 133 بازدید

مدل جعبه ای CSS

تمام عناصر HTML را می توان به عنوان یک جعبه در نظر گرفت. در CSS، اصطلاح “مدل جعبه” هنگام صحبت در مورد طراحی و طرح استفاده می شود.

مدل جعبه CSS اساسا جعبه ای است که در اطراف هر عنصر HTML ساخته می شود. این شامل: حاشیه ها، مرزها، پدینگ ها، و محتوای واقعی است. تصویر زیر مدل جعبه را نشان می دهد، می توانید بخوبی تفاوت عناصر ذکر شده را ببینید:

مدل جعبه ای CSS/بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model

توضیح بخش های مختلف:

Content– محتوای جعبه، جایی که متن و تصاویر ظاهر می شود.
Padding– منطقه اطراف محتوا را پاک می کند. پدینگ شفاف است و هیچ رنگ یا نشانه ظاهری ندارد.
Border– مرزی است که در اطراف محتوا و پدینگ قرار دارد.
Margin– یک منطقه خارج از مرز را پاک می کند. حاشیه شفاف است و هیچ رنگ یا نشانه ظاهری ندارد.
مدل جعبه اجازه می دهد تا ما یک مرز را در اطراف عناصر اضافه کنیم و بین عناصر فضایی تعریف کنیم.

مثال:

<br>
<html><br>
<head><br>
<style><br>
div {<br>
  background-color: lightgrey;<br>
  width: 300px;<br>
  border: 25px solid green;<br>
  padding: 25px;<br>
  margin: 25px;<br>
}<br>
</style><br>
</head><br>
<body>
<p><h2>Demonstrating the Box Model</h2></p>
<p><p> مدل جعبه سی اس اس اساسا جعبه ای است که در اطراف هر عنصر اچ تی ام ال  پیچیده می شود. این شامل: مرزها، پدینگ ها، حاشیه ها و محتوای واقعی است </p> </p>
<p><div>دراین جعبه ما یک پدینگ ۲۵پیکسلی و  حاشیه ۲۵پیکسلی و یک مرز سبز۲۵پیکسلی ایجاد کرده ایم. </div></p>
<p></body><br>
</html></p>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 25px solid green;

padding: 25px;

margin: 25px;

}

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p> مدل جعبه سی اس اس اساسا جعبه ای است که در اطراف هر عنصر اچ تی ام ال پیچیده می شود. این شامل: مرزها، پدینگ ها، حاشیه ها و محتوای واقعی است </p>

<div>دراین جعبه ما یک پدینگ ۲۵پیکسلی و حاشیه ۲۵پیکسلی و یک مرز سبز۲۵پیکسلی ایجاد کرده ایم. </div>

</body>

</html>

با اجرای کد بالا باید تصویر زیر را درخروجی ببینید:

مدل جعبه ای CSS/بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model

عرض و ارتفاع یک عنصر

به منظور تنظیم عرض و ارتفاع یک عنصر به طور صحیح در تمام مرورگرها، شما باید بدانید که مدل جعبه چگونه کار می کند.

نکته مهم: هنگامی که ویژگی های عرض و ارتفاع یک عنصر را با CSS تنظیم می کنید، فقط عرض و ارتفاع محتوا را تعیین می کنید. برای محاسبه ابعاد کامل یک عنصر، شما همچنین باید حاشیه ها، پدینگ ها و مارجین ها را هم اضافه کنید.

فرض کنید می خواهیم یک عنصر <div> را به عرض کل ۳۵۰ پیکسل بسپاریم:

<br> <html><br> <head><br> <style><br> div {<br> width: 320px;<br> padding: 10px;<br> border: 5px solid gray;<br> margin: 0;<br> }<br> </style><br> </head><br> <body>

<h2>Calculate the total width:</h2>

<img src=”http://tiktheme.com/klematis4_big.jpg” width=”350″ height=”263″ alt=”Klematis”>
<div>عکس بالا ۳۵۰پیکسل عرض دارد که مجموع عرض عکس بعلاوه عرض های پدینگ و حاشیه و مرز است.</div>

</body>
</html>

<html>

<head>

<style>

div {

width: 320px;

padding: 10px;

border: 5px solid gray;

margin: ;

}

</style>

</head>

<body>

<h2>Calculate the total width:</h2>

<div>عکس بالا ۳۵۰پیکسل عرض دارد که مجموع عرض عکس بعلاوه عرض های پدینگ و حاشیه و مرز است.</div>

</body>

</html>

با اجرای کد بالا این تصویر را درخروجی می بینیم:

مدل جعبه ای CSS/بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model

در اینجا نحوه محاسبه عرض را ذکر می کنم:
۳۲۰ پیکسل (عرض)
+ ۲۰ پیکسل (پد چپ + راست)
+ ۱۰ پیکسل (سمت چپ + راست)
+ ۰px (حاشیه سمت چپ + راست)
= ۳۵۰ پیکسل
عرض کلی یک عنصر باید به صورت زیر محاسبه شود:

مجموع عرض عناصر = عرض متن یا عنصر مورد نظر + حاشیه چپ + حاشیه راست + مارجین چپ + مارجین راست + حاشیه سمت چپ + حاشیه سمت راست

ارتفاع کلی یک عنصر باید به صورت زیر محاسبه شود:

مجموع ارتفاع عنصر = ارتفاع + پدینگ بالا + پدینگ پایین + مارجین بالا + مارجین پایین + حاشیه بالا + حاشیه پایین

نکته: در صورتی که خواستید از کدی که در مثال بالا ذکر شده استفاده کنید، دقت داشته باشید که باید نام یک عکس را که در سیستم خود دارید بطور دقیق ذکر کنید چون این عکس با این نام در سیستم شما موجود نیست.

بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model

لطفا امتیاز بدهید

منبع مطلب