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

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

دسته بندی موضوعات
سفارش تبلیغات

box-sizing در CSS3

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 استفاده کنید تا مشکلتون برطرف بشه .

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

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

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

 

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • حامذ

    بسیار آموزش پرکاربردی بود .
    مطمئن هستم برای همه طراحان وب این مشکل معمولن پیش میاد
    با تشکر

  • سید کریم محمدی

    ممنون. ولی اگر هم زمان از خاصیت border و padding استفاده بکنیم چی؟

  • hassany

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

  • سید محمد آذرشین

    سلام
    در سایت بنده از این استفاده شده که متاسفانه با آرووچت نا هماهنگ هست و اون رو حسابی به هم میریزه
    شما راه حلی برای اون ندارید؟

    • میترا رحیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