نمایش (Display)
«نمایش (Display)» یعنی نحوه چیدمان عنصر در صفحه. عنصر «بلوک (Block)» از خط تازه شروع می شود. عنصر «درون خطی (Inline)» در همان خط می ماند. با ویژگی display می توانیم رفتار پیش فرض را عوض کنیم. مثل اینکه نیمکت کلاس را تکی یا کنار هم بچینیم.
ویژگی نمایش (display) چیست؟
display تعیین می کند عنصر بلوکی باشد یا درون خطی. همچنین مقادیر دیگری دارد مثل inline-block، flex، grid و none.
<style>
li {
display: inline;
}
</style>
<ul>
<li>خانه</li>
<li>درباره</li>
<li>تماس</li>
</ul>
بلوک در برابر درون خطی
عنصر بلوکی تمام عرض را می گیرد. عنصر درون خطی فقط به اندازه محتواست. با display می توانیم این رفتار را جابه جا کنیم.
<style>
span.badge {
display: block;
padding: 8px;
border: 1px solid #ddd;
}
</style>
<p>این یک <span class="badge">نشانک</span> بلوکی است.</p>
پنهان سازی: display:none یا visibility:hidden؟
display:none کاملاً عنصر را از چیدمان حذف می کند. visibility:hidden عنصر را پنهان می کند اما جا را نگه می دارد.
<style>
h1.hidden {
display: none;
}
</style>
<h1 class="hidden">عنوان پنهان</h1>
<style>
h1.hidden {
visibility: hidden;
}
</style>
<h1 class="hidden">عنوان پنهان اما جاگیر</h1>
نمایش را با جاوااسکریپت عوض کن
با رویداد کلیک می توان نمایش را بلوکی یا هیچ کرد.
<style>
#panel {
display: none;
}
</style>
<button onclick="togglePanel()">نمایش یا پنهان</button>
<div id="panel">سلام! من یک پنل هستم.</div>
<script>
function togglePanel() {
var x = document.getElementById("panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<\/script>
مقادیر پرکاربرد display
مقادیر رایج: inline، block، inline-block، flex، grid، contents، none. هرکدام چیدمان را متفاوت می کنند.
نکته: تغییر display نوع معنایی عنصر را عوض نمی کند. فقط ظاهر تغییر می کند.
گام های عملی
- نوع عنصر را تشخیص بده.
- display مناسب را انتخاب کن.
- در صورت نیاز با JS جابه جا کن.
بیشتر درباره ویژگی نمایش بخوان. برای جدول ها، جدول واکنش گرا و استایل جدول را ببین.
جمع بندی سریع
- display نحوه چیدمان را تعیین می کند.
- block عرض کامل می گیرد.
- inline هم خط می ماند.
- none حذف از چیدمان است.
- visibility جا را نگه می دارد.