parniann 110 اشتراک گذاری ارسال شده در 10 آبان، ۱۳۹۱ float در CSS چیست؟ float چطور box model را تحت تأثیر قرار می‌دهد؟ چه خصوصیاتی بر روی عناصر float شده تأثیر می‌گذارد؟ خصوصیت clear چه تأثیری بر روی float می‌گذارد؟ و… همه مواردی هستند که در این مطلب بررسی می‌کنیم. درک float در ابتدا برای طراحان و برنامه نویسان کمی مشکل به نظر می رسد در صورتی که یادگیری رفتار این خصوصیت بسیار آسان است و می‌توان با یادگیری آن مواردی را که به نظر پیچیده به نظر می‌رسند به آسانی پیاده‌سازی نمود. حتی اگر فکر می کنید که تمام چیزها را در مورد float می‌دانید باز هم با ما همراه باشید چون امکان دارد که چیزی جدید یاد بگیرید. [h=3]float چیست؟[/h] تعدادی عناصر در CSS به صورت Block Level هستند یعنی به صورت اتوماتیک از خط جدیدی نمایش داده می‌شوند. برای مثال دو پاراگراف پشت سر هم نمایش داده نمی شوند بلکه هر یک در خط جدیدی نمایش داده می‌شوند. نوع دیگری از نمایش عناصر به نام inline وجود دارد که به صورت درون خطی نمایش داده می‌شود به عنوان مثال تگ a به صورت inline است و برای نمایش هیچ خط و فاصله اضافه‌ای را طلب نمی‌کنند. تنها راه برای فریب دادن این مدل ها استفاده از float است که یک عنصر را مجبور می کند به یکی از گوشه های والد خود بچسبد (یا شناور شود) و عناصر دیگر به توجه به خصوصیات خودشان به آن بچسبند (یا چیده می‌شوند). یک عنصر چسبیده با مقدار float راست به سمت راست چسبیده و عناصر دیگر در سمت چپ عنصر قرار می‌گیرند و بلعکس یک عنصر با مقدار float چپ به سمت چپ می‌چسبد و عناصر دیگر در سمت راست عنصر قرار می‌گیرند. مثالی کلاسیک از استفاده از float را می‌توان زمانی دانست که می خواهیم یک پاراگراف متن و تصویر را در کنار هم نمایش دهیم نه به صورت پشت سر هم. برای این مثال کد زیر را می نویسم. [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] لورم ایپسوم متنی است که ... [/TD] [/TR] [/TABLE] این کدها جلوه مورد نیاز ما را حاصل نمی شوند به طوری که تگ پاراگراف در خط خودش نمایش داده می شود و به همین خاطر تصویر و پاراگراف پشت سر هم به صورت پشته ای نمایش داده می‌شوند. برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام می‌توان این رفتار را به آسانی بوسیله کد CSS زیر تغییر داد. [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]img{ [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] float: left; [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] margin: 0 20px 20px 0; [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]} [/TD] [/TR] [/TABLE] این کد CSS تصویر را به سمت چپ می چسباند و پاراگراف در سمت راست آن قرار می‌گیرد. تصویر زیر نحوه نمایش این کد را نمایش می دهد. نکته جالب در مورد این نوع استایل این است که عناصر دیگر اندازه خود را به مقدار فضای خالی وفق می‌دهند یعنی اگر اندازه تصویر را کوچکتر یا بزرگتر کنید پاراگراف به اندازه فضای خالی موجود اندازه خود را تغییر می‌دهد. [h=3]بررسی عمیق‌تر این مدل نمایش[/h] درک کلی نحوه عملکرد float بسیار آسان است ولی float زمانی پیچیده می‌شود که در کنار عناصر دیگری از آن استفاده می‌شود برای این مواقع باید اطلاعاتی در مورد نحوه عملکرد دیگر عناصر در کنار یک عنصر float شده داشته باشید. یکی از این موارد زمانی است که می خواهید در مثال قبلی بین تصویر و پاراگراف مقداری فضای خالی نمایش دهید. شما فکر می‌کنید که اینکار بوسیله کد CSS زیر امکان پذیر است. [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]p {margin: 20px;} [/TD] [/TR] [/TABLE] در صورتی که این کد حتی یک پیکسل هم فضای خالی ایجاد نمی‌کند و می‌بایست از کد زیر استفاده کنید. [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]img {margin: 20px;} [/TD] [/TR] [/TABLE] برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام سوالی که ممکن از خودتان بپرسید این است که «چرا؟» چرا مارجین بر روی پاراگراف عمل نمی‌کند اما بر روی تصویر عمل می‌کند؟ دلیل این است که شما در مورد Box Model پاراگراف در حال اشتباه هستید. اگر می‌خواهید درک عمیقی از این مورد پیدا کنید می‌توانید یک خط دور برای پاراگراف قرار دهید. [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]p { border: 1px solid black;} [/TD] [/TR] [/TABLE] برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام همانطور که می‌بینید تصویر در درون جعبه پاراگراف قرار دارد. هر حاشیه‌ای که به سمت چپ پاراگراف نسبت داده شده باشد توسط تصویر خنثی می‌شود. اگر می‌خواهید از قرار گرفتن و شکسته شدن پاراگراف در کنار تصویر جلوگیری کنید می‌بایست برای پاراگراف عرض نسبت دهید. عرض پاراگراف به صورت پیش فرض ۱۰۰٪ است و بدین صورت تصویر در درون جعبه پاراگراف قرار می‌گیرد اما با نسبت دادن عرض کمتری از جعبه والد پاراگراف می‌توان تصویر را از درون جعبه پاراگراف خارج کرد. [TABLE] [TR] [TD=class: content] [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]p{ [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] border: 1px solid black; [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] width: 250px; [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]} [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]img{ [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content] float: left; [/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: content]} [/TD] [/TR] [/TABLE] برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام 1 نقل قول لینک به دیدگاه
ارسال های توصیه شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .