خاصیت display در CSS و مقادیر آن

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در جلسه پیش گفتیم که هر المان در مرورگر دو حالت برای نمایش دارد: block و inline . در مورد هر کدام از این ها توضیح کامل همراه با مثال گفتیم . در این جلسه می خواهیم با خاصیت display در css آشنا شویم که نحوه نمایش المان ها را مشخص می کند( قبل از مطالعه این آموزش حتما به آموزش جلسه قبل تسلط کافی داشته باشید)

در آموزش زیر به سوالات زیر پاسخ می دهیم:

نوع نمایش المان ها را در مرورگر را چطور تغییر دهیم؟
خاصیت display در css چیست؟
خاصیت display چه مقادیری می گیرند؟
مقدار inline-block برای خاصیت display چه کاربردی دارد؟
مقدار none برای خاصیت display چیست؟تفاوت آن با visibility:hidden چیست؟
و…

با ما همراه باشین ;-)

انواع مقادیر خاصیت display

همانطور که در جلسه قبل گفتیم المان ها در مرورگر به صورت پیشفرض یکی از دو حالت block یا inline برای نمایش دارند مثلا تگ div به صورت block می باشد و تگ a به صورت inline می باشد.

حالا اگر بخواهیم مثلا المان div به صورت inline نمایش داده شود یا a به صورت block باشد باید چیکار کنیم؟ خاصیت display این امکان را فراهم می کند که نوع نمایش المان ها در مرورگر را تغییر داد. این خاصیت مقادیر متفاوتی می پذیرد که در ادامه به توضیح چند مورد از مهمترین و پرکاربردترین آن ها می پردازیم.

inline

در مورد حالت نمایش inline به صورت کامل در جلسه قبل توضیح دادیم.گفتیم که بعضی از المان ها مثل <a>،<span> و … در حالت پیشفرض به اندازه محتوای درونی خود رشد می کنند و در کنار هم در یک خط قرار می گیرند.
با دادن استایل dispaly:inline به یک المان، می توانیم نحوه نمایش یک المان را به inline تغییر بدهیم.

block

به نحوه نمایش block هم در جلسه قبل پرداختیم.گفتیم که بعضی المان ها مثل div در حالت پیشفرض به اندازه تمام عرض والد خود رشد می کند و المان های بعد را به خط بعد هدایت می کند.
با دادن استایل dispaly:block به یک المان، می توانیم نحوه نمایش آن المان را به block تغییر بدهیم.

none

خاصیت dispaly:none باعث می شود المان نمایش داده نشود و بقیه المان ها جای آن را می گیرند. یعنی عرض و ارتفاع المان در نظر گرفته نمی شود.(توجه کنید در این حالت حتی ربات های گوگل هم المان را نخواهند دید)

نکته: اگر بخواهیم که المان نمایش داده نشود و جای آن هم خالی بماند و المان های دیگر جای آن را پر نکنند از خاصیت visibility:hidden استفاده می کنیم.

inline-block

با دادن display:inline-block به یک المان، نحوه نمایش آن المان مشابه inline خواهد شد با این تفاوت که در این حالت عرض و ارتفاع تاثیر می گذارند.پس این نوع نمایش ترکیبی از inline و block می باشد .مثل inline به اندازه محتوای درونش رشد می کند و مثل block

نکته: در جلسه قبل گفتیم که یک المان با نوع نمایش inline، عرض و ارتفاع نمی پذیرد. ولی الان با یاد گرفتن خاصیت display و مقدار inline-block حرف خود را پس می گیریم . یک المان inline می تواند عرض و ارتفاع بگیرد اگر display آن را inline-block بدهیم.

نکته: در جلسه قبل گفتیم که المان با نمایش inline می تواند margin و padding بگیرد ولی این margin و padding فقط در راستای افقی نسبت به المان های اطراف فاصله ایجاد می کنند. برای اینکه margin و padding هم در راستای افقی و هم در راستای عمودی تاثیر بگذارند باید نوع نمایش المان به inline-block تغییر کند.

