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

۱۴۹ بازدید
آخرین به‌روزرسانی: ۱۸ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
گردش نرمال در 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-ها با هم تداخل پیدا کنند، آن که بزرگ‌تر است باقی می‌ماند و آن که کوچک‌تر است ناپدید می‌شود. این وضعیت «تصادم لبه‌ها» نام دارد و وضعیتی است که باید از بروز آن جلوگیری کنیم.

در ادامه مثال ساده‌ای می‌بینید که همه این موارد را توضیح می‌دهد:

1<h1>Basic document flow</h1>
2
3<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
4
5<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
6
7<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
8
9<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
1body {
2  width: 500px;
3  margin: 0 auto;
4}
5
6p {
7  background: rgba(255,84,104,0.3); 
8  border: 2px solid rgb(255,84,104);
9  padding: 10px;
10  margin: 10px;
11}
12
13span {
14  background: white;
15  border: 1px solid black;
16}

گردش نرمال در CSS

سخن پایانی

با مطالعه این راهنما با گردش نرمال صفحه‌های وب آشنا شدید و اینک شیوه پیش‌فرض چیدمان عناصر را از سوی مرورگر می‌دانید.

در بخش بعدی به بررسی روش تغییر دادن این روش نمایش پیش‌فرض برای ایجاد لی‌آوت‌های مورد نیاز می‌پردازیم. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *