آشنایی با خصوصیت display در CSS

علیرضا حاتمی نیا 8295
 

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

در این جلسه با خصوصیت 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;}

آموزش خصوصیت display و مقدار block

 

نکته: بعضی از عناصر مانند <img> دارای مقدار inline به صورت پیش فرض هستند که با تعریف مقدار block برای display آن ها تغییر وضعیت در نمایش می دهند.

مقدار inline

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

در مثال بالا به ترتیب مقادیر خصوصیت display را برای عناصر برابر  inlineقرار می دهیم.

Display:inline;

 

آموزش خصوصیت display و مقدار inline

آموزش خصوصیت display در css

خصوصیت inline برای display

نکته:عناصری که مقدار display آن ها برابر inline می شود نمی توانند طول و عرض width و height بگیرند و تعریف مقدار طول و عرض برای آنها تاثیری نخواهد داشت. همچنین مقدار margin وpadding  فقط برای چپ و راست آنها تاثیر دارند و برای عناصر بالا و پایین ها بی تاثیر است.

مقدار inline-block

این مقدار دقیقا شبیه مقدار inline است با این تفاوت که تعریف مقدار برای طول و عرض (width,height) و همچنینmargin  و padding در تمام جهت ها روی آن تاثیر دارد.

مقدار none

مقدار none باعث عدم نمایش یک عنصر و تمامی فرزندان آن عنصر در صفحه می شود.

display:none;   

خصوصیت display مقادیر دیگری نیز دارد که این مقادیر یا زیاد مهم نیستند و یا کمتر استفاده میشودکهدرآیندهتوضیحات بیشتری برای این مقادیر خواهیم آورد.

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت