0

آشنایی با دستور display

21 ارديبهشت 1393

آشنایی با دستور display

دستور دیسپلی

تگ های html  در مرورگرها به طور یکسانی نمایش داده نمی شوند و هر یک دارای نحوه نمایش پیش فرض و خاصی می باشند که در این مطلب می خواهیم در رابطه با آنها صحبت کنیم. 

 به  طور مثال اگر ما دو تگ div داشته باشیم و به انها ارتفاع 40px بدهیم و فاصله آنها رو 10px  درنظر بگیریم و پس زمینه آنها را خا کستری کنیم یعنی:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div>test</div>
	<div>test</div>
</body>
</html>
 css
div{
	background: #c5c5c5;
	height: 40px;
}

 

 

حالا اگر ما به جای تگ div از تگ span استفاده کنیم یعنی:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<span>test</span>
	<span>test</span>
</body>
</html>
 css
span{
	background: #c5c5c5;
	height: 40px;
}
 

 

می بنید که  برای تگ div  عرض آنها برای مرورگر به طور پیش فرض 100%   میباشد ولی ارتفاع برای تگ span اصلا منظور نشد عرض تگ span فقط به اندازه متن داخل آن فضا گرفت و ارتفاع آن هم به اندازه ارتفاع پیش فرض متن تعیین شده.

تگ های html از لحاظ نحوه نمایش به 4 دسته کلی تقسیم می شوند(البته حالت های جدیدی مانند flex نیز به تازگی اضافه شده اند که در مطالب مجزا توضیح داده خواهند شد).

1. حالت inline

تگ هایی مانند تگ a ، تگ b ، تگ span ، تگ i و .... به طور پیش فرض در این حالت قرار دارند به طوری که عرض و ارتفاع این تگ ها از محتویات آنها تبعیت می کند این تگ ها همواره در مرور گر در یک خط نمایش داده می شوند . این تگ ها از دستورات css همانند text-align و direction و ... تاثیر می گیرند ولی تحت تاثیر دستوراتی همانند height ، width  و ... قرار نمی گیرند فرض کنید کد html زیر را داریم:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<span>test</span>
	<i>test</i>
	<a href="#">test</a>
	<b>test</b>
</body>
</html>
 

نتیجه

 

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

css
body{
	text-align: center;
}
i,a,b,span{
	height: 100px;
	width: 100px;
}

نتیجه

 

میبنید این تگ ها تحت تاثیر width و height  قرار نگرفتند به تگ هایی که دارای این خاصیت می باشند تگ inline  می گویند.

 2. حالت block

تگ هایی مانند div,h1,p,… به طور پیش فرض در حالت block قرار دارند. این تگ ها تحت تاثیر دستوراتی مانند width, height, قرار می گیرند عرض این تگ ها به طور پیش فرض 100% می باشد حتی اگر بوسیله css عرض آنها را کم کنیم مثلا عرض انها را 200px در نظر بگیریم باز مرورگرها آنها را در یک خط نخواهند آورد و بر روی هم چیدمان میشوند کد html زیر را درنظر بگیرید.

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div>Lorem ipsum dolor sit amet, consectetur.</div>
	<p>Lorem ipsum dolor sit amet, consectetur.</p>
	<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
</body>
</html>
 css
div,h1,p{
	background: #c5c5c5;
}

نتیجه

 

 حال به آن دستور زیر را اضافه میکنیم:

css
div,h1,p{
	background: #c5c5c5;
	width: 300px;
}
 

نتیجه

 

می بینیم باز اینکه عرض آنها کم شده باز کنار هم قرار نمی گیرند به این نو ع تگ ها ، block گفته می شود از این نوع تگ ها معمولا برای تعیین ساختار صفحه وب و چیدمان المان ها استفاده می شود.

 3. حالت table

این حالت برای تگ table می باشد این حالت دارای زیر مجموعه های دیگر می باشد که مختص تگ هایی است که در داخل تگ table  مورد استفاده قرار می گیرد مثل تگ tr که برای ردیف جدول  تگ td برای ستونهای جدول موزد استفاده قرار میگیرد مثلا تگ td دارای حالت table-cell میباشد این حالت های جدول وزیر مجموعه های آن را در ادامه مطلب توضیح خواهیم داد.

4. حالت list-item

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

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<ul>
		<li>Lorem ipsum dolor.</li>
		<li>A, recusandae totam?</li>
		<li>Cupiditate, rerum, at.
			<ul>
				<li>Lorem ipsum dolor.</li>
				<li>Odio, eveniet, accusantium!</li>
				<li>In, iure, dolorem?</li>
				<li>Minima, cupiditate, commodi.
					<ul>
						<li>Lorem ipsum dolor.</li>
						<li>Minima, nesciunt cupiditate.</li>
						<li>Exercitationem, quia, laboriosam.</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>Odio, est, animi.</li>
	</ul>
</body>
</html>
 

نتیجه

 حالا فرض کنید ما بخواهیم به تگی که دارای حالت inline می باشد خاصیت block  بدهیم  و یا برعکس یا کلا این خاصیت ها رو تغییر بدهیم یا ترکیب کنیم. در اینجا ما از دستور dispay  استفاده می کنیم این دستور دارای حالت های زیادی می باشد که  از جمله آنها عبارتند از:

