آموزش Box Model در css

نویسنده : داود میرزایی

دوشنبه ۱۹ دی ۱۴۰۱ - ۰۹:۳۵ بازدیدها : 191

در طراحی وب هر عنصر یک باکس می باشد که تعیین اندازه، رنگ، پس زمینه و مکان این باکس های مستطیل شکل هدف موتور ترسیمات مرورگر می باشد. در این مقاله به مفهوم Box model می پردازیم.

تمام عناصر HTML می توانند به عنوان یک باکس در نظر گرفته شوند. در CSS اصطلاح Box model زمانی استفاده می شود که در مورد طراحی و طرح بندی صحبت می کنیم. در این آموزش به مفهوم Box model می پردازیم.

مرورگر ها با همه تگ ها همانند یک جعبه رفتار می کنند، یعنى همه تگ ها درون یک مستطیل فرضى قرار دارند. حال درون این مستطیل می تواند متن باشد، عکس باشد یا عناوین، جداول، لیست ها و...

 

content  : منظور محتویات تگ مى باشد (متن، عکس یا...)

padding  : فاصله خالى بین محتوا و خطوط حاشیه

border  : خطوط دور مستطیل فرضى که اطراف تگ قرار گرفته است.

background-color  : رنگ پس زمینه که شامل محتوا و قسمت padding مى باشد.

margin  : فاصله بین یک تگ تا تگ کنارى

 

1- Border

border خطوط حاشیه اى هستند که چهارطرف مستطیل فرضى را مشخص می کنند شما می توانید به کمک CSS نوع، ضخامت و رنگ آنها را تعیین کنید.
انواع خطوط حاشیه اى که توسط border-style تعیین مى شوند عبارتند از:

 

 

نوع border توسط border-style تعیین مى شود.

border-style: solid;

و براى هر چهار طرف به طورجداگانه هم می توان از خصوصیت هاى زیر استفاده کرد:

border-left-style  
border-right-style
border-top-style  
border-bottom-style

ضخامت border توسط border-width تعیین مى شود.

border-width: 2px;

و براى هر چهار طرف به طورجداگانه هم می توان از خصوصیت هاى زیر استفاده کرد:

border-left-width 
border-right-width 
border-top-width  
border-bottom-width

رنگ border توسط border-color تعیین مى شود.

border-color: red;

و براى هر چهار طرف به طورجداگانه هم می توان از خصوصیت هاى زیر استفاده کرد:

border-left-color  
border-right-color 
border-top-color 
border-bottom-color

مى توان توسط خصوصیت border همه موارد فوق را یکجا تنظیم کرد:

 

 

همچنین می توان جداگانه هم خطوط حاشیه را کنترل کرد :

border-top  
border-right  
border-left  
border-bottom

 

2- padding و margin

به کمک خصوصیت هاى padding و margin مى توان فضاى خالى بین محتوا تا border و همچنین فاصله بین تگ ها را تنظیم کرد.

padding: 2px;

یعنى فضاى خالى بین محتوا وborder از هر چهارطرف به اندازه 2px باشد.
براى کنترل padding یا margin براى هر چهارطرف به طور جداگانه هم مى توان از روشهاى مختلفى استفاده کرد:

padding: 2px 0 5px 4px;

به صورت ساعتگرد و از بالا padding را تعیین می کند. پس از بالا 2px ، راست 0، پایین 5px و چپ 4px فضاى خالى ایجاد کرده ایم.

padding: 5px 10px;

اگر فقط دو عدد داشته باشیم اولى مربوط به بالا و پایین و دومى مربوط به چپ و راست مى باشد.

خصوصیت هاى زیر نیز جداگانه می توانند padding و margin را تنظیم کنند:

padding-top  
padding-right
padding-bottom 
padding-left
margin-top
margin-right
margin-bottom
margin-left

معمولا از واحد px یا em استفاده مى شود که 20px یعنى فضایى به اندازه 20 پیکسل ایجاد شود و 3em یعنى فضایى به اندازه سه برابر اندازه فونتى که براى تگ تعیین شده است. همچنین از % نیز مى توان استفاده کرد که براساس عرض صفحه نمایش تعیین مى شود.

 

3- Box-sizing

در CSS3 این امکان فراهم شده که مقدار width و height باز تعریف شوند، یعنى در حالت عادى این اندازه ها به محتوا اختصاص می یابد و اندازه هاى margin ،padding و border به آن اضافه مى شود، مانند آنچه گفتیم. اما با تعیین box-size به یکى از حالت هاى زیر مى توان این رفتار را تغییر داد:

content-box  : حالت پیش فرض که توضیح داده شد.

padding-box  : در این حالت مقدار width به اندازه محتوا و padding تعلق مى گیرد.

 

 

border-box  : در این حالت مقدار width به اندازه محتوا و padding و border اختصاص مى یابد.

 

 

 

4- عرض و ارتفاع

برای تعیین اندازه عرض و ارتفاع جعبه ها از خصوصیت height و width استفاده می کنیم:

width: 300px;
width: 30%;
width: 20em;

از واحد هاى پیکسل، درصد و em براى تعیین اندازه مى توان استفاده کرد. em براساس اندازه فونت جعبه محاسبه می کند یعنی اگر اندازه فونت 24px باشد 2em برابر 2*24 پیکسل می شود، و درصد، اندازه جعبه را براساس درصدی از اندازه جعبه ی پدر تعیین می کند. برای محاسبه عرض و ارتفاعی که یک تگ در صفحه اشغال می کند باید اندازه padding ،border و margin را هم در نظر بگیریم.

p
{
width: 50px;
height: 50px;
background-color: #cccccc
}

 

فایل ها

• آموزش Box Model در css

  دانلود