ویژگی display در CSS برای تعیین نحوه نمایش یک عنصر در صفحه وب استفاده می‌شود. این ویژگی کنترل می‌کند چگونگی چیدمان و قابلیت دیداری یک عنصر را.
ویژگی display مفید در تنظیم انواع داخلی و خارجی نمایش یک عنصر است.
مقادیر ممکن مقداری که به ویژگی display منتقل می‌شود یک واژه کلیدی است. این مقادیر کلیدی به شش گروه مختلف دسته‌بندی می‌شوند، که به شرح زیر است:
مقادیر بیرونی (<display-outside>): مقادیر زیر این سر دسته مشخص کننده نوع نمایش بیرونی یک عنصر هستند.
inline: باعث می‌شود عنصر مانند یک عنصر درون خطی عمل کند و اجازه می‌دهد عناصر دیگر کنار آن در همان خط ظاهر شوند. مثال‌ها: <span>، <img>، <a>، و غیره.
block: باعث می‌شود عنصر مانند یک عنصر سطح بلوک عمل کند، تمام عرض کانتینر والد خود را اشغال کرده و قبل و بعد از آن یک خط جدید ایجاد کند. مثال‌ها: <div>، <form>، <p>، و غیره.
مقادیر درونی (<display-inside>): مقادیر زیر این سر دسته نوع نمایش داخلی یک عنصر را مشخص می‌کنند.
flow: عنصر محتویات خود را با استفاده از چیدمان جریان (چیدمان بلوک و درون خطی) نمایش می‌دهد.
flow-root: عنصر یک جعبه بلوک را نشان می‌دهد، به ریشه‌های قالب‌بندی خود ارجاع می‌دهد.
table: یک جعبه بلوک را تعریف می‌کند، عملکرد مانند عناصر <table> HTML دارد.
flex: یک جعبه بلوک را تعریف می‌کند، عملکرد بر اساس مدل flexbox دارد.
grid: یک جعبه بلوک را تعریف می‌کند، عملکرد بر اساس مدل شبکه دارد.
ruby: یک عنصر سطح درونی را تعریف می‌کند و بر اساس مدل قالب‌بندی ruby عمل می‌کند.
مقادیر موارد لیست (<display-listitem>): باعث می‌شود عنصر مانند نشانگر عنصر لیست رفتار کند، معمولاً با عناصر <li> استفاده می‌شود.
یک مقدار تنها یک عنصر لیست را نشان می‌دهد.
می‌تواند همراه با list-style-type و list-style-position استفاده شود و عنصر لیست می‌تواند با هر مقدار نمایش بیرونی و مقادیر داخلی flow یا flow-root ترکیب شود.
مقادیر داخلی (<display-internal>): چیدمان‌های با ساختار داخلی پیچیده مانند جدول و ruby از این ویژگی برای نمایش محتوا استفاده می‌کنند.
-
table-row-group: مانند عنصر <tbody> HTML عمل می‌کند.
-
table-header-group: مانند عنصر <thead> HTML عمل می‌کند.
-
table-footer-group: مانند عنصر <tfoot> HTML عمل می‌کند.
-
table-row: مانند عنصر <tr> HTML عمل می‌کند.
-
table-cell: مانند عنصر <td> HTML عمل می‌کند.
-
table-column-group: مانند عنصر <colgroup> HTML عمل می‌کند.
-
table-column: مانند عنصر <col> HTML عمل می‌کند.
-
table-caption: مانند عنصر <caption> HTML عمل می‌کند.
-
ruby-base: مانند عنصر <rb> HTML عمل می‌کند.
-
ruby-text: مانند عنصر <rt> HTML عمل می‌کند.
-
ruby-base-container: به عنوان جعبه‌های ناشناس تولید می‌شوند.
-
ruby-text-container: مانند عنصر <rtc> HTML عمل می‌کند.
مقادیر جعبه (<display-box>): تعیین می‌کند که آیا یک جعبه نمایش به وسیلهٔ یک عنصر ایجاد می‌شود یا خیر.
-
contents: نمایش عنصر توسط محتوای آن، یعنی فرزندان و عناصر زیرمجموعه‌اش جایگزین می‌شود.
-
none: نمایش عنصر و فرزندان آن را خاموش می‌کند.
مقادیر از پیش ساخته شده (<display-legacy>): مقدار یک واژه کلیدی که پیش‌تر ترکیب شده است. نیازمند واژه کلیدی جداگانه برای عناصر سطح بلوک و درون خطی است.
-
inline-block: باعث می‌شود عنصر به عنوان یک جعبه بلوک درون خطی عمل کند. همانند flow-root درون خطی.
-
inline-table: مشخص می‌کند که عنصر باید مانند یک جدول رفتار کند، اما همچنان درون یک محیط سطح بلوکی باشد. همانند جدول درون خطی.
-
inline-flex: اجازه می‌دهد که یک عنصر چیدمان جعبه انعطاف‌پذیر داشته باشد در حالی که در یک محیط سطح درون خطی شرکت می‌کند. همانند flex درون خطی.
-
inline-grid: مشخص می‌کند که یک کانتینر شبکه باید به عنوان یک عنصر درون خطی باشد. همانند شبکه درون خطی.
اعمال به تمامی عناصر HTML.
سینتکس
object.style.display = 'display:inline-flex';inline Value
ویژگی display در CSS برای تعیین نحوه نمایش یک عنصر در صفحه وب استفاده می‌شود. مقدار inline این ویژگی را به عنوان یکی از مقادیر ممکن آن تعریف می‌کند.
وقتی یک عنصر به مقدار inline تنظیم می‌شود، عنصر مانند یک بلاک متنی رفتار می‌کند و همچنین با سایر عناصر در خط درون یک خط قرار می‌گیرد. این بدان معناست که عنصری که با display: inline قرار می‌گیرد، از ابتدای یک خط شروع نمی‌شود و از فضای خالی بین عناصر دیگر استفاده نمی‌کند.
در مثال زیر، ما عناصر li را به صورت inline تنظیم کرده‌ایم، که عناصر لیست به صورت افقی و در یک خط نمایش داده می‌شوند. علاوه بر این، برای آن‌ها یک حاشیه، یک حدود و یک اندازه قلم نیز تعیین کرده‌ایم.
<html>
<head>
<style>
li {
display: inline;
font-size: 2rem;
border: 1px solid red;
margin: 5px;
}
</style>
</head>
<body>
<h2>Display - Inline</h2>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</body>
</html>در این مثال، هر یک از عناصر li کنار هم قرار می‌گیرند و هیچ خط جدیدی قبل یا بعد از هر عنصر li ایجاد نمی‌شود.
block Value
ویژگی display در CSS برای تعیین نحوه نمایش یک عنصر در صفحه وب استفاده می‌شود. مقدار block این ویژگی را به عنوان یکی از مقادیر ممکن آن تعریف می‌کند.
وقتی یک عنصر به مقدار block تنظیم می‌شود، عنصر به عنوان یک بلاک نمایش داده می‌شود که عرض کامل محتوا را در خود جای می‌دهد و خط جدیدی قبل و بعد از خود ایجاد می‌کند. این بدان معناست که عنصری که با display: block قرار می‌گیرد، از ابتدای یک خط شروع می‌شود و در خط جدیدی بعد از خود قرار می‌گیرد.
در مثال زیر، ما عناصر li را به صورت block تنظیم کرده‌ایم، که هرکدام از آن‌ها به عنوان یک بلاک در خط جدیدی قرار می‌گیرد. همچنین، برای هرکدام از عناصر یک حاشیه، یک حدود، یک اندازه قلم و یک رنگ پس‌زمینه تعیین کرده‌ایم.
<html>
<head>
<style>
li {
display: block;
font-size: 2rem;
border: 1px solid red;
margin: 5px;
background-color:aquamarine;
width: 200px;
}
</style>
</head>
<body>
<h2>Display - Block</h2>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</body>
</html>در این مثال، هر یک از عناصر li در خط جدیدی قرار می‌گیرند و هر کدام می‌توانند از تمام عرض موجود در خود استفاده کنند. همچنین، هرکدام دارای یک حاشیه، یک حدود، یک اندازه قلم و یک رنگ پس‌زمینه خاص است.
inline-block Value
ویژگی display در CSS برای تعیین نحوه نمایش یک عنصر در صفحه وب استفاده می‌شود. مقدار inline-block این ویژگی را به عنوان یکی از مقادیر ممکن آن تعریف می‌کند.
وقتی یک عنصر به مقدار inline-block تنظیم می‌شود، عنصر مانند یک عنصر inline در خط جاری نمایش داده می‌شود، اما مانند یک بلاک عمل می‌کند، به این معنا که می‌تواند ارتفاع و عرض خود را داشته باشد و دیگر عناصر نمی‌توانند در جانب چپ و راست آن قرار بگیرند. علاوه بر این، عنصرهایی که به مقدار inline-block تنظیم شده‌اند می‌توانند مشخصاتی مانند ارتفاع، عرض، حاشیه، پدینگ، و … را داشته باشند.
در مثال زیر، ما سه عنصر div را به صورت inline-block تنظیم کرده‌ایم. هرکدام از این عناصر در یک خط نمایش داده می‌شوند، اما می‌توانند ارتفاع و عرض دلخواه خود را داشته باشند. همچنین، هر یک دارای یک حاشیه، یک حدود، یک اندازه قلم و یک رنگ پس‌زمینه تعیین شده است.
<html>
<head>
<style>
div {
display: inline-block;
font-size: 2rem;
border: 1px solid red;
margin: 5px;
background-color: aquamarine;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<h2>display: inline-block</h2>
<div>Inline-Block 1</div>
<div>Inline-Block 2</div>
<div>Inline-Block 3</div>
</body>
</html>در این مثال، سه عنصر div در یک خط نمایش داده می‌شوند و هر کدام از آن‌ها ارتفاع و عرض دلخواه خود را دارا هستند. همچنین، هرکدام دارای یک حاشیه، یک حدود، یک اندازه قلم و یک رنگ پس‌زمینه خاص است.
none Value
وقتی یک عنصر به مقدار none تنظیم می‌شود، عنصر و تمام محتویات داخلی آن از صفحه وب حذف می‌شوند و از مکان‌گیری آن‌ها در صفحه صفر می‌شود. به عبارت دیگر، عنصر ویژه‌ای که به مقدار none تنظیم شده‌است به طور کامل از نمایش خارج می‌شود و هیچ‌گونه فضایی در صفحه وب اشغال نمی‌کند. این ویژگی معمولاً برای پنهان کردن عناصر به صورت دایمی یا موقتی استفاده می‌شود، مثلاً برای پنهان کردن یک عنصر بر اساس شرایط خاصی مانند کلیک کاربر یا تاخیر زمانی.
در مثال زیر، ما سه عنصر div داریم که به عنوان بلاک نمایش داده می‌شوند. اولین و سومین عناصر با کلاس “ib” به عنوان inline-block نمایش داده می‌شوند و دومین عنصر با کلاس “none” با مقدار none تنظیم شده است که باعث می‌شود این عنصر از صفحه وب حذف شود.
<html>
<head>
<style>
div {
font-size: 2rem;
border: 1px solid red;
margin: 5px;
background-color: aquamarine;
height: 100px;
width: 200px;
}
div.ib {
display: inline-block;
}
div.none {
display:none;
}
</style>
</head>
<body>
<h2>display: none (Block 2)</h2>
<div class="ib">Block 1</div>
<div class="none">Block 2</div>
<div class="ib">Block 3</div>
</body>
</html>در این مثال، عنصر دوم که دارای کلاس “none” است با مقدار display:none تنظیم شده است. بنابراین، این عنصر از صفحه وب حذف شده و نمایش داده نمی‌شود.
With table Values
وقتی یک عنصر به مقدار display: table تنظیم می‌شود، آن عنصر به عنوان یک جدول نمایش داده می‌شود. این مقدار به صورت متغیر و چگالی ویژگی‌ها را تعیین می‌کند.
وقتی یک عنصر به مقدار display: table-row تنظیم می‌شود، آن عنصر به عنوان یک ردیف در داخل جدول نمایش داده می‌شود.
وقتی یک عنصر به مقدار display: table-cell تنظیم می‌شود، آن عنصر به عنوان یک سلول در داخل ردیف‌های جدول نمایش داده می‌شود.
وقتی یک عنصر به مقدار display: table-caption تنظیم می‌شود، آن عنصر به عنوان توضیحات یک جدول نمایش داده می‌شود، که به طور پیش‌فرض در بالای جدول قرار دارد.
در مثال زیر، یک جدول ساده با چند ردیف و ستون نمایش داده شده است:
<html>
<head>
<style>
div {
display: flex;
border: 1px solid black;
}
.table {
display: table;
}
.row {
display: table-row;
padding: 3px;
}
.cell {
display: table-cell;
padding: 3px;
}
.caption {
display: table-caption;
text-align: center;
}
</style>
</head>
<body>
<div class="table">
<div class="caption">Sample Table</div>
<div class="row">
<div class="cell">Row1-Cell1</div>
<div class="cell">Row1-Cell2</div>
<div class="cell">Row1-Cell3</div>
</div>
<div class="row">
<div class="cell">Row2-Cell1</div>
<div class="cell">Row2-Cell2</div>
<div class="cell">Row2-Cell3</div>
</div>
<div class="row">
<div class="cell">Row3-Cell1</div>
<div class="cell">Row3-Cell2</div>
<div class="cell">Row3-Cell3</div>
</div>
</div>
</body>
</html>در این مثال، یک جدول ساده با عناصر div و با استفاده از ویژگی‌های display: table، display: table-row و display: table-cell ساخته شده است. همچنین یک عنصر div به عنوان توضیحات جدول با ویژگی display: table-caption استفاده شده است.
flex Value
ویژگی display در CSS به منظور تعیین نحوه نمایش یک عنصر استفاده می‌شود. مقدار flex این ویژگی مخصوصاً برای ایجاد طرح‌بندی‌های انعطاف‌پذیر و قابل تغییر استفاده می‌شود. با استفاده از display: flex، عناصر داخلی یک والد را می‌توان به راحتی ترتیب داد، فاصله داد و یا به طور خودکار تراز کرد.
در مثال زیر، یک مثال از استفاده از ویژگی display: flex آورده شده است:
<html>
<head>
<style>
div {
display: flex;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 200px;
}
</style>
</head>
<body>
<h2>display: flex</h2>
<div>Flex-Block 1</div>
<div>Flex-Block 2</div>
<div>Flex-Block 3</div>
</body>
</html>در این مثال، سه عنصر div دارای ویژگی display: flex هستند. ویژگی flex این اجازه را می‌دهد که این عناصر در یک خط قرار گیرند و فضای باقی‌مانده را به طور یکسان تقسیم کنند. همچنین از ویژگی‌های خود توزیع فاصله، ترتیب و تراز عناصر نیز استفاده می‌شود.
inline-flex Value
ویژگی display در CSS به کنترل نحوه نمایش عناصر در صفحه وب می‌پردازد. مقدار inline-flex از مقادیر این ویژگی است که به عناصر اجازه می‌دهد که به عنوان بلاک‌های انعطاف‌پذیر نمایش داده شوند اما در یک محیط خطی.
در مثال زیر، چند عنصر div با استفاده از display: inline-flex در یک خط نمایش داده شده‌اند:
<html>
<head>
<style>
div {
display: inline-flex;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: inline-flex</h2>
<div>Inline Flex-Block 1</div>
<div>Inline Flex-Block 2</div>
<div>Inline Flex-Block 3</div>
</body>
</html>در این مثال، تمام عناصر div با استفاده از ویژگی display: inline-flex در یک خط قرار می‌گیرند و به عنوان بلاک‌های انعطاف‌پذیر نمایش داده می‌شوند. این به معنای این است که عناصر به طور خودکار به اندازه محتوا خودشان انعطاف پذیری دارند و در یک خط قرار می‌گیرند، در حالی که همچنان از خصوصیت‌های بلاکی مانند padding، border و margin بهره می‌برند.
grid Value
مقدار grid از مقادیر این ویژگی است که به عناصر اجازه می‌دهد که به عنوان بلاک‌های گریدی نمایش داده شوند.
در مثال زیر، چند عنصر div با استفاده از display: grid در یک سیستم گرید نمایش داده شده‌اند:
<html>
<head>
<style>
div {
display: grid;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: grid</h2>
<div>grid-Block 1</div>
<div>grid-Block 2</div>
<div>grid-Block 3</div>
</body>
</html>در این مثال، تمام عناصر div با استفاده از ویژگی display: grid به عنوان بلاک‌های گریدی نمایش داده می‌شوند. این به معنای این است که عناصر به طور خودکار در یک سیستم گرید قرار می‌گیرند که می‌توانید طراحی مربوط به ستون‌ها و ردیف‌های آن را تعیین کنید.
inline-grid Value
مقدار inline-grid از مقادیر این ویژگی است که به عناصر اجازه می‌دهد که به عنوان بلاک‌های گریدی درون خطی (inline) نمایش داده شوند.
در مثال زیر، چند عنصر div با استفاده از display: inline-grid درون خطی نمایش داده شده‌اند:
<html>
<head>
<style>
div {
display: inline-grid;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: inline-grid</h2>
<div>inline grid-Block 1</div>
<div>inline grid-Block 2</div>
<div>inline grid-Block 3</div>
</body>
</html>در این مثال، تمام عناصر div با استفاده از ویژگی display: inline-grid به عنوان بلاک‌های گریدی درون خطی نمایش داده می‌شوند. این به معنای این است که عناصر به طور خودکار درون یک گرید درون خطی قرار می‌گیرند که می‌توانید آن‌ها را در یک خط نمایش دهید و از مزایای گرید درون خطی استفاده کنید.
list-item Value
مقدار list-item از مقادیر این ویژگی است که به عناصر اجازه می‌دهد که به عنوان عناصر لیست نمایش داده شوند.
در مثال زیر، سه عنصر li با استفاده از display: list-item به عنوان عناصر لیست نمایش داده شده‌اند:
<html>
<head>
<style>
li {
display: list-item;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: list-item</h2>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
</body>
</html>در این مثال، عناصر li با استفاده از ویژگی display: list-item به عنوان عناصر لیست نمایش داده شده‌اند. این به معنای این است که هر عنصر به طور جداگانه در لیست نمایش داده می‌شود، همچنین عناصر می‌توانند بر اساس نوع معمول یک لیست شماره‌دار یا لیست نشانه‌گذاری شده نمایش داده شوند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام