آموزش CSS – ويژگی ‌Box-Sizing در CSS3

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با چیدمان چند ستونی در CSS3 آشنا شدید. در این بخش قصد داریم به ويژگی ‌Box-Sizing در CSS3 یپردازیم.

با قابلیت ‌Box-Sizing در CSS3 شما می توانید عرض عنصر را موثرتر کنترل کنید.

 

رندر عرض باکس با Box-sizing

بصورت پیش فرض, عرض یا ارتفاع اصلی باکس المان در صفحه وب بر اساس ویژگی width یا height , padding, border نمایش/رندر می شود.

برای مثال, اگر مقداری padding و border به المنت <div> با width 100% بدید, اسکرول بار افقی نمایان می شود . به مثال زیر توجه کنید :

این یکی از مشکلات معمول طراحان وب است که مدت زیادی با آن روبرو هستند, اما, ‌Box-Sizing در CSS3 مشکل را حل کرده و باعث شده چیدمان CSS بسیار ساده تر و بصری شود.

خصوصیت box-sizing مقدار box-model را کاملا به مقدار پیش فرض تغییر می دهد, در واقع هر padding یا border ای که روی محتوا اعمال شده است.

بنابراین عرض و ارتفاع رندر شده المان برابر با مقدار مشخص شده width و height در CSS قرار می دهد.

اگر خروجی بالا را ببنید, دیگر اسکرول بار نمایش داده نمی شود.

نکته: زمانی که از ویژگی box-sizing استفاده می کنید, مقدار width و height بخش محتوا محاسبه و border و padding از ویژگی های مشخص شده width , height کم می شود.

 

ایجاد چیدمان با Box-Sizing

با ویژگی ‌Box-Sizing در CSS3 می توانید یک لایه بندی چند ستونی را با درصد به سادگی بسازید.

حالا دیگر نگران اندازه نهایی المانی که به آن padding یا border اضافه می کنید, نخواهید بود.

مثال زیر به شما نحوه ساخت یک طرح بندی دو ستونی که هر ستون width برابری دارند و با ویژگی float در کنار هم دیگر قرار گرفتند.

مشابه آن شما می توانید طرح بندی های پیچیده تری را با همین تکنیک ساده ایجاد کنید.

 

امیدوارم در این بخش آموزش CSS, از ويژگی ‌Box-Sizing در CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link