مثال برای چهار مقدار inline، block ،inline-block، none

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
*{
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
div{
	background:	#ffe259;
	margin:30px 0;
}
.one{
	display:inline;
	background:#e6e6e6;
}
.two{
	text-align:center;
}
ul{
	background:#2c3e50;
	height:57px;
	width:100%;
	padding:20px;
}
li{
	display:inline;
	list-style: none;
}
a{
    text-decoration: none;
	color: #2ecc71;
	padding:20px;
	}
a:hover{
    background: #27ae60;
	color:#2c3e50;
}
.span-block{
	display:block;
	color:#0000CC;
	font-size:15px;
}
.span-none{
	display:none;
}
.span-hidden{
	visibility: hidden;
}
.span-inline-block{
	background:#02111d;
	color:#fff;
	opacity: 0.6;
	display:inline-block;
	margin:10px;
	padding:20px;
}
.sp{
	background:#02111d;
	opacity: 0.6;
	color:#fff;
	margin:10px;
	padding:20px;
}
.three{
	background:#2c3e50;
	text-align:center;
	margin:40px auto;
}
.a-in-bl{
	display: inline-block;
}
</style>
</head>
<body>

<p>
	<h2 class="one">
	مثال برای خاصیت display:inline
	</h2>
	در این مثال دو المان h2 و li که از نوع بلاک می باشند با خاصیت display به صورت inline نمایش داده می شوند.
</p>
<div class="two">
<ul>
  <li><a href="#">آموزش HTML</a></li>
  <li><a href="#">آموزش CSS</a></li>
  <li><a href="#">آموزش PHP</a></li>
</ul>
</div>
<div>
همانطور که در جلسه قبل گفتیم المان span در html به صورت inline می 
باشد ولی الان با استفاده از <span class="span-block">خاصیت display:block</span>این المان به صورت
 بلاک نمایش داده می شود
</div>
<div>
با کمک خاصیت display:none می توانیم هر المانی را <span class="span-none">این متن مخفی است</span>مخفی کنیم
اما با خاصیت visibility: hidden می توان المان را با حفظ مکانش مخفی کرد<span class="span-hidden">این متن مخفی است</span>مثل اینجا
</div>
<div>
<b>در منو زیر از خاصیت <span class="span-inline-block" > inline-block</span> استفاده شده است 
در همین خط به المان span استایل display:inline-block دادیم که باعث می شود هم در راستای عمودی و هم افقی رشد کند.
پس margin و padding هم در راستای افقی و هم عمودی تاثیر می گذارد
در ادامه از متن تصادفی استفاده کردیم تا تاثیر inline-block را دقیق ببینید. </b> 
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،
حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
<b> می توانید تاثیر margin و padding روی المان <span class="sp">span</span> ببینید.چون از نوع inline است فقط در راستای افقی margin و padding تاثیر می گذارد</b>
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و
 مان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
 <b>امیدوارم متوجه تاثیر خاصیت dispaly روی المان span شده باشید</b>
</div>
 <div class="three">
  <a class="a-in-bl" href="#">آموزش اندروید</a></li>
  <a class="a-in-bl" href="#">آموزش میکروتیک</a></li>
  <a class="a-in-bl" href="#">آموزش سی شارپ</a></li>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

border: 0;

box-sizing: border-box;

}

div{

background: #ffe259;

margin:30px 0;

}

.one{

display:inline;

background:#e6e6e6;

}

.two{

text-align:center;

}

ul{

background:#2c3e50;

height:57px;

width:100%;

padding:20px;

}

li{

display:inline;

list-style: none;

}

text-decoration: none;

color: #2ecc71;

padding:20px;

}

a:hover{

background: #27ae60;

color:#2c3e50;

}

.span-block{

display:block;

color:#0000CC;

font-size:15px;

}

.span-none{

display:none;

}

.span-hidden{

visibility: hidden;

}

.span-inline-block{

background:#02111d;

color:#fff;

opacity: 0.6;

display:inline-block;

margin:10px;

padding:20px;

}

.sp{

background:#02111d;

opacity: 0.6;

color:#fff;

margin:10px;

padding:20px;

}

.three{

background:#2c3e50;

text-align:center;

margin:40px auto;

}

.a-in-bl{

display: inline-block;

}

</style>

</head>

<body>

<p>

مثال برای خاصیت display:inline

</h2>

در این مثال دو المان h2 و li که از نوع بلاک می باشند با خاصیت display به صورت inline نمایش داده می شوند.

</p>

<ul>

<li><a href="#">آموزش HTML</a></li>

<li><a href="#">آموزش CSS</a></li>

<li><a href="#">آموزش PHP</a></li>

</ul>

</div>

<div>

همانطور که در جلسه قبل گفتیم المان span در html به صورت inline می

باشد ولی الان با استفاده از <span class="span-block">خاصیت display:block</span>این المان به صورت

بلاک نمایش داده می شود

</div>

<div>

با کمک خاصیت display:none می توانیم هر المانی را <span class="span-none">این متن مخفی است</span>مخفی کنیم

اما با خاصیت visibility: hidden می توان المان را با حفظ مکانش مخفی کرد<span class="span-hidden">این متن مخفی است</span>مثل اینجا

</div>

<div>

<b>در منو زیر از خاصیت <span class="span-inline-block" > inline-block</span> استفاده شده است

در همین خط به المان span استایل display:inline-block دادیم که باعث می شود هم در راستای عمودی و هم افقی رشد کند.

پس margin و padding هم در راستای افقی و هم عمودی تاثیر می گذارد

در ادامه از متن تصادفی استفاده کردیم تا تاثیر inline-block را دقیق ببینید. </b>

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و

برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته،

حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.

<b> می توانید تاثیر margin و padding روی المان <span class="sp">span</span> ببینید.چون از نوع inline است فقط در راستای افقی margin و padding تاثیر می گذارد</b>

در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و

مان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.

<b>امیدوارم متوجه تاثیر خاصیت dispaly روی المان span شده باشید</b>

</div>

<a class="a-in-bl" href="#">آموزش اندروید</a></li>