1. حالت inline

 این دستور به تگ ها حالت inline می دهد و حالت قبلی آنها را از بین می برد کد html  و css زیر را در نظر بگیرید.

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
</body>
</html>
 css
div{
	background: #c5c5c5;
	margin: 10px;
}
 

نتیجه

حال به آن دستور inline را اضافه می کنیم.

css
div{
	background: #c5c5c5;
	margin: 10px;
	display: inline;
}
 

نتیجه

می بییند که دیگر block نیستند و همگی در یک خط کنار هم ایستاده اند. حالا به آن دستورات زیر را اضافه می کنیم.

css
body{
	text-align: center;
}
div{
	background: #c5c5c5;
	margin: 10px;
	display: inline;
	width: 100px;
	height: 100px;
}
 

نتیجه

میبینیم که عرض و ارتفاع آنها تغییر نکرد و تنها وسط چین شدند.

 2. حالت inline-block

این حالت برای آن زمانی است که بخواهیم یک تگ هم دارای خاصیت inline باشد   و هم خاصیت block ، مثال قبل را در نظر بگیرد ما یک تگ block  را با استفاده از دستور inline در یک خط کنار هم چیدیم ولی دیدیم که دیگر نمی توانیم ارتفاع و عرض آنها را تعیین کنیم حالا اگر به جای دستور inline از دستور inline-block استفاده کنیم این امر محقق خواهد شد یعنی:

css
div{
	background: #c5c5c5;
	margin: 10px;
	display: inline-block;
	width: 100px;
	height: 100px;
}
 

نتیجه

 3. حالت table-cell

می دانیم یکی از خاصیت های خانه های جدول این است که می توانیم تعیین کنیم متن  به طور عمودی از وسط ، از بالا و ازپایین تراز شود. یکی از مربع های  مثال قبل را در نظر بگیرید فرض کنیم میخواهیم کلمه test که از اطراف در وسط قرار دارد نسبت به بالا و پایین نیز در وسط مربع قرار گیرد.

css
div{
	background: #c5c5c5;
	margin: 10px;
	display: table-cell;
	border: 2px solid #fff;
	width: 100px;
	height: 100px;
}
 

نتیجه

حال از خاصیت خانه جدول استفاده کرده ومتن را در وسط قرار می دهیم.

css
div{
	background: #c5c5c5;
	margin: 10px;
	display: table-cell;
	vertical-align: middle;
	border: 2px solid #fff;
	width: 100px;
	height: 100px;
}
 

نتیجه

4. حالت block

 این دستور به تگ ها خاصیت block  می دهد کد html و css زیر را در نظر بگیرید:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<span>test</span>
	<span>test</span>
	<span>test</span>
	<span>test</span>
	<span>test</span>
</body>
</html>
 css
body{
	text-align: center;
}
span{
	background: #c5c5c5;
	margin: 10px;
	width: 100px;
	height: 100px;
}
 

نتیجه

میبینید که کنار هم و در وسط قرار گرفته اند و عرض و ارتفاع هم بر روی انها تاثیری نگذاشته حال اگر آنها را block کنیم.

css
span{
	background: #c5c5c5;
	margin: 10px;
	width: 100px;
	height: 100px;
	display: block;
}
 

نتیجه

5. حالت list-item

این دستور تگ ها را در حالت لیست قرار میدهد مثال قبل را در نظر بگیرید:

css
span{
	margin: 10px;
	display: list-item;
}
 

نتیجه

 6. حالت none

این حالت به مرورگر می گوید که تگ مورد نظر را نمایش ندهد.

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

 

صادق جعفری

صادق جعفری

متخصص طراحی و اجرای انواع قالب وب سایت برای انواع cms (جوملا ، وردپرس و ...)

با بیش از 4 سال سابقه و بیش از 35 پروژه موفق

دیدگاه‌ها

محمد هادی
محمد هادی سه شنبه, 16 شهریور 1395 17:45 پاسخ دادن
هیچ کدوم از تصویرهای مطالب سایتتون لود نمیشن متاسفانه
صادق جعفری
صادق جعفری سه شنبه, 16 شهریور 1395 18:00 پاسخ دادن
ممنون از اطلاع رسانی
به زدوی مشکل برطرف خواهد شد
امید
امید شنبه, 07 مرداد 1396 04:08 پاسخ دادن
سلام
آقا واقعا عالی بود و ممنون
فقط اگه ممکنه راجع به ترکیب position و display هم مثالهایی بزنید ممنون میشیم
امید
امید شنبه, 07 مرداد 1396 04:10 پاسخ دادن
استاد عزیز اگه ممکنه یه کتاب خوب معرفی کنید که اینجور مطالب به صورت منظم و مرتب و دارای مثالهای روان و ساده باشد
امین نوربقایی
امین نوربقایی جمعه, 24 شهریور 1396 15:32 پاسخ دادن
از سایت گیراتون ممنونم.

نوشتن دیدگاه