https://virgool.io/feed/@ehsanakbarzadeh صلح ☮️ آزادی 🕊️ و کنجکاوی 👨‍💻 fa 2026-06-16 14:29:26 https://files.virgool.io/upload/users/52450/avatar/xQliUG.jpeg?height=120&width=120 https://virgool.io/@ehsanakbarzadeh https://virgool.io/@ehsanakbarzadeh/box-model-ehs2zanmeqgs چرا این مقاله رو بخونم؟؟تو اکثریت آموزش هایی که دیدم، چیزی درباره اینکه چرا همیشه میایم و باکس مدل رو میزاریم border-box نگفته و اینکه چرا میزاریمش border-box برا خیلی از دوستان روشن نیست. میخوام یه بار روشنش کنیم و تمام?باکس مدل چیست و مقداراش چی هستن؟؟Box Modelتصویر بالا رو ممکنه توی inspect مرورگرتون دیده باشید و شایدم نه ?در بالای تصویر کلمه margin رو داریم که حاشیه content مارو مشخص میکنه. یه جورایی برای فاصله انداختن بین element هامون داخل HTML هست.بعد از اون border رو داریم که در اصل لبه های elementتمون هست.بعد از border هم padding رو داریم که در کلمه به معنی لایه و لایه گذاری هست و توی CSS میاد و پهنه element مارو گسترش میده ?و در نهایت content که همون element ما هست.خب حالا بریم سروقت اینکه چطوری توی CSS باکس مدل رو عوض کنیم.خب و اما ویژگی box-sizing در CSSدر اکثریت پروژه های بروز میتونین همون اول پروژه توی selector های سراسری پروژه مثل * و body ببینین که اومدن و box-sizing پروژه رو گذاشتن border-box. حالا چرا؟؟؟نکته:‌ اگر از کسایی هستین که از before و after توی پروژتون استفاده میکنین، اینا چون یه child element میسازن وقتی میخواین بهشون width و height بدین طبق border-box کار نمیکنن و برای رفع این مشکل میتونین توی selector های سراسریتون بگین before و after هم شامل border-box باشن?مقدار های box-sizing و توضیحاتی درباره هرکدومقبل از همه چیز 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.ممنون که وقتتون رو گذاشتین? احسان اکبرزاده احسان اکبرزاده Mon, 02 Mar 2020 20:14:46 +0330 https://virgool.io/@ehsanakbarzadeh/%D9%88%D8%A7%D8%AD%D8%AF-%D9%87%D8%A7%DB%8C-relative-%D9%88-absolute-%D8%AF%D8%B1-css-awlqmcrz33fp CSS Unitsبعد از مراحل parse شدن HTML، نوبت به CSS میرسه. بعد از Load شدن CSS ها نوبت به parse اونا میرسه. مراحل parse به ترتیب resolve confilicting CSS declarations و Process final CSS values هستن که بعد از اونا نوبت به CSSOM میرسه و در نهایت Render Tree که شامل HTML ها و CSS ها هست و بعدشم بوممم ? وبسایت render میشه. وقتی ما داریم داخل فایل استایل هامون استایل مینویسیم متوجه این نیستیم که واحد هایی که استفاده میکنیم مثل px,rem,em,vh,vw از چه نوع واحدی هستن.حالا relative و absolute چی هستن؟واحد های relative مثل rem,em وقتی از مراحل parse فایل CSS ما رد میشن تبدیل به واحد های absolute میشن. واحد هایی مثل cm,pt,pc اصلا پیشنهاد نمیشن?مثلا اگه ما گفتیم کل tag های p ما اندازه فونتشون 1rem باشه، بعد از parse شدن تبدیل به ۱۶px میشه.حالا چرا باید از واحد های relative استفاده کنیم؟دلایل زیادی میتونیم براش بیاریم که شاید من همشون رو ندونم ولی یکی از اونا اینه که میتونیم خیلی راحت با چند خط style ساده سایز هامون رو داخل device های مختلف کنترل کنیم.مثلا برای font-size یه تکنیک خیلی خوبی هست که اگر میخواستیم بدون اون تکنیک font-size هامون رو کنترل کنیم شاید یه mediaquery با ۲۰۰ خط style نیاز داشتیم. تکنیکت چیه؟؟قبل از همه باید بگم باید همه ی font-size هاتون Rem باشن چون میخوایم از Root برای استفاده این کار کمک بگیریم. بعد از اون خیلی ساده داخل یه mediaquery میگیم که Root پروژه font-size مثلا باشه ۱۰px. اگه یادتون باشه میگفتیم default مرورگر ۱۶px هست و کاربر میتونه اونو تغییر بده. حالا ما خودمون میگیم اگر داخل نمای موبایل صفحه ما نمایش داده شد default بشه ۱۰px. به همین سادگیی.برای تغییر Root هم میتونین font-size رو تغییر بدین.نکته: وقتی میخواین font-size ریشه پروژه(Root) رو تغییر بدین باید به pixel مقدارش رو تعیین کنین.html { font-size: 16px; /* default value */ } @media (max-width: 920px) { body { font-size: 10px } }ممنون که مطلب رو خوندین و امیدوارم مفید بوده باشه ? احسان اکبرزاده احسان اکبرزاده Wed, 26 Feb 2020 16:32:28 +0330 https://virgool.io/@ehsanakbarzadeh/%D8%A7%D9%88%D9%84%D9%88%DB%8C%D8%AA-%D8%A8%D9%86%D8%AF%DB%8C-%D8%AF%D8%B1-css-%D8%A7%D8%B2-%D9%86%DA%AF%D8%A7%D9%87%DB%8C-%D8%AF%DB%8C%DA%AF%D8%B1-oka2p8ovdism CSS Specificityاین کلیدواژه ساده ترین راه برای پاک کردن خرابکاری هایی هست که پشت صحنه اتفاق افتاده.اما چقدر و تا چه حد قراره این خرابکاری ها رو بپوشونیم.علاوه بر اون ممکنه توی پروژه های بزرگ اونقدر از important استفاده کنید که در نهایت دیگه نشه روی اون المنت override کرد پس‌: تا حد امکان ازش استفاده نکنیم.خب پس چیکار کنیم؟؟توی عکسی که اول مطلب قرار داده بودم، نوشته بود اول استایل های خطی اعمال میشن و ...چیزی که نوشتم با چیزی که از قبل میدونین صد در صد متفاوته البته اگر مثل خودم تازه کارید?چی میخای بگی؟؟در واقع من نمیخام بگم که فایل ها بر چه اساس روی پروژه اعمال میشن، من میخواهم اولویت اعمال selector ها رو بگم.حالا که هم عقیده شدیم میرم سر اصل مطلب.۱. در بالا و در صدر استایل های خطی هستن که اعمال میشن.یعنی شما هرچقدر هم که داخل فایل های استایلت نشینی سلکتور خفن بزنی اعمال نمیشه، چون خطی همه رو میزاره تو جیبش?۲. مورد دوم آیدی هست که با یه پله اخلاف در جایگاه دوم جدول قرار داره. اگر به یک المنت هزارتا کلاس هم بدیم و یه آيدی و بهشون تو یک فایل استایل بدیم، قطعا آیدی اعمال میشه.پس آیدی باشگاه رفته و قوی تر کلاساس.۳. مورد سوم کلاسا هستن که بدشانسی کارشونو خراب کرد و رتبشون شد سوم جدول.سودو کلاس ها و اتربیوت سلکتور ها هم به همین شکل.اگر بخوایم مثل بالا مقایسه کنیم، میتونیم بگیم هزارتا المنت هم بزنیم، یک کلاس قوی تره. ۴.آخرین مورد هم خود المنت هست که اولویت اون از همه کمتر هست.این شامل سودو المنت ها هم میشه.لازم به ذکر است:‌اگر از چندتا از این سلکتور ها همزمان استفاده بکنین اولویت اونا تغییر میکنه مثلا اگر فقط المنت خالی استفاده کنیم اولویت ما ۱ هست اما هم المنت و هم کلاس رو استفاده کنیم میشه ۳.تصویر واضح میگه چه اتفاقی میوفته.CSS Specificityخب اینارو گفتی که چی؟؟همه اینارو گفتم که سعی کنیم استفادمون رو از important کم کنیم و بریم سمت اینکه بفهمیم چطور باید از سلکتور ها استفاده کنیم. احسان اکبرزاده احسان اکبرزاده Mon, 24 Feb 2020 07:24:08 +0330