تفاوت بین: display:none و visibility:hidden

echessdesign

echessdesign

مدیر انجمن طراحی وب
درود
میدونم که این آموزش بسیار ابتدایی هست، اما جهت تنوع و استفاده برای مبتدیانی همچون من بد نیست

Display: none : در صورتی که مقدار ابن خصییه dsplay برابر با none شود، علاوه بر مخفی کردن المانی که این خصیصه بدان نسبت داده شد، آن را از جریان المان های صفحه خارج می کند.

--


Visibility: hidden : اگر می خواهید المان های مخفی شده ، از جریان المان های موجود در صفحه خارج نشوند، از visibility: hidden استفاده کنید. به بیان دیگر، فضای اشغالی توسط این المان ها کماکان حفظ شده و فقط از نمایش آنها جلوگیری میشود.


مثال:
HTML: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
img {
	width:200px;
	height:200px;
}
#echess {
	width:50px;
	height:50px;
	background:red;
}
</style>
</head>

<body>
<div id="echess">
<img  src="echess design" alt="echessdesign" style="display:none;" />
</div>
<br />
<div id="echess">
<img  src="echess design" alt="echessdesign" style=" visibility:hidden;" />
</div>


</body>

</html>

منبع: خودم echessdesign.com
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا