برگه های سبک آبشاری (CSS) برای تعریف روشی که در آن عناصر HTML مورد نیاز برای نمایش هستند استفاده می شود. این روشی برای افزودن سبک (مانند فونت، رنگ، فاصله) به اسناد وب است. در این آموزش با ویژگی های CSS Display آشنا می شوید.
ویژگی Display در Css چیست؟
ویژگی CSS display چیدمان عنصر در صفحه را کنترل می کند. مقدار پیش‌فرض ویژگی display: block یا inline است.
جدول زیر نحوه استفاده و تاریخچه نسخه این ویژگی را توضیح می دهد.
|
Default value: |
inline |
|
Applies to: |
All elements |
|
Inherited: |
No |
|
Version: |
CSS 1,2,3 |
نحو:
display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit
CSS Display Inline
مقدار inline ویژگی display یک عنصر جعبه مانند <span> یا <a> در سطح درون خطی ایجاد می کند. عنصر درون خطی فقط عرض مورد نیاز را در نظر می گیرد.
CSS Display Inline-Block
inline-block عنصر را به عنوان عناصر سطح بلوک نمایش می دهد. عناصر به ویژگی های عرض و ارتفاع واکنش نشان می دهند.
CSS Display Block
مقدار Block ویژگی display باعث می شود که یک عنصر در سطح بلوک مانند یک عنصر <div> یا <p> رفتار کند.
CSS Display None
هنگام استفاده از CSS Display مقدار none نمایش عنصر را خاموش می کند. هیچ فضایی را اشغال نخواهد کرد.
سایر مقادیر Display
مقدار |
توضیح |
|
inline |
برای تولید یک جعبه عنصر درون خطی استفاده می شود |
|
block |
این عنصر را به عنوان یک عنصر در سطح بلوک نمایش می دهد |
|
flex |
این عنصر را به عنوان یک ظرف انعطاف پذیر نشان می دهد |
|
inline-block |
این عنصر را به عنوان یک محفظه بلوکی در سطح درون خطی نمایش می دهد |
|
none |
برای حذف عنصر استفاده می شود |
|
inherit |
این عنصر نمایشگر را از عنصر اصلی خود به ارث می برد |
|
table |
عناصر مانند یک عنصر جدول HTML رفتار خواهند کرد |
|
run-in |
این عنصر را بر اساس زمینه به صورت درون خطی یا سطح بلوک نمایش می دهد |
پشتیبانی مرورگر
Chrome |
Mozilla |
Safari |
Opera |
|
4.0 |
3.0 |
3.1 |
7.0 |
