آموزش کامل و استفاده از Box-Sizing

آموزش کامل و استفاده از Box-Sizing

در خدمت شما عزیزان هستیم با آموزش یکی از مفاهیم تقریبا سخت و جدید طراحی وب سایت که آن هم چیزی نیست جز ، Box-Sizing ، در این مقاله سعی شده ، بطور کامل در مورد آموزش کامل و استفاده از Box-Sizing با شما عزیزان صحبت کنیم . با ما همراه باشید .

آموزش کامل و استفاده از Box-Sizing

خب همینطور که در تصویر بالا میبینید ، یک باکس یا یک Div در طراحی وب ، شامل موارد زیر است :

  1. Margin
  2. Border
  3. Padding
  4. Content

حالا میپردازیم به توضیحات موارد بالا  :

Margin : 

این مورد که به آن فاصله بیرونی نیز می گویند ، یعنی فاصله ای که باکس از اطراف خود به واسطه اندازه هایی که به Margin داده می شود ، می گویند . ( در تصویر فوق به رنگ مشکی نمایش داده شده است )

Border :

خط مرزی نیز به آن میگویند ولی بهتر است شما ترجمه اش نکنید و همینطور Border صدایش بزنید ، این خاصیت در CSS به شما این اجازه را می دهد تا خط مرز ها یا لبه ها را تعیین کنید ، این قسمت دقیقا بین Padding و Margin قرار دارد . ( در تصویر فوق به رنگ قرمز مشخص شده است )

Padding :

بعد از محتوای داخل باکس ، اولین قسمتی که وجود دارد ، Padding  می باشد ، این خصوصیت نیز فاصله بین محتوا و Border را مشخص میکند . ( در تصویر فوق به رنگ سبز مشخص شده است )

Content :

محتوای باکس ، و یا به عبارت دیگر محلی که متون و محتوای شده در داخل Div در این قسمت قرار میگیرد . ( در تصویر فوق به رنگ خاکستری مشخص شده است )

 

خب حالا میرسیم به آموزش کامل و استفاده از Box-Sizing :

ویژگی Box-Sizing دارای ۲ مقدار Content-Box و Border-Box می باشد .

اجازه بدهید به شما اینگونه بگویم ، وقتی شما برای یک باکس یا همان Div طول و عرض را مشخص میکنید ، در اصل فقط برای قسمت محتوا ( Content ) طول وعرض  را مشخص میکنید. تا اینجای کار بسیار ساده بود ، اما مشکل کار اینجاست ، وقتی شما به همان Div خود میخواهید مقداری Padding بدهید ، Div شما بزرگتر می شود و این تمام طراحی ها و محاسبات را خراب می کند . ویژگی Box-Sizing این مشکل را حل کرده است ، به مثال پایین توجه کنید :

 

Content-Box :

width: 300px;
height: 100px;
padding: 30px;
border: 1px solid blue;
box-sizing: content-box;

Content-Box :

Border-Box :

width: 300px;
height: 100px;
padding: 30px;
border: 1px solid red;
box-sizing: border-box;

Border-Box :

 

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

در باکس Content-Box ما یک مستطیل به طول ۳۰۰px و عرض ۱۰۰px داریم و همچنین یک Padding با مقدار ۳۰px داریم ، میبینید که پس از افزودن مقدار padding به باکس اندازه ها کامل تغییر کرده اند و به هر ضلع باکس ۳۰px اضافه شده است ، در طراحی ها این موضوع طراحی وب را دچار مشکل میکرد . اما با افزودن ویژگی Border-box  در مستطیل دومی میبینید که پس از افزودن مقدار padding همچنان طول و عرض ثابت است ، و هیچ تغییری را مشاهده نمیکنید . این است جادوی BOX-SISIZING

 

 

خلاصه مطلب :

 

در حالت Content-box مبنای محاسبه طول و عرض ، فقط داخل بخش Content میباشد ، و هر مقداری به padding اضافه شود ، آن مقدار به به باکس افزوده خواهد شد ؛ اما در حالت Border-Box مبنای محاسبه طول و عرض و همچنین قسمت padding نیز جز طول و عرض محاسبه می شود که باعث می شود شما هر چقد به مقدار padding اضافه کنید ، باکس بزرگتر نمی شود .

 

امیدوارم از این مطلب راضی باشید .

تاریخ انتشار : ۲۵ دی