آشنایی با خصوصیت display در CSS
Your browser doesn't support video.
Please download the file: video/mp4
با سلام خدمت شما همراهان گرامی و علاقه مندان به مباحث آموزش برنامه نویسی. من علیرضا حاتمی نیا هستم با آموزشی دیگر از سری آموزش های طراحی وب در خدمت شما هستم.
در این جلسه با خصوصیت display در CSS آشنا میشویم تا از این پس آموزش ها در مسیر پروژه محور قرار بگیرند.
خصوصیت display در CSS
معنی واژه display در انگلیسی "نمایش دادن یا نمایش" است و خصویت display در CSS برای نحوه نمایش یک عنصر در صفحه به کار می رود.
هر عنصر در صفحه (تصاویر، پاراگراف ها ، div ها و ....) یک مستطیل در صفحه وب را در نظر می گیرد و نوع چهارچوب آن عنصر تعیین کننده رفتار آن عنصر در صفحه می باشد.
خصوصیت display در CSS مقادیر زیادی دریافت می کند که در ادامه با مهمترین و اصلی ترین آن ها آشنا می شویم.
مقدار block
عناصری مانند div و p در صفحه دارای چهار چوب پیش فرض block هستند. یعنی اگر شما یک پاراگراف در صفحه ایجاد کنید و متنی را در آن بنویسید، پاراگراف کل صفحه را اشغال می کند و پاراگراف ها و یا عناصر بعدی از خط بعدی نمایش داده می شوند.
مثال:
HTML
<div class="div1">
Div1
</div>
<div class="div2">
Div2
</div>
<div class="div3">
Div3
</div>
css
.div1 {border: 2px solid red;}
.div2 {border: 2px solid black;}
.div3 {border: 2px solid blue;}
نکته: بعضی از عناصر مانند <img> دارای مقدار inline به صورت پیش فرض هستند که با تعریف مقدار block برای display آن ها تغییر وضعیت در نمایش می دهند.
مقدار inline
اگر مقدار display یک عنصر را برایر inline قرار دهید چهار چوب و فضای اشغالی آن عنصر در صفحه به اندازه محتوای درون آن خواهد بود. عنصر بعد از آن هم اگر مقدار inline را دریافت کند خط شکسته نمی شود و درست بعد از همان عنصر در صفحه نمایش داده می شود.
در مثال بالا به ترتیب مقادیر خصوصیت display را برای عناصر برابر inlineقرار می دهیم.
Display:inline;
نکته:عناصری که مقدار display آن ها برابر inline می شود نمی توانند طول و عرض width و height بگیرند و تعریف مقدار طول و عرض برای آنها تاثیری نخواهد داشت. همچنین مقدار margin وpadding فقط برای چپ و راست آنها تاثیر دارند و برای عناصر بالا و پایین ها بی تاثیر است.
مقدار inline-block
این مقدار دقیقا شبیه مقدار inline است با این تفاوت که تعریف مقدار برای طول و عرض (width,height) و همچنینmargin و padding در تمام جهت ها روی آن تاثیر دارد.
مقدار none
مقدار none باعث عدم نمایش یک عنصر و تمامی فرزندان آن عنصر در صفحه می شود.
display:none;
خصوصیت display مقادیر دیگری نیز دارد که این مقادیر یا زیاد مهم نیستند و یا کمتر استفاده میشودکهدرآیندهتوضیحات بیشتری برای این مقادیر خواهیم آورد.
نظرات کاربران