از ویژگی display
برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.
در CSS دو نوع چارچوب اصلی وجود دارند: inline و block.
inline
اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت. <span>
, <em>
و <img>
مثال هایی از این نوع هستند.
در مثال زیر در جمله اول عناصری که دارای رنگ پس زمینه اند به ترتیب <span>
و <em>
و هستند و همانطور که مشاهده می کنید باعث شکستن خط نشده اند. و همین رفتار در مورد <img>
در وسط جمله دوم دیده می شود:
عناصر inline می توانند margin
و/یا padding
داشته باشند اما نمی توانند width
و height
داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند. در تصویر زیر متن مشخص شده عنصر span
است که از همه جهت padding و margin گرفته است:
واقعیت این است که عناصر inline هم می توانند عرض و ارتفاع بگیرند اما باید از طریق ویژگی display
به نوع inline-block تبدیل شوند.
inline-block هم شبیه به inline است با این تفاوت که مقادیر عرض و ارتفاع اندازه آن را تغییر خواهند داد و همینطور margin و padding آنها بر روی عناصر مجاور آنها در هر دو راستای عمودی و افقی تاثیر خواهد گذاشت.
block
در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند (یعنی در حالت پیشفرض کل فضایی که عنصر نگهدارنده آن داشته باشد را اشغال می کند یا به معنای دیگر عرض بیشینه خواهد داشت). عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.
عناصری مثل <section> , <article> , <div> , <h6>...<h1> , <ul> , <p>
از نوع block هستند. در مثال های بالا قسمت های سیاه رنگ در واقع یک عنصر پاراگراف هستند که عنصرهای داخلی را پوشش داده اند.
با استفاده از ویژگی display
شما می توانید رفتار پیشفرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و بالعکس تبدیل کنید.
علاوه بر block و inline این ویژگی مقادیر دیگری هم می پذیرد که در ادامه شرح داده شده اند:
none
با استفاده از این مقدار می توانید یک عنصر را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد.
نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت.
div {
display: none;
}
inline-block
همانطور که گفته شد رفتار عنصر را شبیه به رفتار inline می کند با این تفاوت که می توانید به عنصر عرض و ارتفاع بدهید.
در ساخت منوی زیر از این مقدار برای کنار هم قرار دادن عناصر استفاده شده است:
See the Pen display by Mojtaba Seyedi (@seyedi) on CodePen.
list-item
باعث می شود تا رفتار عنصر شبیه به رفتار آیتم های یک لیست بشود. معادل آن در HTML عنصر <li>
می باشد.
run-in
این مقدار وابسته به نوع عناصر داخل آن و بعد از آن رفتار متفاوت از خود نشان می دهد. همچنین در مرورگرهای اصلی به درستی بطور کامل پشتیبانی نمی شود ( به پایین صفحه مراجعه کنید).
- اگر عنصری از نوع run-in دارای فرزندی از نوع block باشد عنصر run-in شبیه به block رفتار می کند.
- اگر یک عنصر block دقیقا بعد از عنصری از نوع run-in بیاید. عنصر run-in رفتار inline از خود نشان می دهد و کنار عنصر block در یک خط قرار می گیرد.
- اگر یک عنصر inline دقیقا بعد از عنصری از نوع run-in بیاید, عنصر run-in رفتار block به خود خواهد گرفت.
table
با استفاده از مقادیر زیر می توان جدول و عناصر آن را در CSS شبیه سازی کرد.
بیشتر مقادیر لیست شده در زیر معادل تگ های مربوط به جدول در HTML عمل می کنند:
- table:
<table>
- table-row-group:
<tbody>
- table-column:
<col>
- table-column-group:
<colgroup>
- table-header-group:
<thead>
- table-footer-group:
<tfoot>
- table-row:
<tr>
- table-cell:
<td>
- table-caption:
<caption>
- inline-table: این مقدار معادل HTML ندارد. کار آن دقیقا شبیه به مقدار table است با این تفاوت که به جدول رفتار inline می دهد.
دموی زیر یک تکنیک را برای تراز کردن عناصر با استفاده از رفتارهای جدول و عناصر آن نشان می دهد:
See the Pen display by Mojtaba Seyedi (@seyedi) on CodePen.
flex
رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.
inline-flex
رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.
grid
رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.
inline-grid
رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.
ارتباطات بین ویژگی های display و position و float
- اگر
display
مقدارnone
داشته باشد عنصر چارچوپی نخواهد داشت و ویژگی هایfloat
وposition
بر روی عنصر تاثیری نخواهند گذاشت. - در غیر این صورت اگر
position
مقدارabsolute
و یاfixed
داشته باشد ویژگیfloat
تاثیری بر روی عنصر نخواهد گذاشت و برابرnone
خواهد بود و مقدارdisplay
بر اساس جدول زیر محاسبه می شود. - در غیر این صورت اگر
float
مقداری غیر ازnone
داشته باشد عنصر رفتار float خواهد داشت و مقدارdisplay
بر اساس جدول زیر محاسبه می شود. - در غیر اگر عنصر مورد نظر عنصر ریشه (
<html>
) باشد ویژگیdisplay
بر اساس جدول زیر محاسبه می شود. - اگر هیچ کدام از شرایط بالا را نداشته باشیم. مقدار
display
همانی خواهد بود که تعیین می کنید.
مقداری که شما تعیین می کنید | مقداری که مرورگر جایگزین آن می کند |
---|---|
inline-table | table |
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block |
block |
مقادیر دیگر | برار با مقداری که تعیین شده است |
پشتیبانی مرورگر ها
ویژگی display
در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر و همچنین اندروید و iOS پشتیبانی می شود.
مقدار run-in
فقط در مرورگرهای اپرا و سافاری و اینترنت اکسپلورر 8 به بالا پشتیبانی می شود. و همچنین تا نسخه 32 کروم پشتیبانی می شد اما از آن به بعد کروم این ویژگی را پشتیبانی نمی کند.
در جداول زیر پشتیبانی مرورگرها در مورد flex و grid نمایش داده شده است:
مرسیتونیم با مطالبه مفیدتون
ممنونم بابت توضیحات عالییتون
متشکر.
اموزش بسیار خوب و کاملی بود
ممنونم
عالیییییییییییییی
love you
مثل همیشه عالی
درسایی که با بازی کردن یاد میگیریم خیلی عالین! هر قسمتی که احساس میکنید امکانش هست با بازی آموزش بدید.
بازم ممنون!
واقعا دمت گرم خدا تو رو برامون نگه داره
واقعا ممنون ازتونم
با سلام و تشکر از شما بابت این مبحث آموزشی
فقط اینکه مبحث ِ “ارتباطات بین ویژگی های display و position و float” گویا نبود، شروط درست نوشته نشده بودند، نمیشد درست تفکیک کردش از هم. همینطور جدول زیرش.
میشد حالت های مختلف رو بهتر نمایش داد و از “در غیر اینصورت” استفاده نکرد.
سلام،
اگر توی فایل pdf یا html نشون بدید خروجی مطلوبتون رو می تونیم اون رو جایگزین بالا کنیم.
درود، بینهایت ممنون.
ارتباطات بین ویژگی های display و position و float یکم مبهمه، نمیشه کامل متوجه شد.
سلام. نرم افزار آفلاینی هست که مانند codepen خروجی کد رو بصورت لحظه ای نشون بده؟
سلام، این آفلاین کار میکنه
https://codepan.net
جالب بود واقعا فکر نمی کردم display:none باعث پنهان کردن عنصر از دید رباتها بشه با این حساب الان میفهمم که چرا بوت استرپ کلاس sr-only یش ماجراش فرق میکنه! ممنون :)
سلام لطفا ابزاز بازی با کد های display و posistion رو در سایت معرفی کنید ؟ مانند ابزاری که برای بازی با flex معرفی کردید
https://css-tricks.ir/?p=3699
سلام خواهش میکنم کمکم کنید من یه سوال دارم در رابطه با عناصر اینلاین،
راستش گفتین که عناصر اینلاین نمیتونه margin , padding , border , width , height بگیره مگر اینکه display اون رو تغییر بدیم!
ولی من وقتی یک عکس میزارم تو صفحه بین یک پاراگراف ، اولا که هم در حالت عکودی روی پاراگراف ها تاثیر میزاره و اونارو هول میده و هم در حالت افقی ، و دما این که هم میتونم بهش margin , padding , border , width , height بدم با اینکه display رو گزاشتم رو حالت اینلاین
سلام، اول که تحریف نکنید :) من حرفی از border نزدم. دوما که من نگفتم نمیتونن padding و margin بگیرند، نکته ای دیگه رو در موردشون گفتم که میتونید بخونید.
سوما اینکه حرفتون در مورد img درسته که من اینجا چون کمی پیجیده بود نیاوردم این قضیه رو. عنصر img از نوع عناصر خطی است اما همچنین از نوع عناصر Replaced است که استثنا هستش. این نوع عناصر تحت تاثیر محتوایی داخلشون میاد قرار میگیرند. مثلا عنصر تصویر با اینکه خطی هستش نباید ابعاد بگیره که در نتیجه نباید از سمت عمودی بشه بهش مارجین داد اما چون محتواش (یعنی همون عکس) میاد جاش میشینه، اون عکس نسبت و ابعاد ذاتی خودش را بر عنصر img تحمیل میکنه که باعث میشه رفتار img متفاوت باشه.
در کل بهتره اکثر مواقع display این عنصر به block تبدیل کنیم که کنترل بهتری روش داشته باشیم.
ممنونم دوست عزیز :) ♥️
سخت بود ، نفهمیدم
دوره صفحه آرایی شاید بتونه بهتر مفهوم رو برسونه.
سلام متوجه نشدم
“عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.”
میشه اینو ساده تر بگید یعنی چی
سلام ، یعنی یه عنصر بلاک میتونه نگهدارنده عناصر بلاک و اینلاین باشه ولی عنصر اینلاین این قابلیت رو نداره
با عرض ادب و احترام
آقای سیدی مقالات شما محشره
ممنون.
سلام وقت بخیر
خیلی ممنونم بابت مقاله ی کاربردی و درجه یکتون .
خیلی ممنونتون میشم به سوالم جواب بدید ؛
همینطور که گفتید ” عناصری که display: none; داشته باشن برای ربات ها قابل خوندن نیستن .”
حالا اگه اگه تو حالت hover تعریف کنیم display:none باز هم توسط رباط ها خونده میشن یا نه ؟؟!
یا برعکس ؛ حالت اصلی تگ display:none باشه ولی حالت هاورش نمایش داده بشه چطور ؟؟!
با سلام
اگر ممکنه منو راهنمایی کنید که کدام قسمت از کد زیر را تغییر بدم تا دکمه دانلود با نوشته کنار آن در یک خط قرار بگیرد ، البته من تخصصم شیمی هستش ولی یه مقدار وقت روی این استایل گذاشتم و البته موفق نشدم .
این آدرس سایت و شکل قالب دانلود : http://www.kanoonshimigorgan.com/%d8%a2%d8%b2%d9%85%d9%88%d9%86-%d9%87%d8%a7%db%8c-%d8%a2%d8%b2%d9%85%d8%a7%db%8c%d8%b4%db%8c-%d9%82%d9%84%d9%85-%da%86%db%8c
سلام، بلاک زیر رو به این صورت داشته باشید:
عااالی بود. واقعا سایت مفیدی دارید.
عالی و کامل
از مطالب استفاده کردم عالی بود