جلسه ۳۴: مدل جعبه – همراه با مثال. در CSS
درک مدل جعبه برای نوشتن CSS خوب مهم است. بیایید در آن غوطه ور شویم.
در این درس ، ما در تلاش برای کشف یکی از مهمترین قسمتهای CSS خواهیم بود.
شروع کنیم:
نگاهی به نشانه گذاری زیر بیندازید:
چی میبینی؟
مورد واضح در خط ۴ است – یک عنصر پاراگراف با متن ، سلام به جهان
اما آیا این همه است؟
بیش از آنچه با چشم می بیند:
در زیر نتیجه علامت گذاری در بالا آمده است:
تمام آنچه می بینید یک سلام جهان است !!!
به معنای واقعی ، آنچه در بالا نشان داده شده یک جعبه با متن است ، سلام به جهان !!! در آن
نوشته به صورت بصری در زیر نشان داده شده است:
آیا این عجیب است؟
عنصر ، pمانند یک “جعبه” عمل می کند که محتوای کمی در آن وجود دارد.
حتی جعبه های بیشتر
حتی اسناد html نسبتاً ساده حاوی بیش از یک عنصر خواهند بود.
برای مثال:
نشانه گذاری در بالا دارای ۳ عنصر پاراگراف است.
باز هم ، شما می توانید آنها را به عنوان سه “جعبه” جدا از پاراگراف مشاهده کنید.
توجه داشته باشید که چگونه این “جعبه ها” روی هم قرار گرفته اند
این فرضیه ای است که مدل CSS BOX بر اساس آن ساخته شده است.
همه عناصر html به این ترتیب عمل می کنند – content-area.
