cssطراحی سایت

جلسه ۳۴: مدل جعبه – همراه با مثال. در CSS

درک مدل جعبه برای نوشتن CSS خوب مهم است. بیایید در آن غوطه ور شویم.

در این درس ، ما در تلاش برای کشف یکی از مهمترین قسمتهای CSS خواهیم بود.

 

شروع کنیم:

نگاهی به نشانه گذاری زیر بیندازید:

<html>
  <head></head>
  <body>
    <p>Hello World!!!</p>
  </body>
</html>

چی میبینی؟

مورد واضح در خط ۴ است – یک عنصر پاراگراف با متن ، سلام به جهان

اما آیا این همه است؟

 

بیش از آنچه با چشم می بیند:

در زیر نتیجه علامت گذاری در بالا آمده است:

<html>
  <head></head>
  <body>
    <p>Hello World!!!</p>
  </body>
</html>

تمام آنچه می بینید یک سلام جهان است !!!

به معنای واقعی ، آنچه در بالا نشان داده شده یک جعبه با متن است ، سلام به جهان !!! در آن

نوشته به صورت بصری در زیر نشان داده شده است:

آیا این عجیب است؟

عنصر ، pمانند یک “جعبه” عمل می کند که محتوای کمی در آن وجود دارد.

حتی جعبه های بیشتر

حتی اسناد html نسبتاً ساده حاوی بیش از یک عنصر خواهند بود.

برای مثال:

<html>
  <head></head>
  <body>
    <p>Hello World!!!</p>
    <p>Hello Hello World!!!</p>
    <p>Hello Hello Hello World!!!</p>
  </body>
</html>

 

نشانه گذاری در بالا دارای ۳ عنصر پاراگراف است.

باز هم ، شما می توانید آنها را به عنوان سه “جعبه” جدا از پاراگراف مشاهده کنید.

توجه داشته باشید که چگونه این “جعبه ها” روی هم قرار گرفته اند

<html>
  <head></head>
  <body>
    <p>Hello World!!!</p>
    <p>Hello Hello World!!!</p>
    <p>Hello Hello Hello World!!!</p>
  </body>
</html>

این فرضیه ای است که مدل CSS BOX بر اساس آن ساخته شده است.

همه عناصر html به این ترتیب عمل می کنند – content-area.

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا