آموزش CSS – آشنایی با Box Model در سی اس اس (CSS) (جلسه ۱۹)

Box Model یک مفهوم انتزاعی در سی اس اس است، اما عدم آگاهی از آن منجر به سردرگمی در حین نوشتن کدهای سی اس اس خواهد شد. به طور خلاصه، هر عنصر قرار گرفته روی صفحات اچ تی ام ال (HTML) داخل یک جعبه فرضی مستطیلی شکل قرار دارد:

what_is_box_model_in_css

ابتدا از خارجی ترین جزء، توضیحات Box Model را آغاز می کنیم. همانطور که در تصویر فوق می بینیم خارجی ترین لایه margin نام دارد. کاری که margin انجام می دهد این است که فاصله یک تگ اچ تی ام ال (HTML) را از تگ دیگری مشخص می کند. به عبارت دیگر margin به فضایی گفته می شود که دور یک تگ اچ تی ام ال (HTML) را در بر می گیرد. به طور کلی margin در محاسبه اندازه یک تگ اچ تی ام ال (HTML) مورد محاسبه قرار نمی گیرد اما زمانیکه تگ های اچ تی ام ال (HTML) در کنار یکدیگر قرار می گیرند نقش مهمی ایفا می کند. برای روشن شدن این مسئله تصویر فوق را مد نظر قرار می دهیم. باکس سفید رنگ جایگاه متن اصلی تگ اچ تی ام ال (HTML) است. برای این باکس هم می توان width و هم height در نظر گرفت.
بلافاصله پس از این باکس اصلی که حاوی عبارات داخل تگ های اچ تی ام ال (HTML) است چیزی تحت عنوان padding قرار دارد. وظیفه padding این است که فاصله ای مابین محتوای تگ و border ایجاد کند. این فاصله غیر قابل مشاهده بود و صرفاً موجب می گردد که متن داخل تگ های اچ تی ام ال (HTML) از لبه باکس به هر میزان که بخواهیم فاصله بگیرند.
به طور کلی border این وظیفه را دارا است تا حاشیه ای به دور باکس اصلی یا همان باکس سفید رنگ اضافه کند. برای border می توان سه ویژگی border-width برای ضخامت، border-style برای شکل و border-color برای رنگ را در نظر گرفت.
علاوه بر این می توان border را به یکی از جهات بالا، پایین، چپ و یا راست تگ مد نظر اختصاص داد.
در مورد border ها همواره به خاطر داشته باشیم که اندازه آن ها در محاسبه اندازه کلی یک تگ مورد محاسبه قرار می گیرد. به طور مثال اگر تگی داشته باشیم به اندازه ۴۰ * ۷۰ و برای این تگ border یی در نظر گرفته باشیم به مقدار ۴px حال از این پس اندازه واقعی تگ ما به ۴۸*۷۸ افزایش خواهد یافت چرا که  چهار پیکسل به سمت راست و چهار پیکسل به سمت چپ اضافه شده که جمعاً می شود ۸ پیکسل و با احتساب اندازه باکس اصلی width معادل می شود با ۴۸. قضیه در مورد height هم به این شکل است: ۴ پیکسل به بالا و ۴ پیکسل به پایین که جمعاً می شود ۸ پیکسل که با مد نظر قرار دادن ارتفاع باکس مد نظر با مقدار ۷۸ پیکسل مواجه خواهیم شد.
برای روشن شدن مطالب تئوریک فوق، کدهای زیر را وارد ویرایشگر متن خود کرده و اقدام به تکمیل کدها می نماییم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>asrefonon</title>
    <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
    <h3>باکس مدل چیست</h3>
    <h3>باکس مدل چیست</h3>
</body>
</html>

همانطور که در کد فوق می بینیم، با استفاده از دو تگ <h3> عبارت “باکس مدل چیست” را وارد کدهای اچ تی ام ال (HTML) می کنیم. در ادامه، مطالبی که در ابتدای این آموزش فرا گرفتیم را داخل فایل مرتبط با کدهای سی اس اس (CSS) اعمال می کنیم:

h3{
   width:150px;
   height:50px;
   border-bottom-width:4px;
   border-bottom-color:#ffde57;
   border-bottom-style:solid;
   padding:12px;
   margin:70px;
}

همانطور که در کد فوق مشاهده می کنیم، ابتدا width تگ <h3> را برابر با ۱۵۰ پیکسل و height را  برابر با ۵۰ پیکسل در نظر گرفته ایم. سپس ضخامت border سمت پایین تگ را برابر با ۴ پیکسل به رنگ زرد و به صورت خط یکپارچه در آورده ایم (مقدار solid خط یکپارچه ای را ایجاد می کند). در ادامه مقدار padding را برابر با ۱۲ پیکسل قرار داده ایم. به عبارت دیگر از محتوای داخل تگ تا لبه border به میزان ۱۲ پیسکل از هر ۴ جهت فاصله قرار دارد و در نهایت هم مقدار margin هم برابر با ۷۰ پیکسل در نظر گرفته شده است.
برای مشاهده خروجی، فایل خود را در مرورگر اجرا می کنیم:

what_is__css_box_model

مستطیل قرمز رنگ نشانگر margin به میزان ۷۰px و مستطیل سبز رنگ نشانگر padding به میزان ۱۲px است. همواره به خاطر داشته باشیم که برای محاسبه width کلی یک تگ بایستی اندازه width به علاوه padding های سمت راست و چپ به علاوه ضخامت border های سمت راست و چپ را مد نظر قرار دهیم. در مورد اندازه کلی height هم از همین فرمول می توانیم استفاده کنیم.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

توسط
تومان