یک ترفند CSS2.1 جایگزین مطمئن box-sizing در css3

ارسال شده در۰۶ آبان ۱۳۹۳
یک ترفند CSS2.1 جایگزین مطمئن box-sizing در css3

همانطور که میدانید مقدار width یک عنصصر html از طریق جمع width + border-right+border-left+padding-right+padding-left آن عنصر بدست می آید.

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

برای این کار در css3 خاصیت box-sizing در نظر گرفته شد. در صورتی که مقدار box-sizing را برابر border-box قرار دهیم این مشکل حل شده و border و padding دیگر به طول عنصر اضافه نخواهند شد. اما این مشخصه در مرورگر IE نسخه ۷ پشتیبانی نمیشود. همچنین طرفندی که قصد آموزش آن را داریم برای margin هم صدق می کند.

همانطور که میدانیم یک box با خاصیت display : block به صورت پیشفرض کلیه عرض عنصر والد خود را می پوشاند. بنابر این در صورتی که به این عنصر هیچ عرضی نسبت ندهیم (width آن برابر با auto باشد) ، تمامی مرورگر ها به نوعی عرض آن را ۱۰۰% در نظر می گیرند. با این تفاوت که هرچه به میزان padding , margin و border آن اضافه کنیم از عرض آن کم میشود!

بنابر این زمانی که میخواهیم یک باکس با این خاصیت ایجاد کنیم از دو باکس استفاده میکنیم. یک باکس را با عرض دلخواه تنظیم میکنیم. سپس یک باکس دیگر در آن ایجاد کرده و بدون اینکه عرضی برای آن در نظر بگیریم border و padding و margin مورد نظرمان را به آن نسبت میدهیم.

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

نمونه ساده این کد:

در صورت استفاده از این کد در یک قالب responsive حتی در صورتی که باکس #foo دارای عرض متغیر باشد ، همیشه این باکس بصورت صحیح نمایش داده می شود.

دیدگاه خود را بیان کنید.

ایمیل شما منتشر نخواهد شد.

پاسخ دهید

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