اصول باکس بندی و قاب بندی محتوا در CSS

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

در درسهای یک تا ده از سری آموزشی css به مقدمات پرداختیم و استایل بندی عناصر مختلف رو یادگرفتیم . دونستیم که چطور تگهای html رو با css کنترل کنیم و ظاهر و نحوه نمایش اونها رو تغییر بدیم. خوب از این درس که درس یازدهم هست تا درس پانزدهم در مورد قاب بندی عناصر در css صحبت خواهیم کرد . منظور از قاب بندی در css این هست که بدونیم چطور فلان عنصر رو در صفحه در جایی که میخواهیم نمایش بدیم و اینکه چطور بین عناصر صفحه فاصله ایجاد کنیم و کنترل اونها رو در اختیار بگیریم.

قاب بندی و باکس بندی عناصر در css

هنگامی که در css از قاب بندی صحبت میکنیم منظور ما در طراحی قالب ویا طرح اولیه صفحه است. شما میتونید با استفاده از css تمام تگهای html رو به عنوان یک جعبه (یک محیط فرضی) در نظر بگیرید. طوری که هر جعبه که نامرئی هم هست برای خودش دارای فضایی است و با جعبه های دیگری که در اطرافش هست دارای فاصله است. لازمه ی وجود این جعبه ها عناصری مانند margin (حاشیه) ، padding (فاصله داخلی ویا حاشیه داخلی) ، border (خط حاشیه) و خود محتوا و مطلب (content) هستند.

شاید کمی گیج کننده باشه براتون ، با کمک تصویر زیر میتونید این ابهامات رو برطرف کنید:

قاب بندی و فاصله عناصر از یکدیگر در css

 

خوب همونطور که در تصویر بالا میبینید ، در اطراف هر جعبه ( محتوا رو به صورت جعبه یا باکس فرض کردیم) ، سه لایه وجود داره (پس بین دو عنصر در صفحه میتونه تا ۶ لایه وجود داشته باشه _ هر عنصر ۳ لایه _ ) .

padding یا همون فاصله ای که از محتوا تا خط حاشیه ایجاد میشه هست و برای مثال اگر برای محتوا رنگ زمینه در نظر گرفته باشید ، این رنگ در بخشی که با padding هم پر شده ، مشاهده میشه. مثل رنگ سفیدی که در تصویر بالا میبینید.

border خطی است که در اطراف محتوا و padding قرار میگیره و میتونه تحت تاثیر رنگ جعبه کلی ما باشه و یا رنگی رو خودمون بهش اختصاص بدیم.

margin فضای اطراف border رو با میزانی که ما بهش میدیم پر میکنه و کاملا هم شفاف هست یعنی رنگی رو دریافت نمیکنه و برای ایجاد فاصله بین عناصر صفحه از margin استفاده میکنیم.

محتوا (content) میتونه متن و یا تصویری باشه که ما به صورت یک جعبه _ باکس _ نمایش میدهیم.

امیدوارم مفهوم این تعاریف برای شما واضح و روشن باشند چرا که در طراحی قالبهای وبلاگ و سایت بسیار با این مشخصات روبرو خواهید شد و نیاز دارید که درک صحیحی از این تعاریف داشته باشید.

برای اینکه به یک جعبه مقادیر ارتفاع و پهنا رو بدیم میتونیم از height و width استفاده کنیم که حتما این مشخصه ها رو از درسهای گذشته به خاطر دارید. نکته ی مهمی که باید در اینجا به اون بپردازیم این هست که وقتی شما طول و عرضی رو به یک جعبه اختصاص میدید ، در واقع شما این مقادیر رو به content تعلق دادید و باید برای درست نمایش داده شدن عناصر و جای اونها در تمام مرورگرها ، میزان فضای اشغال شده توسط padding ، margin و border رو هم محاسبه کنید.

برای درک بهتر قضیه بیایید یک مثال عددی داشته باشیم ، فرض کنیم در مثال بالا پهنای content معادل ۲۵۰ پیکسل ، padding برابر ۱۰ پیکسل ، border برابر ۵ پیکسل و margin برابر با ۱۵ پیکسل هست.

حالا بگید پهنایی که این عنصر ( content ) در صفحه اشغال میکنه چقدر هست؟

اگر پاسخ شما ۲۵۰ پیکسل و یا ۲۸۰ پیکسل هست باید بگم که اشتباه کردید ، همونطور که گفتم شما باید تمام مقادیر رو در نظر بگیرید.یعنی اینطور محاسبه کنید :

content = 250px

padding= (10px) x 2 = 20px

border = (5px) x 2 = 10px

margin = (15px) x 2 = 30px

———————————-

all = 310px

حتما متوجه شدید که چرا مقادیر رو در ۲ ضرب کردیم ! چون مثلا برای padding هم از سمت راست و هم از سمت چپ مقدار ۱۰ پیکسل فاصله ایجاد میشه که در مجموع میشه ۲۰ پیکسل!

امیدوارم تا اینجای بحث رو کاملا متوجه شده باشید. خوب حالا کد این جعبه ای که در بالا مشاهده کردیم در css چطور نوشته میشه؟

.content {
width:250px;
padding:10px;
border:5px solid blue;
margin:15px;
}

به همین ترتیب میتونید برای بزرگتر شدن فضای محتوا از padding و border کم کنید و به مقدار width اضافه کنید و برعکس.(نحوه ی عدد دهی و مقداردهی برای margin و padding در درسهای آتی به صورت مفصل توضیح داده خواهد شد)

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

فضای کلی اشغال شده توسط یک عنصر = پهنای margin راست + پهنای border راست + پهنای padding از راست + پهنای محتوا + پهنای margin از چپ + پهنای border از چپ + پهنای padding از چپ

و همین روند برای ارتفاع هم وجود داره.

به نظرم اگر بخواهیم این درس رو بیشتر ادامه بدیم و موارد بیشتری رو بگیم باعث میشه تا شما کمی سردرگم بشید پس بهتره بحث رو همینجا تموم کنیم و ادامه اون رو به درسهای بعدی موکول کنیم.

همچنین قصد داریم سری آموزشی طراحی قالب وبلاگ و یا سایت رو به صورت تصویری و ویدئویی ( ویدئوکست ) در سایت قرار بدیم که لازمه ی اون این هست که شما html و css رو بلد باشید.

مثل همیشه اگر سوالی داشتید و یا نکته ای براتون مبهم بود در بخش دیدگاهها بیان کنید تا پاسخ داده بشه.

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس چهارم – نحوه استفاده از css
مفهوم Padding و Margin و تفاوت‌های آن‌ها در CSS
ساخت دکمه rollover با استفاده از فتوشاپ و css
آموزشcss – درس سوم – ID و Class
آموزش css – درس ششم – ویرایش متن
متحرک سازی و چرخش عناصر (rotate) در css

گفتگو پیرامون اصول باکس بندی و قاب بندی محتوا در CSS

(منتشر شده: 0 | در انتظار تایید: 0)

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)