تو اکثریت آموزش هایی که دیدم، چیزی درباره اینکه چرا همیشه میایم و باکس مدل رو میزاریم border-box نگفته و اینکه چرا میزاریمش border-box برا خیلی از دوستان روشن نیست. میخوام یه بار روشنش کنیم و تمام?
تصویر بالا رو ممکنه توی inspect مرورگرتون دیده باشید و شایدم نه ?
در بالای تصویر کلمه margin رو داریم که حاشیه content مارو مشخص میکنه. یه جورایی برای فاصله انداختن بین element هامون داخل HTML هست.
بعد از اون border رو داریم که در اصل لبه های elementتمون هست.
بعد از border هم padding رو داریم که در کلمه به معنی لایه و لایه گذاری هست و توی CSS میاد و پهنه element مارو گسترش میده ?
و در نهایت content که همون element ما هست.
خب حالا بریم سروقت اینکه چطوری توی CSS باکس مدل رو عوض کنیم.
در اکثریت پروژه های بروز میتونین همون اول پروژه توی selector های سراسری پروژه مثل * و body ببینین که اومدن و box-sizing پروژه رو گذاشتن border-box. حالا چرا؟؟؟
نکته: اگر از کسایی هستین که از before و after توی پروژتون استفاده میکنین، اینا چون یه child element میسازن وقتی میخواین بهشون width و height بدین طبق border-box کار نمیکنن و برای رفع این مشکل میتونین توی selector های سراسریتون بگین before و after هم شامل border-box باشن?
قبل از همه چیز elementتمون رو فرض کنیم:
.element { background-color: black; width: 300px; height: 300px; padding: 30px; margin: 15px; border: 15px solid red; }
خب، تو قطعه کد بالا یه مربع درست کردیم.
توی قطعه کد بالا مشخص نکردیم که box-sizing ما چی هست، پس به صورت default روی content-box که مقدار پیش فرض هست قرار داره. وقتی content-box هست، width المنت ما به صورت زیر محاسبه میشه:
width + padding-left + padding-right + border-left + border-right
و height ما :
height + padding-top + padding-bottom + border-top + border-bottom
که این باعث میشه width و height که ما مشخص کردیم با padding و border المنت جمع شن و دیگه width و height المنت ما ۳۰۰px نباشه.
تو المنت بالا width ما میشه ۳۹۰px.
مشکل اصلی content-box اینه که شما باید بشینین و حساب کنین که من اگر میخوام width المنتم ۳۰۰px باشه باید چطوری بهش border و padding بدم که بشه ۳۰۰px.
حاشیه(margin) توی box-sizing تاثیری نداره و روی width و height المنت تاثیر نمیزاره. توی بعضی از منابع فارسی دیدم که نوشته margin تاثیر میزاره ولی اینطور نیست?
مقدار بعدی که باهاش سر و کار داریم padding-box هست که فرقش با content-box این هست که دیگه padding تاثیری روی width و height المنت نمیزاره که اینم یخورده کارمون رو سخت میکنه.
و مقداری که فعلا پر استفاده ترینه، border-box که باعث میشه هیچکدوم از ویژگی های padding و border روی المنت تاثیری نداشته باشن. این یکی یخورده متفاوته?
قبلیا میومدن و روی width و height المنت تاثیر میزاشتن و باعث افزایشش میشدن ولی این یکی میاد و دیگه روی width و height تاثیر نمیزاره.
مقدار border-box میاد و همون کاری که میخواستیم خودمون با ذهن انجام بدیم رو انجام میده. یعنی میاد و از width و height محتوامون(content) داخل box model کم میکنه و padding و border رو اعمال میکنه.
توی مثال بالا اینطور میشه که ۳۹۰px ما تبدیل به همون ۳۰۰px میشه ولی content ما میشه ۲۱۰px.
ممنون که وقتتون رو گذاشتین?
