گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 15:49
كد :230
با استفاده از خاصیت display و visibility می توان وضعیت نمایش یک عنصر (قابل رویت بودن و یا پنهان بودن ) را به دو حالت مختلف مشخص نمود.
برای عدم نمایش یک عنصر، در واقع پنهان کردن یک عنصر می توان مقدار خاصیت display را برابر none ویا مقدار خاصیت visibility را برابر hidden قرار داد.
تفاوت این دو خاصیت در این است که اگر برای عنصری مقدار ;visibility: hidden در نظر گرفته شود عنصر مورد نظر نمایش داده نمی شود ولی فضایی که اشغال کرده بود همچنان اشغال باقی می ماند به این معنی که عنصر مورد نظر در صفحه وجود دارد ولی دیده نمی شود، در حالی که اگر برای عنصری خاصیت ;display: none در نظر گرفته شود این عنصر، نمایش داده نمی شود و فضای مربوط به این عنصر در صفحه نیز آزاد می شود .
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible</h1>
<h1 class="hidden">This is a hidden</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
مقادیر block و inline برای خاصیت display :
عناصری که block هستند تمام عرض صفحه را اشغال می کنند و بطوری که گویا یک تگ <br /> قبل و بعد از آنها وجود دارد. ( کنار آنها عنصر دیگری قرار نمی گیرد.)
h1, p, li, div از جمله عناصر block می باشند.
» در مورد عناصری که inline هستند، این عناصر به اندازه خود فضا اشغال می کنند و عناصر دیگر می توانند در کنارشان قرار بگیرند.
تگ های <span> , <a> از جمله عناصر inline هستند.
تغییر خاصیت یک عنصر inline به block و بالاعکس. به مثال های زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible</h1>
<h1 class="hidden">This is a none</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="#" target="_blank">HTML</a></li>
<li><a href="#" target="_blank">CSS</a></li>
<li><a href="#" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>