DISPLAY PROPERTY

  • Block: همیشه در خط جدیدی شروع میشه و کل خط قابل استفاده رو برای width کامل خودش برمیداره.(تا جا داره چپ و راست کش میاد) مثل div, h1,p
  • Inline: در خط جدیدی شروع نمیشه و فقط فضایی که نیاز داره رو استفاده میکنه مثل span
  • فرق display none با visibility hidden اینکه none کاملا المنت رو غیب میکنه ولی hidden فقط ناپدید میشه و فضایی که داشت هنوز گرفته میشه.
  • Inline-block: داخل المنت به صورت block-level است ولی خارج اون، یعنی خود المنت به صورت inline-level است.
  • list-item: با المنت مثل یک li element رفتار میشه
  • table: اجازه میده المنت مثل یک table element رفتار کنه.
  • Initial: مقدار display پیشفرض رو در نظر میگیره.
  • Inherit: از پدر مقدار display رو میگیره.


max-width: اگه با مثالی بخواییم توضیح بدیم. block المنتی داریم که width 500px داره همراه با margin auto که وسط بیوفته. مشکل جایی پیش میاد که صفحه کوچکتر از خود المنتمون که 500px هست بشه، که اسکرول میخوریم. اگه بجای width از max-width 500px استفاده کنیم به صورت اتومات در صورت کمبود فضا المنتمون کوچیک میشه. مثال


POSITION PROPERTY

  • static: همه المنتا به صورت دیفالت static هستند که نمیشه بهشون top, bottom, left, right داد و نمیشه به صورت خاصی positionیی بهش داد، تنها با توجه به روال صفحه position میدن.
  • relative: به صورت عادی position داده میشود ولی top, bottom, left, right تاثیر بر المنت میگزارند.
  • absolute: المنتی که اینو داشته باشه از صفحه کنده میشه و روال صفحه رو از دست میده، هیچ فضایی از این المنت در صفحه ایجاد نمیشه بجاش position اش وابسته به نزدیک ترین پدر دارای position است.(نکته: المنتی position داره که هر چیزی بجز static باشه) میشه بهش top,botton,left,right و margin داد ولی توسط margin المنت های دیگر تحت تاثیر قرار نمیگیرن.

float: به المنت میگه کدوم طرف باید شناور باشه.

clear: برای کنترل کردن رفتار المنت ها با مقدار float مورد استفاده قرار میگیره مثلا وقتی به المنتی float بدیم، المنت های بعدی آن دور آن شناور میشوند برای جلو گیری از این از clear استفاده میکنیم. از clear برای مشخص کردن اینکه کدوم طرف دیگر المنت ها نمیتونن شناور شوندleft, right, both .

 نکته: اگه المنتمون float داشته باشه و بزرگ تر از سایز پدرش بشه شروع به بیرون زدن از المنت پدر میکنه که برای حل این مشکل به المنت پدر یک overflow auto میدیم. یا راه زیبا تر اینکه از یک after که به المنت پدر میدیم استفاده کنیم:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}