در جعبه چیست؟ – انجمن DEV

Summarize this content to 400 words in Persian Lang

خوش برگشتی! ما در حال غواصی در CSS Box-Model هستیم، مراسمی برای هر توسعه دهنده وب. بیایید ببینیم: “در جعبه چیست!”

جعبه محتوا

در طراحی وب، همه چیز در یک جعبه است. تا کنون، ما فقط اندازه و رنگ متن را تغییر داده ایم. اکنون، عناصر موقعیت یابی را در یک صفحه با مدل جعبه CSS بررسی می کنیم. این شامل چهار بخش است: محتوا، padding، حاشیه و حاشیه.

جعبه محتوا محتویات شما، اعم از متن، تصویر یا سایر عناصر را محکم می‌پوشاند. به عنوان مثال، این صفحه وب را در نظر بگیرید:

در اینجا، “پیوستن به سوار!” متن یک است element. The content box of that element looks like it wraps tightly around the text:

Notice the space around it? These spaces are controlled by the box model. Without it, everything would stack in the top left corner, like this:

مدل جعبه صفحات ما را جالب می کند!

بالشتک، حاشیه، و حاشیه

بقیه مدل جعبه:

لایه گذاری:

بین کادر محتوا و حاشیه
اندازه عنصر را افزایش می دهد و با کادر محتوا برای ویژگی های پس زمینه ترکیب می شود

مرز:

لبه عنصر، که می تواند سبک شود

لبه:

فضای بین عناصر، مانند یک قطب نامرئی که آنها را از هم جدا می کند

جابجایی چیزها در اطراف

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

برای جابجایی عنصر: حاشیه های آن را تغییر دهد

برای انتقال محتوا به داخل عنصر: بالشتک آن را عوض کنید

کد

بیایید صفحه خود را ایجاد کنیم:

Join the ride!
A new model, each week!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

h1 {
/* Text Styles */
margin: auto;
margin-top: 60px;
padding: 12px;
}
p {
/* Text Styles */
margin: auto;
margin-top: 6px;
padding: 3px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اسکوپ است:

margin و padding فاصله را کنترل کنید آنها در واقع ویژگی های مختصر هستند که شامل خواص هستند maring-top، margin-right، margin-bottom، و margin-left. شما می توانید همان فرمت را حفظ کنید paddingخواص نیز.

با استفاده از یک ویژگی، می توانیم اندازه padding را در تمام لبه های عنصر تنظیم کنیم:

p {
padding: 12px 50px 100px 2px; /* top right bottom left */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یا می توانیم با تنظیم تنها دو مقدار، بالا/پایین و چپ/راست را متقارن کنیم:

p {
padding: 12px 50px; /* top/bottom left/right */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یا با استفاده از یکی، همه اضلاع را یکسان تنظیم کنید:

p {
padding: 12px; /* all sides */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر دو padding و margin می تواند از مقادیر فاصله (px، em) یا درصد (%). را auto کلمه کلیدی نیز در ارتباط با margin برای مرکزیت دادن عناصر!

چالش

وقت آن است که مهارت های خود را آزمایش کنید!

چهار عنصر را در یک صفحه وب قرار دهید. آنها را تقریباً در یک اندازه نگه دارید.
حاشیه‌هایی را در اطراف آن‌ها اضافه کنید (MDN را برای استایل حاشیه بررسی کنید).
یک عنصر را در مرکز قرار دهید.
حاشیه عنصر دیگر را بزرگتر از محتوای آن کنید.

شما ابزارها را دارید – حالا عناصر خود را مانند یک حرفه ای قرار دهید!

برای نگاهی بسیار قوی تر به مدل جعبه، اسناد MDN را بررسی کنید!

  
  
    Join the ride!
    A new model, each week!
  

h1 {
  /* Text Styles */
  margin: auto;
  margin-top: 60px;
  padding: 12px;
}
p {
  /* Text Styles */
  margin: auto;
  margin-top: 6px;
  padding: 3px;
}

p {
  padding: 12px 50px 100px 2px; /* top right bottom left */
}

p {
  padding: 12px 50px; /* top/bottom left/right */
}

p {
  padding: 12px; /* all sides */
}