آموزش CSS

آموزش CSS - خصوصیت Display

خصوصیت display، نوع جعبه ایجاد شده توسط المان را کنترل می کند.

خصوصیت display:

زبان برنامه نویسی CSS مقدار نمایش پیش فرض را برای تمامی المان ها تعریف می کند. به عنوان مثال المان Div به عنوان بلوک رندر می شود این در حالیست که المان Span به صورت Inline نمایش داده می شود.

تغییر مقدار پیش فرض نمایش:

تغییر مقدار پیش فرض نمایش یک المان می تواند دستکاری مهمی باشد. به عنوان مثال تغییر المان سطح Inline برای نمایش بلوکی یا تغییر المان سطح بلوک برای نمایش inline  می تواند موضوع مهمی باشد.

نکته: خصوصیت display یکی از قدرتمندترین و مفید ترین خصوصیت ها در زبان برنامه نویسی CSS است. این گزینه برای ایجاد صفحات وبی که ظاهر متفاوتی دارند و در عین حال از استانداردهای وب تبعیت می کنند بسیار عالی است.

بلوک نمایش:

مقدار بلوک خصوصیت display، المان را مجبور می کند همانند المان در سطح بلوک رفتار کند.  قانون سبک دهی در مثال زیر المان های <span> و <a> را به عنوان المان سطح بلوک نمایش می دهد:

span {
    display: block;
}
a {
    display: block;
}

نکته: تغییر نوع نمایش المان تنها رفتار نمایش یک المان را تغییر می دهد و نوع المان را تغییر نخواهد داد. به عنوان مثال المان Inline( درون خطی)  که بر روی display: block تنظیم شده است نمی تواند المان های دیگر بلوکی را در خود جای دهد.

نمایش درون خطی:

مقدار درون خطی خصوصیت display باعث می شود یک المان به عنوان المان سطح درون خطی رفتار کند. قانون سبک دهی در مثال زیر  المان های P  و li را به عنوان المان inline( درون خطی) نمایش می دهد:

p {
    display: inline;
}
ul li {
    display: inline;
}

نمایش بلوکی- درون خطی:

مقدار بلوکی-درون خطی از خصوصیت display باعث می شود المان جعبه بلوکی را ایجاد کند که با محتوای اطرافش سرریز خواهد شد. قانون سبک دهی زیر المان های Div و Span را به عنوان بلوکی- درون خطی نمایش می دهد.

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display None:

مقدار None باعث می شود المان اصلا جعبه ای ایجاد نکند. المان های اولاد نیز هیچ جعبه ای ایجاد نخواهند کرد حتی اگر خصوصیت Display آن ها چیزی به جز None باشد. به مثال زیر توجه کنید:

h1 {
    display: none;
}
p {
    display: none;
}

نکته: مقدار None برای خصوصیت Display جعبه نامرئی ایجاد نمی کند. این مقدار اصلا جعبه ای تولید نمی کند.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...