آموزش طراحی وب

box-sizing در CSS3

در این جلسه ی آموزشی در رابطه با تاثیر padding و border در width و height عناصر و بر طرف کردن این مشکل صحبت می کنیم .

CSS

فصل چهارم : Properties در CSS

جلسه سیزدهم   : box-sizing در CSS3

برطرف کردن مشکل تاثیر padding و  border در width و  height عناصر

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

تو این جلسه ی آموزشی راجع به box-sizing در css3 صحبت می کنیم .

صد درد صد وقتی کدنویسی می کنید با این مشکل مواجه میشید ، زمانی که  به یه عنصر padding یا border میدید توی عرض و ارتفاع اون تاثیر میذاره و شمارو دچار مشکل میکنه چون باید عرض و ارتفاع رو نسبت به padding یا  borderیی که دادید تغییر بدید .

در css3 با استفاده از خاصیت  border-sizing این مشکل رو حل می کنیم . چطوری؟ بذارید با یک مثال این موضوع رو براتون باز کنم .

به مثال زیر دقت کنید :

کد html

 کد css

خوب ما یک باکس اصلی داریم که پس زمینه زرد رنگ داره و یک باکس هم داخلش داریم که پس زمینه قرمز رنگ داره . با توجه به کدهای بالا نتیجه شکل زیر خواهد بود :

box-sizing

گفتیم که عرض باکس داخلی ۵۰ درصد باکس اصلی باشه ، به درستی اجرا شده و هیچ مشکلی نداره . حالا ما میایم به باکس داخلی border میدیم .

حالا با توجه به borderیی که دادیم به عرض و ارتفاع باکس داخلی اضافه میشه :

box-sizing

تا زمانی که ما عرض و ارتفاع رو تنظیم نکنیم این مشکل برطرف نمیشه . حالا تو css3 با قابلیت  box-sizing میتونیم به راحتی این کار و انجام بدیم بدون اینکه بخوایم طول و ارتفاع رو تغییری بدیم . بنابراین box-sizing رو به کد زیر اضافه می کنم :

حالا نتیجه رو ببینید :

box-sizing

به همین راحتی مشکل برطرف شد 🙂

حالا برای اینکه لازم نباشه تو همه ی کدهاتون box-sizing رو اضافه کنید ، کد زیر رو ابتدای فایل css تون قرار بدید تا برای همه ی عناصر اعمال بشه :

این مساله برای padding هم صدق می کنه ، اگر از padding هم استفاده کردید با این مشکل مواجه شدید میتونید از box-sizing استفاده کنید تا مشکلتون برطرف بشه .

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

 

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶

  • در واقع با خاصیت box-sizing محدوده عنصر مورد نظرمون رو تعیین میکنیم ومیگیم که مثلا border و padding در خارج از محدوده عنصر ما قرار نگیره و بلکه در داخل محدوده عنصر قرار بگیره .در این صورت هرچه به مقدار border اضافه بشه از فضای داخل عنصر کم میشه.که برای حل این مشکل هم میشه از خواص min-height و min-width استفاده کرد به جای width و height.
    ممنونم از تدریس خوبتون و مثالی که آوردین.

    • سلام دوست عزیز
      خیر، باید در ابتدای کدنویسی این خصوصیت لحاظ بشه.
      موفق باشید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین