سوال: تفاوت بین display و float در این شبه کد چیه؟؟ در طراحی منوها از کدومشون استفاده کنیم بهتره؟ [بایگانی]

davood59

پنج شنبه 14 اسفند 1393, 09:45 صبح

سلام دوستان:
این کد CSS رو ببینید:
*{
margin:0;
padding:0;
}
body{
background-color:#fff;
}
p{
background-color:#CC0033;
display:inline;
}
h1{
background-color:yellow;
display:inline;
}

نتیجه حاصل:

129128

و این کد CSS بعدی رو که فقط در تگ P ما بجای display:inline از float:left استفاده کردیم؛ یعنی تگ P اینجوری شد:

p{
background-color:#FF3333;
float:left;
}
و نتیجه حاصل از اجرای این کد:

129127
و اینهم کد HTML :

<body>
<p>This is a Paragraph </p>
<h1>I'm a Header</h1>
</body>

الف) یه سوال برام پیش اومده: تقریبا الان تو اینجا float هم نتیجه ش با display یکی هستش، میخواستم ببینم از کدومش استفاده کنیم بهتره؟؟

ب) بخصوص وقت طراحی منوها که با رفتن ماوس روی هر Item قراره hover بخوره، استفاده از float بهتره یا display؟؟ من خودم احساس می کنم اگه از display استفاده کنم ممکنه هر بار که ماوس بره روی آیتم مورد نظر ممکنه آیتم یه خورده آیتمهای قبل و بعدش رو تحت تاثیر قرار میده و ظاهرش بد میشه؛ درست دارم فکر می کنم؟ شما برای طراحی منوهاتون از کدوم حالت استفاده می کنین که نمیخواین اسکرول بخوره در هنگام hover شدن؟؟

بهزاد علی محمدزاده

پنج شنبه 14 اسفند 1393, 11:01 صبح

اینها همه بستگی به نوع استفاده داره. فرضا در طراحی منو اگر از inline-block استفاده کنی . یه Gap (http://jsfiddle.net/behzadam/0b7ekuab/) یا فضای خالی بین المان های لیست بوجود میاد که باید اون رو هم برطرف کنی . اما اگر از display:block; float:left; استفاده کنی اون گپ وجود نداره و پشتیبانی خوبی هم از این تکنیک در انواع مرورگر ها میشه.

تفاوتی هم که در کدهای خودت هست یعنی بین float و inline اینه که شما با استفاده از inline , خاصیت block بودن رو از اون عنصر میگیری !. و این یعنی برخی دستورات قابل اعمال روی اون المنت نیستند. فرضا نمی تونی براش width تعیین کنی. و همچنین margin-top , margin-bottom هم کار نمی کنه.

پس تفاوت هست بین این دو روش و در ظاهر نتیجه یکسان بوده. معمولا از float استفاده میشه تا خاصیت block-level بودن عنصر حفظ بشه. ( پاسخ سوال منو هم در همین تاپیک گفتم . )

این مقاله تمامی شیوه های موجود برای در مرکز قراردادن یک box (http://front-end.ir/ui/how-to-center-a-box-with-css/)رو هم به مطالعاتت اضافه کن (اگر از قبل آشنا نیستی) .این مقاله دیدگاهی رو هم بهت میده که برای انجام کارها شیوه های مختلفی ممکنه وجود داشته باشه.