گردش نرمال در CSS – آموزش CSS (بخش بیست و ششم)


در این بخش از سری مقالات آموزش CSS به بررسی گردش نرمال در CSS میپردازیم. «گردش نرمال» (Normal Flow) در اصل به روش چیدمان عناصر صفحه وب در صورت عدم دخالت ما گفته میشود. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:
همچنین، برای یادگیری قالببندی Grid در CSS ، مطالعه مقاله زیر پیشنهاد میشود:
چنان که در بخش قبلی این سری مقالات توضیح دادیم، عناصر یک صفحه وب در صورتی که هیچ CSS روی آنها اعمال نشود به صورت گردش نرمال چیدمان مییابند. زمانی که این مفهوم را درک کنیم، میتوانیم شروع به تلاش برای تغییر شیوه رفتار عناصر از طریق تنظیم موقعیت آنها در گردش نرمال و یا حذفشان به طور کلی از این کردش نرمال بکنیم. توجه کنید که آغاز کار از یک سند خوشترکیب که گردش نرمال خوانایی دارد، بهترین روش برای لیآوت هر صفحه وبی محسوب میشود. بدین ترتیب مطمئن خواهیم بود که محتوا خوانا است و حتی اگر کاربر از یک مرورگر با قابلیتهای محدود استفاده کند میتواند آن را بخواند و همچنین نرمافزارهای قرائت صفحه میتواند محتوای صفحه را بخوانند به علاوه، از آنجا که گردش نرمال برای خواناتر ساختن صفحه طراحی شده است، با اتخاذ این رویکرد به جای مبارزه با سند، از آن کمک میگیرید تا لیآوت را بسازید.
پیش از آن که وارد توضیح روشهای مختلف لیآوت شویم، بهتر است به مرور برخی از مواردی که در بخش قبلی در خصوص گردش نرمال توضیح دادیم پردازیم.
عناصر به صورت پیشفرض چگونه چیدمان مییابند؟
قبل از هر چیز کادرهای منفرد عناصر با گرفتن محتوای عنصر و سپس افزودن هر گونه padding, border و margin پیرامون آنها لیآوت مییابند. این همان مدل باکس است که در بخشهای قبلی این سری مقالات توضیح دادهایم.
یک عنصر سطح بلوکی به صورت پیشفرض 100% از عرض عنصر والد و همه ارتفاع محتوایش را اشغال میکند. عناصر درونخطی به اندازه والد خود ارتفاع دارند و عرضشان نیز به قدر محتوایشان است. امکان تعیین عرض یا ارتفاع برای عناصر درونخطی وجد ندارد و این کار صرفاً در مورد عناصر سطح بلوکی انجام میگیرد. اگر میخواهید اندازه یک عنصر درونخطی را به هر شیوهای کنترل کنید، باید رفتار آن را با استفاده از مشخصه display: block; یا display: inline-block; که خصوصیات هر دو را ترکیب میکند، مانند یک عنصر سطح بلوکی تعیین کنید.
این وضعیت در خصوص عناصر منفرد مصداق دارد، اما زمانی که تعامل عناصر با هم را در نظر میگیریم، گردش نرمال است که در مورد روش قرارگیری عناصر درون ویوپورت مرورگر تصمیم میگیرد. عناصر سطح بلوکی به صورت پیشفرض در «جهتگیری گردش بلوکی» (block flow direction) و بر اساس «حالت نگارشی» (Writing Mode) والد خود، که مقدار پیشفرض افقی دارد، چیدمان مییابند. هر یک از این عناصر در یک خط جدید و زیر هم ظاهر میشوند و با یک margin تعیین شده از هم جدا میشوند. از این رو در زبان انگلیسی یا هر حالت نگارشی بالا به پایین افقی دیگر، عناصر سطح بلوکی به صورت عمودی چیدمان مییابند.
اما عناصر درونخطی رفتار متفاوتی دارند. این عناصر در خطوط جدید ظاهر نمیشوند؛بلکه در همان خطی که عناصر مجاور محتوای متنی قرار دارند، تا زمانی که فضای موجود داخل عنصر سطح بلوکی والد اجازه دهد، قرار میگیرند. اگر چنین فضایی نباشد، در این صورت عناصر یا متن سرریزشده به خط بعدی میروند.
اگر دو عنصر دارای margin باشند و این margin-ها با هم تداخل پیدا کنند، آن که بزرگتر است باقی میماند و آن که کوچکتر است ناپدید میشود. این وضعیت «تصادم لبهها» نام دارد و وضعیتی است که باید از بروز آن جلوگیری کنیم.
در ادامه مثال سادهای میبینید که همه این موارد را توضیح میدهد:
سخن پایانی
با مطالعه این راهنما با گردش نرمال صفحههای وب آشنا شدید و اینک شیوه پیشفرض چیدمان عناصر را از سوی مرورگر میدانید.
در بخش بعدی به بررسی روش تغییر دادن این روش نمایش پیشفرض برای ایجاد لیآوتهای مورد نیاز میپردازیم. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای برنامهنویسی
- آموزش طراحی وب با CSS – مقدماتی
- مجموعه آموزشهای طراحی سایت با HTML و CSS
- مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
- ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
- آموزش CSS Grid — گام به گام، کاربردی و پروژه محور
==