ویژگی نمایشگرها در CSS

ویژگی نمایشگرها در CSS نحوه ارائه عناصر HTML در صفحات وب را کنترل می کند.

عناصر درون خطی و بلوک

عناصر HTML به دو دسته عمده تقسیم می شوند: عناصر بلوک مانند و درون خطی.

عناصر بلوک مانند (<div> و <p> و <h1> و غیره) همیشه تا حد امکان به طرفین کشیده شده و از یک خط جدید شروع می شوند.

عناصر درون خطی (<span> و <img> و <a> و غیره) فقط فضای لازم را می گیرند. آن ها نیازی به شروع یک خط جدید ندارند.

استفاده از ویژگی نمایشگرها در CSS

با استفاده از ویژگی CSS display ، می توانید دستی تعیین کنید که این عنصر چه نوع ظرفی را باید استفاده کند:

p.inline {       
  display: inline;   /*makes the <p> element, which is a block level element by default, display as an inline element if the "inline" class is assigned to it.*/
}

نحو نسبتاً شهودی است:

نمایش: مقدار؛

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

ارزش های املاک

Description	Value
عنصر نمایش داده نمی شود	none
این عنصر در همان خط می ماند و فقط عرض محتوای آن را اشغال می کند	inline
این عنصر از یک خط جدید شروع می شود و کل عرض موجود را اشغال می کند	block
عنصر به عنوان یک عنصر درون خطی نمایش داده می شود اما می تواند به عنوان یک عنصر سطح بلوک مدل شود	inline-block
عنصر به عنوان عنصر نوع جدول نمایش داده می شود	table
این عنصر به عنوان یک عنصر فلکس سطح بلوک نمایش داده می شود	flex
عنصر به عنوان یک عنصر انعطاف پذیر درون خطی نمایش داده می شود	inline-flex
عنصر به عنوان یک عنصر جدول درون خطی نمایش داده می شود	inline-table
عنصر به عنوان اولین فرزند درون خطی یک عنصر بلوک نمایش داده می شود	run-in

درون خطی

در اینجا چند ویژگی از عناصر تنظیم شده برای نمایش وجود دارد: inline:

• عناصر فقط فضای لازم را می گیرند.
• آنها همچنین در همان خط در کنار یکدیگر ظاهر می شوند.
• یک عیب این است که شما نمی توانید ویژگی های ارتفاع و عرض عناصر درون را کنترل کنید.
• صفحه نمایش: به صورت خطی تنظیمات padding و margin را نادیده می گیرد.
• فقط می تواند عناصر درون خطی داشته باشد.

این مثال نشان می دهد که چگونه چندین عنصر <span> در یک خط ظاهر می شوند:

<span style="background-color: red;">I am one element.</span>
<span style="background-color: blue;">I am the second element.</span>
<span style="background-color: green;">I am the third element.</span>
<span>We are all in the same line!</span>

همچنین می توان با تنظیم صفحه نمایش: inline ، عناصر بلوک را در یک خط نشان داد. این مثال تنظیمات پیش فرض <li> نقاط گلوله را لغو می کند و آنها را در یک خط نشان می دهد:

li {
    display: inline;
}

همان قسمت اصلی تنظیمات پیش فرض برای این عنصر <span> اتفاق می افتد:

span {
   display: block;
}

مسدود کردن

در اینجا مشخصات عناصر بلوک وجود دارد:

• عناصر بیشترین عرض ممکن را می گیرند.
• هر عنصر بلوک در یک خط جدید ظاهر می شود.
• عناصر به خصوصیات عرض و ارتفاع واکنش نشان می دهند.
• عناصر می توانند شامل عناصر درون خطی و بلوک باشند.

<div style="background-color: red;">I am one element.</div>
<div style="background-color: blue;">I am the second element.</div>
<div style="background-color: green;">I am the third element.</div>
<div>We are all in separate lines!</span>

درون بلوکی

نمایشگر CSS: inline-block ترکیبی از ویژگی های درون خطی و سطح بلوک است. تفاوت اصلی این است که بلوک درون خطی به خصوصیات عرض و ارتفاع پاسخ می دهد.

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
  color: white;
  padding: 6px;
  margin: 3px;
}

این ویژگی باعث می شود صفحه نمایش CSS: بلوک درون خطی برای ایجاد طرح بندی مناسب تر باشد. یکی از محبوب ترین روش های استفاده از عناصر درون خطی ، ایجاد منوهای ناوبری افقی است.

در اینجا نمونه دیگری از استفاده از صفحه نمایش وجود دارد: inline-block:

.float-box {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 5px solid black; 
}

پنهان کردن عناصر

در استفاده از قابلیت مشاهده: پنهان و نمایشگر: هیچ تفاوتی وجود دارد. در مثال زیر ، عنصری را با نمایشگر پنهان می کنیم: هیچ.

div {
background-color: red;
color: white;
display: inline;
padding: 6px;
margin: 5px;
}
.hid {
display: none;
}

مجموعه <div> برای نمایش: هیچ یک از صفحه به طور کامل از بین نمی رود. <div> بعدی جای خود را پر می کند و جای خالی باقی نمی گذارد.

این تفاوت اصلی در نمایشگر است: هیچکدام در مقابل دید: پنهان. ویژگی visibility این عنصر را نگه می دارد اما آن را نامرئی می کند:

div {
background-color: red;
color: white;
display: inline;
padding: 6px;
margin: 5px;
}
.hid {
visibility: hidden;
}

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.