سبد (0)

تبلیغات

خصوصیت display

مثال (خصوصیت display)

نمایش عنصر <P> به عنوان یک عنصر inline:

p.inline
{
display:inline;
}
خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خاصیت display می توانیم نوع boxی که برای عنصر  به کار رفته است را مشخص کنیم.

مقدار پیشفرض inline
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.display="block"

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت display را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقادیر "inline-table", "table", "table-caption", "table-cell", column", "table-column-group", "table-row", "table-row-group", , و "inherit"  را پشتیبانی نمی کند.

IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.


مقدارهای خصوصیت

مقدارتوضیحاتنمایش دادن
inline عناصر را به صورت inline نمایش می دهد (مانند <span>). این مقدار پیش فرض است. نمایش دادن »
block یک عنصر را به صورت block نمایش می دهد (مانند block). نمایش دادن »
inline-block

یک ظرف inline تعریف می کند که عناصر داخل آن به صورت block نمایش داده می شود.

 
inline-table

عنصر را به صورت جدول inline نمایش می دهد.

 
list-item

عناصر را مانند عنصر li در نظر می گیرد.

نمایش دادن »
run-in

یک عنصر بسته به محتوا، یا به صورت block یا به صورت inline در نظر گرفته می شود.

 
table

عنصر را مانند عنصر جدول در نظر می گیرد.

 
table-caption

عناصر را مانند عنصر <caption> در نظر می گیرد.

 
table-column-group

عناصر را مانند <colgroup> در نظر می گیرد.

 
table-header-group

عناصر را مانند عنصر <thead> در نظر می گیرد.

 
table-footer-group

عناصر را مانند عنصر <tfoot> در نظر می گیرد.

 
table-row-group

عناصر را مانند عنصر <tbody> در نظر می گیرد.

 
table-cell

عناصر را مانند <td> در نظر می گیرد.

 
table-column

عناصر را مانند عنصر <col> در نظر می گیرد.

 
table-row

عناصر را مانند عنصر ردیف جدول <tr> در نظر می گیرد.

 
none

عنصر در هر صورت نشان داده نمی شود.

نمایش دادن »
inherit

مقدار خصوصیت display از عنصر والدش ارث بری می کند.

 

بیاموزهای مرتبط

CSS Display (بیاموز CSS)


مثالs

مثال - خودتان امتحان کنید

Using the inherit value
این مثال نحوه ی استفاده از مقدار inherit را نشان می دهد.

دیدگاه‌ها  

+1 # مهدی دلاور 1395-12-20 22:21
سلام و خسته نباشید.
میشه در مورد کاربرد مقدار table در خصوصیت display من رو راهنمایی کنید. اینکه عنصر را مانند یک عنصر جدول در نظر میگیرد در این مثال یعنی چی؟
ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1395-12-21 08:48
سلام
به دو روش می توانید یک جدول را در صفحات وب استفاده نماییید:
1- استفاده از تگ table در HTML
2- استفاده از خصوصیات CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-gr oup }
tbody { display: table-row-group }
tfoot { display: table-footer-gr oup }
col { display: table-column }
colgroup { display: table-column-gr oup }
td, th { display: table-cell }
caption { display: table-caption }

همانطور که در بالا مشاهده می کنید، به ازای هر کدام از تگ های مربوط به جدول، خصوصیت CSS معادل آن آورده شده است.
بنظر می رسد استفاده از روش دوم یعنی استفاده از خصوصیت های CSS برای پیاده سازی ساختار جدول، مناسب تر باشد و دلیل این موضوع این است که در روش اول یعنی استفاده از تگ table، تا زمانی که تمام محتوای جدول سمت کاربر لود نشود، کل جدول نمایش داده نمی شود. بعنوان مثال اگر داخل جدول، تصویر داشته باشیم، تا زمانی که عکس ها، سمت کاربر لود نشود، کل جدول نمایش داده نمی شود. اما در روش دوم این مشکل وجود ندارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # حسین 2000 1395-03-30 17:01
سلام، آموزش خصوصیت Display عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی