جلسه نهم: Mastering the Box Model
زمانی که شما مدنظر دارید که یک صفحه با قاب بندی های استاندارد را ایجاد کنید از ابزارهایی مانند FlexBox یا Grid Layout استفاده می کنید اما گاهی ممکن است با توجه به شرایط مجبور باشید از روش های دیگری استفاده کنید.
در این مقاله یک صفحه با دو ستون را خواهیم ساخت . شاید این تمرین کمی ساده به نظر برسد اما در ادامه مشکلاتی را که ممکن است برای شما پیش بیاید را نیز بررسی کرده و راه حل های متناسب را ارائه خواهیم کرد.
ابتدا یک صفحه ساده خواهیم ساخت که یک هدر در بالای صفحه و دو ستون زیر آن دارد.
برای شروع ابتدا یک صفحه جدید و یک استایل شیت خالی ایجاد کنید و آن ها را به هم وصل کنید.کد زیر را به صفحه اضافه کنید تا هدر و عناصر مورد نظر در آن نمایش داده شود.
<body>
<header>
<h1>Franklin Running Club</h1>
</header>
<div class="container">
<main class="main">
<h2>Come join us!</h2>
<p>
The Franklin Running club meets at 6:00pm every Thursday
at the town square. Runs are three to five miles, at your
own pace.
</p>
</main>
<aside class="sidebar">
<div class="widget"></div>
<div class="widget"></div>
<div class="gizmo"></div>
</aside>
</div>
</body>اگر بخواهیم توضیح مختصری در مورد کد داشته باشیم می توان به تنظیم فونت و رنگ پس زمینه برای صفحه و سایر Container ها اشاره کرد که به شما کمک می کند موقعیت Container ها را نسبت به همدیگر مشاهده کنید
همانطور که مشاهده می کنید Sidebar شما خالی است.بهتر است کمی به آن padding بدهید تا کمی ارتفاع داشته باشد. برای نمایش بهتر کدهای زیر را به استایل خود اضافه کنید.
<head>
<style>
body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
}
header {
color: #fff;
background-color: #0072b0;
border-radius: .5em;
}
.main {
background-color: #fff;
border-radius: .5em;
}
.sidebar {
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}
</style>
</head>توجه! IE نسبت به main که به صورت inline نوشته شده است باگ دارد پس برای جلوگیری از بروز مشکل کد زیر را به استایل خود اضافه کنید. Display:Block
اکنون باید دو ستون موردنظر را در جای خود قرار دهیم: برای شروع از یک flat-based استفاده میکنیم.کدهای زیر را بررسی کنید:
.main {
float: left;
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
float: left;
width: 30%;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}به جای اینکه دو ستون در کنار هم باشند آن ها به صورت خطی کنار هم قرار گرفتهاند. حتی اگر عرض آن ها را 30% و 70% هم تعیین کرده باشید باز هم ستون ها بیش از 100% فضای موجود را اشغال می کنند.این اتفاق به علت حالت پیش فرض Box رخ می دهد.وقتی عرض یا ارتفاع یک عنصر را تعیین میکنید در واقع اندازه محتوی آن را تعیین میکنید.پس هرگونه اندازه دیگر مثل حاشیه ها به اندازه محتوی اضافه خواهد شد. برای مثال یک عنصر با عرض 300 پیکسل و padding 10 پیکسل و بوردر یک پیکسل در نهایت 322 پیکسل فضا خواهد گرفت. در صورتیکه واحدهای این عناصر با هم یکسان نباشد محاسبه گیج کننده تر خواهد شد.
در قطعه کد قبلی نوار کناری دارای عرض 30 درصد می باشد به علاوه padding آن 1.5 در سمت راست و چپ قرار دارد. Container اصلی 70 درصد عرض دارد که به علاوه 3 واحد حاشیه آن میشود. پس برای اینکه اندازه حاشیه و سایر عناصر به درستی محاسبه شود لازم است که Container ها کمی کشیده تر شوند.
اینکه از واحدهای ویژه استفاده نکنیم فقط پاک کردن صورت مسئله می باشد.یا اینکه اندازه ها را کمی کاهش دهیم و مثلا به جای 30 از 26 استفاده کنیم کار غیر قابل اعتمادی می باشد.
در حالت کلی استفاده از واحدهای ویژه کار چندان مطلوبی نمی باشد.برای توضیح بیشتر می توان به این موضوع اشاره کرد که در اغلب موارد محاسبه اینکه عدد نهایی از کجا م آید دشوار است و اگر متوجه نشوید که این مقدار از کجا می آید نمیتوانید محاسبه کنید که در شرایط گوناگون چگونه رفتار خواهد کرد.
یکی از گزینه های جایگزین برای حالت این است که به مرورگر اجازه بدهید محاسبات را خودش انجام دهد.در این حالت ستون ها 3em بیشتر هستند بنابراین می توانید از تابع calc() استفاده کنید تا عرض را به اندازه دقیق کم کنید.این روش نسبتا خوب است اما روش های بسیار بهتری هم وجود دارد.
اتفاقی که افتاد اصلا چیزی نیست که شما دوست داشته باشید .معمولا مایل هستید که اندازه خود را بدهید و از انجام محاسبات بی نیاز شوید.
Css به شما این امکان را می دهد که رفتار box خود ارا با توجه به خاصیت box sizing تنظیم کنید.به طور پیش فرض اندازه box روی مقدار content-Box تنظیم می شود.این بدین معنی است که هر ارتفاع یا عرضی را که تعیین میکنید فقط اندازه جعبه را تنظیم میکند. به جای آن می توانید مقداری از box-border را به اندازه box اختصاص دهید.به این ترتیب ویژگی های ارتفاع و عرض ، اندازه ترکیبی از مختوا ، padding و حاشیه را تنظیم می کند یعنی دقیقا همان چیزی خواهد شد که شما میخواستید.
اگر این عناصر را برای استفاده از اندازه box به روز کنید بدون توجه به padding در راست و چپ در همان خط قرار می گیرند.
برای تنظیم مدل box دو عنصر اصلی و نوار کناری فایل استایل خود را به روز کنید تا مطابق کد زیر شود.
.main {
float: left;
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
float: left;
width: 30%;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}شما اندازه این دو box را بصورت چشمی ساخته اید اما مطمئنا با عناصر دیگری با مشکل مشابه روبرو خواهید شد.خوب است یکبار آن را حل کنید بنابراین مجبور نیستید دوباره به این تنظیمات فکر کنید.کد زیر را بررسی کنید تا تاثیر استفاده از * را در کد مشاهده کنید:
توجه ! اندازه جعبه معمولا مقداری نیست که ارث برده شود اما با استفاده از کلمه کلیدی وراثت می توانید آن را مجبور کنید که مقداری را ارث ببرد.
اکنون اندازه تمامی عناصر در صفحه شما قابل پیش بینی است. توصیه میشود هر گاه می خواهید استایل جدیدی را ایجاد کنید کد زیر را اضافه کنید تا در طولانی مدت شما را از دردسرهای زیادی نجات خواهد داد. البته ممکن است با مشکلات کوچکی روبرو شوید اما بررسی مختصری مشکل حل خواهد شد.
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}داشتن یک فاصله کوچک بین ستون ها معمولا از نظر بصری بسیار جذاب تر است.بعضی اوقات می توانید با افزودن padding به یک ستون به این مهم دست پیدا کنید. اما در بعضی موارد این روش کار نمیکند.اگر هر دو ستون دارای رنگ زمینه یا حاشیه باشند مثل صفحه ای که ایجاد کرده اید ، و میخواهید بین آن دو مرزی ایجاد شود.در ابتدا می توانید به یک از ستون ها حاشیه اضافه کنید و عرض عناصر دیگر را کم کنید تا فضای اضافه شده را در نظر بگیرید.
در کد زیر می توانید مشاهده کنید که اینکار چگونه انجام میشود.
.main {
float: left;
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
float: left;
width: calc(30% - 1.5em);
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}در این حالت یک فاصله بین دو Continer ایجاد می شود اما این فاصله بر روی عرض و در قسمت بیرونی آن پایه گذاری شده است . درصدی که اختصاص داده شده ست به اندازه کامل والد بستگی دارد .اکنون اگر بخواهید این فاصله را با واحدهای دیگری به جز درصد مشخص کنید (مثل از em استفاده کنید) چگونه استایل خود را خواهید نوشت ؟ در اینجا راه حل شما استفاه از تابع calc() می باشد.
به جای اینکه یک درصد از عرض را به margin اختصاص دهید شما می توانید 1.5em از آن را جابه جا کنید به کمک کد زیر می توانید از تابع Calc برای ایجاد تغییرات استفاده کنید. با این روش نه تنها این امکان در اختیار شما قرار می گیرد که از em به جا درصد استفاده کنید بلکه باعث می شود کد شما خوانایی بیشتری داشته باشد. هنگامیکه مجددا به کد خود مراجعه می کنید محاسبه اینکه 30% چه قدر فضا خواهد گرفت دشوارتر از محاسبه 1.5em می باشد.
.main {
float: left;
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
float: left;
width: calc(30% - 1.5em);
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}در قسمت بعد در مورد مشکلاتی که در ارتفاع Container ها ، سرریز شدن محتوا و سایر مواردی که ممکن است پیش بیاید صحبت خواهیم کرد.
دیدگاهتان را بنویسید