cssblog.ir logo

تمام عناصر در CSS یک box (مربع یا مستطیل) هستند

عنوان فوق نکته ای که قصد توضیح آن را داریم را بخوبی و بطور خلاصه بیان می‌کند. اگر علاقه‌مند هستید که بیشتر درباره این نکته بدانید، با ما همراه باشید.

می‌دانیم که تمام عناصر در CSS دارای عرض و ارتفاع هستند و این ارتباطی به این ندارد که ما بصورت کاملا مشخص، عرض و ارتفاع را برای آنها تعریف کرده باشیم یا خیر. مثلا اگر ما به عنصری عرض نداده باشیم (با استفاده از مشخصه width) بالاخره این عنصر بدلیل اینکه در صفحه قرار دارد، عرض خواهد داشت اما این عرض چگونه محاسبه می شود؟

نحوه محاسبه عرض و ارتفاع عناصر

شما چنین تصویری را هنگامی که inspector مرورگرها مانند کروم، فعال است مشاهده می کنید:‌

chrome inspector box model

این تصویر نشان می دهند که ضخامت border و padding و عرض و ارتفاع عناصر چقدر است. همچنین میزان margin آن عنصر را نشان می دهند. البته درباره margin این نکته را مدنظر داشته باشید که margin تاثیری در سایز box ندارد و فقط در ارتباطی که سایز عناصر به این box دارد تاثیر می گذارد.

به تصویر زیر نیز دقت کنید:

CSS Box Model

عرض و ارتفاع عناصر در حالت عادی به شکل زیر محاسبه می شوند:

عرض

عرض عنصر + padding سمت چپ + padding سمت راست + ضخامت border چپ + ضخامت border راست

ارتفاع

ارتفاع عنصر + padding سمت بالا + padding سمت پایین + ضخامت border بالا + ضخامت border پایین

درباره ریست CSS

همانطور که می دانید مرورگرها مقادیر پیشفرض را برای margin و padding و برخی ویژگی‌های دیگر عناصر، در نظر می گیرند. پس اگر ما از ریست css استفاده کرده باشیم و padding و margin را مقداردهی نکرده باشیم، آنها برابر با صفر خواهند بود در غیر اینصورت مقدار پیشفرض مرورگر روی عنصر اعمال می شود.

عرض Box های بلوکی (Block Level Boxes)

اگر عرضی برای عنصر تعیین نشده باشید و آن موقعیت static یا relative داشته باشد عرض عنصر بصورت ۱۰۰٪ خواهد بود (کل فضا را می گیرد) و padding و border ها باعث فشار دادن عنصر به داخل خواهند شد. اما اگر عرض بصورت تعیین شده برابر با ۱۰۰٪ باشد، padding باعث خواهد شد که box از فضای خود به بیرون بزند. آنچه که ما از این جمله نتیجه می‌گیریم این است که در چنین شرایطی عرض عنصر کاملا ۱۰۰٪ نیست و درواقع «آن چیزی است که باقی مانده» است.


عرض Box ها با موقعیت دهی Absolute

اگر عنصری بصورت absolute موقعیت دهی شده باشد عرضی که خواهد داشت اندکی مقداری متفاوت خواهد بود. در چنین مواقعی عرض به اندازه ای خواهد بود که محتوا را دربر بگیرد و با افزایش میزان محتوا عرض نیز افزایش خواهد یافت. اگر ما عرض را برابر با ۱۰۰٪ دهیم، عرض آن برابر با عرض اولین والد relative یا پنجره مرورگر خواهد بود.

عرض Box های دارای Float

رفتار box هایی که float داشته باشند و عرضی برای آنها تعیین نشده باشد، بسیار شبیه با absolute ها خواهد بود. چراکه در این حالت نیز عرض به اندازه ای خواهد بود که محتوا را دربر بگیرد. این ویژگی در برخی مواقع که ما چنین رفتاری را می خواهیم، بسیار کارآمد خواهد بود چراکه در برخی از مواقع ما دقیقا همین را می خواهیم که عرض به اندازه محتوا باشد. برای مثال اگر متن ما داینامیک باشد و رنگ پس زمینه داشته باشد، یکی از بهترین راه ها، استفاده از float خواهد بود. 

عناصر Inline نیز Box هستند

در قسمت های قبلی بیشتر درباره عناصر بلوکی (Block Level) صحبت کردیم اما لازم به ذکر است که عناصری که حالت نمایش inline دارند هم، می‌توان گفت که box هستند. چراکه می‌توان آنها را بصورت مستطیل‌هایی فرض کرد. مانند:

همچنین این عناصر می توانند مانند مابقی عناصر، padding و border و margin داشته باشند. 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند