031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » css » محل قرار گیری عناصر ،خواص float و clear

محل قرار گیری عناصر ،خواص float و clear

۱۷ام آذر ۱۳۹۷
مرضیه ناجی
0
11

محل قرار گیری عناصر ،خواص float و clear

در مقاله امروز قصد بیان سه Property کاربردی در css  را دارم . برای آشنایی کامل با Property های position،float،clear تا انتهای مطلب با تیم طراحی سایت اصفهان همراه باشید.

خاصیت position

خاصیت position  برای تعیین موقعیت عناصر در یک صفحه تعیین می شود . هم چنین با استفاده از این ویژگی می توانید عناصر را در صفحه وب پشت سر هم قرار دهید .

ویژگی position دارای 4 مقدار اصلی می باشد که هر کدام دارای کاربرد مخصوص به خود است.در ادامه به بررسی چهار مقداری که ویژگی position دارد ، می پردازم.

  • static

تمام عناصر html به طور پیش فرض دارای مقدار استاتیک هستند به عبارتی نوشتن و یا ننوشتن مقدار static در هنگام کد نویسی تاثیری نخواهد داشت و عناصر در همان محلی که هستند نمایش داده می شوند.عناصری که از ویژگی static استفاده می کنند از ویژگی های top,right,bottom,left تبعیت نمی کنند.

  • Fixed

عناصری که مقدار position آن ها fixed می باشد حتی در صورت scrool خوردن صفحه و یا تغییر اندازه پنجره مرورگر در موقعیت خود قرار خواهند گرفت و موقعیت آن ها نسبت به قبل هیچ تغییری نخواهد کرد.

  • Relative

عناصری که به صورت  relative مقدار دهی می شوند نسبت به موقعیت فعلی خود موقعیت دهی می شوند به عبارتی می تواند نسبت به محل قرار گیری طبیعی خود تغییر مکان دهد.

  • Absolute

موقعیت دهی عناصر به صورت Absolute مشخص می کند که عنصر مشخص شده در محل تعیین شده نشان داده شود نه محلی که کد مربوط به آن نوشته شده است . مقدار Absolute دارای خاصیت ارث بری می باشد.

  • Overlapping elements

خاصیت z-index ترتیب قرار گیری عناصر را مشخص می کند .به عبارتی کدام عنصر باید جلو یا پشت عنصر دیگر قرار گیرد.دقت کنید که خصوصیت z-index فقط در مواقعی کار می کند که عنصر با استفاده از خصوصیت position مکان دهی شده باشد.شکل زیر به فهم شما از متن فوق کمک می کند.

 

 

خاصیت position

خاصیت float

Float  در لغت به معنای شناور بودن می باشد. یکی از پرکاربردترین Property در طراحی سایت ویژگی float می باشد. با استفاده از این خاصیت می توانید موقعیت عناصر را به سمت راست یا چپ تنظیم کنید. با این روش می توان به قرار گیری عناصر در کنار یک دیگر کمک کرد. خاصیت float دارای دو مقدار می باشد.

  • Right

عنصر شناور به سمت راست است

  • Left

عنصر شناور به سمت چپ می باشد

 

خاصیت clear

ویژگی clear به طور مستقیم با ویژگی float کار می کند .کار این عنصر پاک سازی اطراف عنصر شناور به منظور جلوگیری از سقوط سایر عناصر به پایین عنصر شناور می باشد.

خاصیت  clear از والد خود تبعیت نمی کند به عبارتی دارای ارث بری نیست .

ویژگی clear دارای مقدار both  می باشد به این معنا که هیچ عنصر در سمت راست و چپ عنصر شناور قرار نداشته باشند. دو مقدار دیگری که ویژگی clear  دارا می باشد clear:right به معنی پاکسازی سمت راست عنصر شناور و clear:left به معنای پاکسازی سمت چپ عنصر شناور می باشد. clear:none  یکی دیگر از مقادیر پیش فرض این خاصیت می باشد که تمام عناصر به طور پیش فرض دارای clear:none هستند.

در مقاله آموزشی فوق تیم طراحی سایت اصفهان شما عزیزان را با سه خاصیت بسیار مهم در طراحی سایت که اهمیت بالای یادگیری آن ها غیر قابل انکار است، آشنا کردند. برای آشنایی با خواص پرکاربرد دیگر در css3 می توانید از مطالب مفید منتشر شده در سایت استفاده مفید داشته باشید .

محل قرار گیری عناصر ،خواص float و clear
5 (100%) 1 vote
درباره نویسنده :
مرضیه ناجی

مطالب مرتبط

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما کاملا واضح در میان بگذارید

برای گفتگو کلید ENTER را بفشارید