جلسه ۳۹: استفاده از عناصر شناور در CSS

در این درس ، ما یاد خواهیم گرفت که چگونه از عناصر شناور در CSS
استفاده کنیم. شروع کنیم! موارد زیر را بیان خواهیم کرد
- لیست ۱۰-۱۲: استفاده از عناصر شناور
- لیست ۱۰-۱۳: اندازه جعبه صریح
- لیست ۱۰-۱۴: آشفتگی شناور
- لیست ۱۰-۱۵: جعبه های شناور
مرورگر عناصر یک صفحه HTML
را با یک طرح روان ارائه می دهد. این بدان معنی است که عناصر درون خطی را از چپ به راست قرار می دهد و در صورت لزوم یک خط جدید را شروع می کند. عناصر بلوک از بالای پنجره به پایین ارائه می شوند. این ویژگی را می توانید با ویژگی float
تغییر دهید. تنظیم مقدار آن به چپ یا راست ، عنصر بلوک مربوطه را به سمت چپ یا راست حرکت می دهد و محتوای بعدی به دور عنصر شناور می پیچد. لیست ۱۰-۱۲ یک صفحه وب ساده را نشان می دهد که شامل عناصر شناور نیست ، در تصویر زیر نمایش داده می شود.
لیست ۱۰-۱۲: استفاده از عناصر شناور
این صفحه شامل سه عنصر بلوک (<div> ، <aside> و <p>) است و توسط الگوریتم استاندارد ارائه آنها از بالا به پایین قرار می گیرند ، هر عنصر بلوک از سمت چپ شروع می شود. حال ، اگر خصوصیات شناور را در لیست کد از حالت کامنت خارج کنید ، طرح صفحه تغییر می کند. اولین جعبه خالی (<div>) به سمت راست حرکت می کند ، نوار کناری “آیا می دانید” (سمت دیگر) به سمت چپ حرکت می کند ، و پاراگراف "Lorem ipsum"
مانند آنها در زیر نشان داده شده است:
توجه: می توانید شناور را با تنظیم ویژگی float
روی none
خاموش کنید. هنگامی که چندین عنصر شناور هستند ، موتور رندر با قرار دادن عناصر HTML
به ترتیب در مارک ، عرض پنجره مرورگر را پر می کند. وقتی جایی برای عنصر بعدی نباشد ، یک خط جدید شروع می شود. به فهرست ۱۰-۱۳ نگاهی بیندازید ، این شامل شش عنصر شناور است ، سه عنصر به سمت چپ و سه عنصر به سمت راست منتقل شده اند.
لیست ۱۰-۱۳: اندازه جعبه explicit
تصویر زیر سه عکس snapshot
مختلف از صفحه را نشان می دهد در حالی که کاربر پنجره مرورگر را تغییر اندازه می دهد. سعی کنید ردیابی کنید که موتور رندر چگونه هر یک از این عکسهای snapshot
را نمایش می دهد!
توجه: عناصر درون خطی نمی توانند شناور شوند.
بعضی اوقات ، شما به کنترل بیشتری در مورد نحوه قرارگیری عناصر شناور با سایر مطالب نیاز دارید. اگرچه محتوای عناصر غیر شناور در اطراف عناصر شناور ، حاشیه ها و رنگ پس زمینه قرار ندارد. آنها از عرض کامل عنصر حاوی آن استفاده می کنند. به عنوان مثال ، اگر عنصری <h1>
را به لیست ۱۰-۱۲ اضافه کنید ، درست قبل از برچسب <p>
، ممکن است مانند شکل زیر نمایش داده شود:
این رفتاری نیست که انتظار دارید ، زیرا شما به مرز پشت عناصر شناور نیازی ندارید. ویژگی overflow
برای کمک به شماست: آن را روی برچسب عنوان که نشان دهنده "Borders"
است ، روی hidden
تنظیم کنید و دقیقاً همان چیزی را می اتفاق می افتد که می خواهید ، همانطور که در زیر نشان داده شده است:
اگرچه پیچیدن به اطراف عناصر شناور از ویژگی های مفید مرورگر است ، اما شرایطی پیش می آید که بخواهید از آن برای عناصر خاص خلاص شوید. لیست ۱۰-۱۴ چنین وضعیتی را نشان می دهد.
لیست ۱۰-۱۴: ظروف شناور
بخش <body>
شامل دو قسمت محتوا است که هر قسمت از <div>
با پاراگراف بعدی تشکیل شده است. برچسب <div>
یک تصویر را نشان می دهد ، برچسب <p>
شامل برخی متن های مربوط به تصویر کوچک است. برچسب ها <div>
به گونه ای تنظیم می شوند که به سمت چپ شناور باشند تا متن توضیح در سمت راست تصویر کوچک ظاهر شود. با این حال ، آنچه در این صفحه نمایش داده می شود ، همانطور که در زیر نشان داده شده است ، در واقع آنچه انتظار دارید نیست. از آنجا که بسته بندی متن در اطراف تصویر کوچک اول کوتاه است ، تصویر کوچک دوم نیز تصویر کوچک اول را در بر می گیرد.
می توانید با استفاده از خاصیت پاک کردن به مرورگر دستور دهید تا دور هیچ عنصر شناوری نپیچد. این می تواند یکی از مقادیر چپ ، راست ، هر دو یا هیچ یک را تنظیم کند. از چپ برای پایین انداختن عناصری که به سمت چپ شناور هستند اما قصد دارند همچنان به اطراف اجسام شناور راست می پیچند ، استفاده کنید. وقتی این مقدار را به سمت راست تنظیم می کنید ، موتور رندر به زیر اجسام شناور راست می افتد اما همچنان به اجسام شناور چپ می پیچد. همانطور که انتظار دارید ، هر دو مقدار به زیر عناصر شناور چپ و شناور راست منتقل می شوند. شما می توانید پاکسازی را باnone
خاموش کنید. این مقدار پیش فرض این ویژگی است. برای رفع مشکل با لیست ۱۰-۱۴ ، ویژگی پاک با مقدار چپ را به قانون .image
اضافه کنید:
.image {
width: 120px;
height: 90px;
margin-right: 8px;
margin-bottom: 8px;
border: 2px solid dimgray;
background-color: lightgreen;
float: left;
clear: left;
}
برای تنظیم اندازه عناصر شناور می توانید از درصد استفاده کنید ، اما گاهی اوقات ممکن است تعجب کنید. به لیست ۱۰-۱۵ نگاهی بیندازید که جعبه های شناور با عرض ۳۳٪ را تنظیم می کند ، بنابراین سه مورد از آنها می توانند در عرض پنجره مرورگر قرار بگیرند.
لیست ۱۰-۱۵: جعبه های شناور
هنگام نمایش این صفحه ، سه جعبه را در یک ردیف مشاهده خواهید کرد. همانطور که در صفحه سمت چپ شکل ۱۰-۳۰ نشان داده شده است. با این حال ، هنگامی که حاشیه ای را به قانون .box اضافه می کنید (به عنوان مثال حاشیه: ۲px solid lightgray/>
) ، فقط دو جعبه در ردیف اول قرار می گیرند ، همانطور که در صفحه سمت راست نشان داده شده است ، جعبه سوم به ردیف دوم می افتد.
این پدیده یک اشکال نیست. این روش مرورگر به طور پیش فرض کار می کند. همانطور که به یاد دارید ، هنگام تعیین درصد ، عرض محتوا از عرض عنصر بالاتر محاسبه می شود ، که در این حالت ، عرض پنجره مرورگر است. در حالی که هیچ حاشیه ای وجود ندارد ، سه جعبه در یک ردیف قرار می گیرند که عرض هر یک از آنها ۳۳٪
است. با این وجود ، با border
هایی که عرض بیشتری به جعبه ها می افزایند ، فقط دو عدد در خط اول قرار می گیرند. می توانید به مرورگر دستور دهید از حالت اندازه گیری متفاوت استفاده کند. با ویژگی اندازه جعبه ، می توانید گزینه پیش فرض محتوا را تغییر دهید. مرورگر عرض محتوا را محاسبه می کند و سپس عرض border
و padding
را به جعبه حاشیه اضافه می کند که در هنگام محاسبه عرض ، border
ها و padding
ها نیز در نظر گرفته می شوند. بنابراین ، اگر اعلامیه ویژگی box-sizing: border-box
را به قانون .box
در لیست ۱۰-۱۵ اضافه کنید. این مسئله اندازه گیری را برطرف می کند ، و سه جعبه با border
در یک ردیف قرار می گیرند. برای اطمینان از اینکه تنظیم اندازه جعبه در همه مرورگرها کار می کند ، باید سه اعلامیه مانند این را بنویسید:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
اکنون ، شما جزئیات مهم مربوط به مدل جعبه را آموخته اید ، وقت آن است که از درس بعدی با افزودن گرافیک به صفحات وب خود آشنا شوید.