آشنایی با box-sizing در CSS جلسه ۱۳

//

آشنایی با box-sizing در CSS

بنام و یاد خدا سلام ,

درخدمت شما هستم با یکی دیگه از آموزش های html  و css جلسه ۱۳ در وب سایت پاسخ وردپرس توی
از آموزش میخواهیم برای آموزش box-sizing آموزش بدیم که توی جلسات قبلی آموزش های padding و margin را آموزش داده بودیم .

box-sizing در css

از ویژگی box-sizing برای تغییر روش اندازه دهی به یک عنصر بر اساس مدل قسمت بندی آن استفاده می شود.

هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box),
ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند.

آموزش border-box

 توضیحات در مورد box-sizing

به طور معمول، تعیین اندازه‌ی padding و border برای یک عنصر در css باعث می‌شود تا طول و عرض واقعی آن عنصر افزایش پیدا کند
برای مثال اگر عرض یک عنصر ۱۰۰ پیکسل مشخص شود و از هر طرف ۵ پیکسل padding به آن نسبت داده شود،
عرض واقعی آن عنصر مساوی ۱۰۰ + ۵ + ۵ یا ۱۱۰ پیکسل خواهد شد

در طراحی سایت واکنش‌گرا یا Responsive گاهی نیاز می‌شود تا عرض مشخص شده برای یک عنصر بدون توجه به مقدار padding و border آن مشخص شود.
مثلا هنگامی که عرض یک عنصر به صورت درصدی تعیین شود و مقدار padding و border به صورت پیکسلی
در چنین شرایطی، لازم می‌شود تا شکل محاسبه‌ی عرض واقعی یک عنصر تغییر پیدا کند

آموزش طراحی بخش محتوا سایت بخش تکمیلی
یک آموزش جذاب دیگه!

دستور box-sizning در css که در ابتدا برای رفع یک خطای موجود در نگارش‌های قدیمی IE ایجاد شده بود،
هم‌اکنون به عنوان یک روش متداول برای طراحی واکنش‌گرا استفاده می‌شود

با تعیین مقدار box-sizning با عبارت «border-box» این مشکل برطرف می‌شود:

دقت کنید که در حال حاضر لازم است تا این ویژگی با پیشوندهای مخصوص مرورگرها در css درج شود
هم‌اکنون عنصر div دارای عرض ۱۰۰ پیکسل خواهد بود که ۱۰ پیکسل از آن به padding اختصاص پیدا کرده و محل
باقیمانده برای محتوای داخلی مساوی ۹۰ پیکسل خواهد بود.

یک مثال دیگه خدمت شما

در این مثال ما در واقع عرض عنصر را ۲۵۰ و ارتفاع آن را ۲۰۰ در نظر گرفته ایم اما در مدل پیشفرض به دلیل اضافه شدن padding که
از هر طرف ۵۰px می باشد در نهایت عنصر ما دارای عرض ۳۵۰px و ارتفاع ۳۰۰px خواهد بود.
حال فرض کنید بخواهیم یک border هم به این عنصر اضافه کنیم, داریم:

اندازه این border هم به عرض و ارتفاع عنصر اضافه می شود و در نهایت عرضی به اندازه ۳۷۰px و ارتفاع ۳۲۰px خواهیم داشت.

آموزش طراحی قالب HTML و CSS جلسه 3
یک آموزش جذاب دیگه!

در روش های قدیمی صفحه آرایی که اندازه ها محدود و ثابت بودند غالبا با این روش و مدل مشکلی در پیاده سازی نبود اما
امروزه که صفحات پویا طراحی می شوند پیروی از این مدل سختی های خاص خود را دارد.

آموزش html و css

box-sizing

خوشبختانه در CSS3 ویژگی ای وجود دارد به نام box-sizing که به ما این اجازه را می دهد
که در نحوه اعمال اندازه ها بر روی عناصر کنترل داشته باشیم.
مقادیری که می توان به این ویژگی داد شامل content-box و padding-box و border-box می باشد.
که مقدار پیشفرض آن content-box می باشد که عملکردش را در بالا در قالب یک مثال بررسی کردیم.

حال فرض کنید box-sizing را روی مقدار padding-box تنظیم کنیم و مثال بالا را دوباره با همان اندازه ها تکرار کنیم.

این بار عرض نهایی عنصر همان ۲۵۰px و ارتفاع هم ۲۰۰px بدون تغییر باقی خواهد ماند در واقع مقدار عرض و ارتفاع شامل اندازه padding هم می شود.
تصویر زیر نتیجه این مثال را در دو مدل content-box و padding-box نشان می دهد.

آموزش های css

خوب نتیجه کار را مشاهده کردید

حال اگر مقدار border به اندازه ۱۰px به این عنصر اضافه کنیم این مقدار دوباره باعث افزایش اندازه نهایی عنصر می شود اما اگر بخواهیم اندازه border هم مانند اندازه padding موجب افزایش اندازه نهایی عنصر نشود کافی است مقدار ویژگی box-sizing را border-box قرار دهیم.

نتیجه کار مثال تصویر زیر خواهد شده :

آموزش html و css به صورت کامل

برای این که بتوانیم این مشکل برای برطرف کنیم باید چکار کنیم ؟

آموزش ساخت منوی آبشاری در html و css قسمت دوم
یک آموزش جذاب دیگه!

امروزه برای طراحی راحتر و عدم وجود نگرانی برای محاسبه مقادیر border و padding از این روش بیشتر استفاده می شود:

نکته خیلی مهم

معمولا در فایل Reset یک پروژه زمانی که طراح قصد تعیین مدل box-sizing
را دارد به این صورت این ویژگی را برای تمامی عناصر اعمال می کند.

با این روش اگر قرار باشد ماژولی یا کامپوننتی که از روش متفاوتی در مورد box-sizing استفاده کرده است را وارد پروژه خود کنید کافی است مقدار box-sizing بالاترین عنصر را در آن ماژول تعیین کنید و فرزندان آن عنصر از مقدار box-sizing آن عنصر ارث خواهند برد و دیگر نیازی به تعیین box-sizing برای تک تک آن ها و یا تغییر اندازه های آن ها نخواهد بود.

خوب دوستان عزیز این آموزش  وب سایت پاسخ وردپرس هم همین جا به پایان رسید امید وارم که مورد توجه شما قرار گرفته باشه
اگه این آموزش را دوست داشتید حتما به دوستان خود توی شبکه های به اشتراک بزارید .

منتظر نظرات و انتقادات و پیشهادات شما هستم موفق و پیروز باشید توی زندگی .

میانگین رتبه 5/5 تعداد رای : 3

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!