محتوا
نیمه شب است ، و آن یکی تقسیم در سایت شما هنوز مانند صندوقچه اسباب بازی کودک به نظر می رسد. همه عناصر یک آشفته گیج کننده هستند و هر بار که با CSS بازی می کنید نمایش دادن املاک ، آنها خود را به یک چیز کاملاً متفاوت دیگر از مزخرف تغییر می دهند.
اگر مثل من هستید ، احتمالاً این مسئله را با زیر لب غر زدن و مرتباً با صفحه کلید تهاجمی تر خواهید کرد. و اگرچه این استراتژی قبلاً برای من مفید بوده است ، من اخیراً تصمیم گرفتم که راهی بهتر برای درک آن پیدا کنم نمایش دادن ویژگی.
به نظر می رسد اصول نمایش دادن بسیار ساده تر از آنچه من در ابتدا فکر کردم بود. در واقع آنها از همان اصول بسته بندی چمدان استفاده می کنند. من قصد دارم برای پوشش نمایش: بلوک کردن, درون بلوکی و درون خطی. اگر قبلاً چمدانی را به صورت منظم چیده باشید ، موازی آن را خواهید دید. اگر شما از افرادی هستید که به طور تصادفی تمام لباس های خود را قوچ می کنید - خوب ، فقط کارهای زیادی هست که می توانم برای شما انجام دهم.
چمدان ما شامل سه نوع لباس خواهد بود:
- ظریف ها ، مانند پیراهن یقه دار
- تی شرت هایی که می توانند جمع شوند
- جوراب یا لباس زیر که می تواند در جای خالی پر شود
برای مرجع ، اگر چمدان را در HTML مدلسازی کنیم ، اینگونه به نظر می رسد:
div class = 'چمدان'> div class = 'ظریف'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
موارد ظریف در بالا
نمایش: بلوک پیش فرض اکثر عناصر HTML است. این بدان معناست که این عنصر کل فضای افقی درون ظرف خود را اشغال می کند تقسیم. اگر در کنار سایر عناصر خواهر و برادر باشد ، خط جدیدی را شروع می کند و سایر عناصر را در خط خود قرار نمی دهد. این همان موارد ظریفی است که در بالای چمدان خود قرار می دهید. اینها مقالات ظریف یا هوشمندانه ای مانند پیراهن های یقه دار است. شما نمی خواهید چروکیده شوند ، بنابراین اطمینان حاصل کنید که در مقابل سایر لباس ها قرار نگرفته اند.
این یکی از سخت ترین قسمت های این بخش است نمایش: بلوک کردن. توجه کنید که چگونه پیراهن یقه ای کل عرض چمدان را اشغال نمی کند؟ این بدان معنا نیست که سایر موارد به سطح خود می رسند. بگذارید بگوییم این پیراهن 60 درصد عرض چمدان است. با این وجود سایر عناصر در سطح بالا به آن پیوسته اند.
به همین دلیل در تصویر یک مرز نارنجی وجود دارد. آ نمایش: بلوک کردن اگر کل فضای افقی را اشغال نکند ، عنصر به طور خودکار در اطراف خود حاشیه اضافه می کند.
تی شرت های مرتب و بسته بندی شده
بیشتر چمدان شما احتمالاً مملو از بقیه لباسهای سفر شماست. به منظور سادگی ، ما قصد داریم این مورد را فقط به تی شرت کاهش دهیم. در اینترنت بحث بزرگی وجود دارد که آیا تاشو یا غلتک کارایی بیشتری دارد. من یک نوع تاشو هستم
به هر حال ، برای اینکه بیشترین وسایل را داشته باشید ، تی شرت هایتان را کنار هم ردیف می کنید. این دقیقاً همان چیزی است که نمایش: بلوک درون خطی برای این عناصر می توانند در کنار یکدیگر و در کنار هم قرار بگیرند نمایش: درون خطی عناصر.
بر خلاف نمایش: درون خطی عناصر ، یک درون بلوکی اگر عنصر در حاوی آن نباشد ، به خط بعدی منتقل می شود تقسیم در کنار دیگری درون بلوکی عناصر. برای ریختن تی شرت به ردیف بعدی ، باید آن را از وسط برش دهید و از نیمه باقی مانده برای شروع یک ردیف جدید استفاده کنید. درون خطی اگر بر روی یک خط قرار نگیرند ، عناصر مجاز به تقسیم شدن به نصف نیستند.
جوراب هایی که جای خالی را پر می کنند
به HTML اصلی برگردید و متوجه خواهید شد که یک جوراب وجود دارد div> بین هشت تی شرت. اما نگاهی به نمای افقی چمدان در سمت راست بیندازید. اگر یک جوراب باشد div>، چگونه می تواند ردیف میانی را به پایان برساند و ردیف پایین را شروع کند؟ این هدف است نمایش: درون خطی!
آن درون خطی اگر عنصر از عرض بیشتر شود به خط بعدی می ریزد تقسیم (از این طریق با متفاوت است درون بلوکی یا مسدود کردن) از زمان جوراب های ما تقسیم پر از جورابهایی است که به طور تصادفی در شکافها پر شده اند ، به راحتی می تواند شکاف سمت راست ردیف میانی را پر کرده و برای شروع ردیف پایین آن ریخته شود.
برای این اتفاق نیازی نیست که هیچ جورابی از وسط نصف شود. به همین دلیل است که آنها می توانند تبدیل شوند درون خطی، در حالی که تی شرت فقط می تواند باشد درون بلوکی. اگر تی شرت های ردیف وسط فقط 60 درصد عرض را اشغال می کردند ، جوراب ها را می گرفتند div> به سمت بالا حرکت می کند تا کل فضای باقی مانده ردیف را پر کند.
سفر بن
این CSS نهایی برای چمدان ما است:
.delicate {display: block؛ عرض: 60٪ } .tshirt {display: inline-block؛ عرض: 20٪؛ } .socks {display: inline؛ }
در اینجا چند سناریو جایگزین برای نشان دادن کاربردهای مختلف نمایش وجود دارد. اگر ظرافتها در بالا داشت نمایش: درون بلوکی، آنها درست در کنار تی شرت ها قرار می گیرند. برخی از تی شرت ها به سمت بالا حرکت می کنند و بقیه بر اساس آن تنظیم می شوند. هیچ بافر راحتی در سمت چپ و راست پیراهن یقه ای وجود ندارد.
اگر هر تی شرت داشت صفحه نمایش بلوک، یک دسته بزرگ تی شرت روی هم خواهید داشت ، یکی در هر خط. اگر جوراب داشت نمایش: بلوک درون خطی، همه آنها به جای اینکه بین دو ردیف جریان داشته باشند ، در ردیف پایین قرار می گیرند. برخی از تی شرت ها به یک ردیف دیگر رانده می شوند و خط چهارم را تشکیل می دهند. یک شکاف در سمت راست ردیف میانی تی شرت ها وجود دارد.
با روشی که در اینجا شرح داده ام ، در نهایت با یک چمدان کاملا مرتب و بسته بندی شده روبرو می شویم که از فضای موجود به بهترین شکل استفاده می کند.
این مقاله در اصل در مجله نت شماره 289؛ از اینجا بخر!