<a class="a-in-bl" href="#">آموزش میکروتیک</a></li>

<a class="a-in-bl" href="#">آموزش سی شارپ</a></li>

</div>

</body>

</html>

نتیجه اجرا

توضیح کد بالا

توجه کنید نمی توان خط به خط کدها را توضیح داد . حتما خودتون این کدها را بزنید تا دقیقا متوجه عملکرد آن ها شوید.ما نکاتی که لازم است را در ادامه بررسی می کنیم.

در پاراگراف اول این مثال با دادن خاصیت dispaly : inline به المان <h2> ، نوع نمایش از حالت block به inline تبدیل شد و ادامه پاراگراف در همان خط قرار گرفت . در حالی که h2 به صورت پیش فرض block می باشد و باید ادامه متن را به خط بعد می شکست.

در div اول (منو) نوع نمایش المان li که به صورت پیش فرض به صورت block می باشد با خاصیت display : inline تغییر کرد. در نتیجه مقادیر li ها در یک خط کنار هم قرار گرفتند.(پس خاصیت display:inline برای ایجاد منو افقی هم کاربرد دارد)
در مثال بالا از رویداد hover استفاده شده است که در جلسه ششم کامل تدریس شد.بنابراین روی هر المان a که می رویم استایل آن با توجه به رویداد hover: تغییر می کند.

در div دوم از المان span استفاده شد که به صورت پیش فرض به صورت inline نمایش داده می شود ولی با خاصیت display : block نحوه نمایش آن تغییر کرد.

در div سوم از دو استایل dispaly:none و visibility:hidden برای المان span استفاده کردیم که تفاوت آن ها را در مخفی کردن این المان ببینید.

در div چهارم دو بار از المان span استفاده کردیم و به هر دو margin و padding دادیم.المان span ای که استایل display:inline-block گرفته است ، margin و padding هم در راستای افقی و هم در راستای عمودی المان های اطراف span را هول می دهند ولی المان span ای که به صورت پیش فرض inline می باشد ،margin و padding فقط در راستای افقی المان های اطراف span را هول می دهند.

در div پنجم االمان a نحوه نمایش inline-block گرفته است پس تاثیر padding هم در راستای افقی و هم عمودی دیده می شود.

4 مقدار برای display معرفی کردیم که به شدت پرکاربرد هستند. مقادیر دیگری هم برای خاصیت display وجود دارد که آموزش آن ها در این سطح نمی گنجد. (اگر می خواهید با تمام مقادیر خاصیت display آشنا شوید به این لینک مراجعه کنید).

امیدوارم با خاصیت display در css به خوبی آشنا شده باشید و بتوانید به راحتی در طراحی سایت به کار گیرید.در جلسه بعد با نحوه استایل دهی فونت در CSS آشنا می شویم.

خلاصه جلسه امروز به شرح زیر می باشد:

خصوصیات
نام	مقادیر	توضیح
display	inline، block، inline-block،none	مشخص کردن نحوه نمایش یک المان

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 3 امتیاز: 3.7]

۳ دیدگاه

matty تیر ۹, ۱۳۹۹ در ۶:۵۳ ب٫ظ - پاسخ

عالی بود، بسیار دقیق توضیح دادین، یه دنیا ممنون از سایت خوبتون ۳>
matty تیر ۹, ۱۳۹۹ در ۷:۰۵ ب٫ظ - پاسخ

ببخشید یه اشکال تایپی وجود داره
در div اول (منو) نوع نمایش المان li که به صورت پیش فرض به صورت block می باشد با خاصیت display : block تغییر کرد. در نتیجه مقادیر li ها در یک خط کنار هم قرار گرفتند.(پس خاصیت display:inline برای ایجاد منو افقی هم کاربرد دارد)
اونجا باید”با خاصیت display : inline تغییر کرد” باشه
- آقایی تیر ۹, ۱۳۹۹ در ۸:۰۵ ب٫ظ - پاسخ
  
  سلام و عرض ادب
  از توجه دقیق شما و انتقال نظرتون بسیار سپاسگزاریم.موردی که فرمودین اصلاح شد.
  با تشکر از همراهی شما

خاصیت display در CSS و مقادیر آن

انواع مقادیر خاصیت display

inline

block

none

inline-block

مثال برای چهار مقدار inline، block ،inline-block، none

نتیجه اجرا

توضیح کد بالا

۳ دیدگاه

دیدگاه خود را بنویسید لغو پاسخ

داژیار پردازش ایساتیس

ارتباط با ما

اطمینان به اعتبار ما

خاصیت display در CSS و مقادیر آن

انواع مقادیر خاصیت display

inline

block

none

inline-block

مثال برای چهار مقدار inline، block ،inline-block، none

نتیجه اجرا

توضیح کد بالا

این مطلب رو با دوستانتون به اشتراک بگذارید

مطالب مرتبط

۳ دیدگاه

دیدگاه خود را بنویسید لغو پاسخ

داژیار پردازش ایساتیس

ارتباط با ما

اطمینان به اعتبار ما