موقعیت یابی CSS - مدل جعبه

در این بخش ، شما می آموزید که چگونه صفحات وب خود را با استفاده از موقعیت یابی CSS بچینید. با این حال ، قبل از انجام این کار ، کمک می کند تا در مورد چیزی به نام CSS Box Model بیاموزید
مدل جعبه CSS
یک صفحه HTML به عنوان یک سری جعبه در نظر گرفته می شود که روی همدیگر قرار گرفته اند. این جعبه ها می توانند متن را در پاراگراف ها ، تصاویر ، شکل اشیا، و غیره نگه دارند. هر جعبه به چهار قسمت تقسیم می شود: یک حاشیه ، یک حاشیه ، برخی از مواد پرشده ، و در آخر محتوای خود:

The CSS box model

حاشیه شفاف است و به اطراف مرز می رود. برای حاشیه نمی توانید رنگ تعیین کنید. می تواند مانند تصویر بالا بزرگ باشد یا روی صفر تنظیم شود و درست در بالای مرز قرار بگیرد.
حاشیه به اطراف padding و محتوا می رود. این می تواند یک رنگ ، اندازه و یک نوع حاشیه (نقطه ای ، جامد و غیره) را به خود اختصاص دهد.
Padding فاصله بین محتوا و حاشیه است. برای کل جعبه به همان رنگ زمینه می گیرد.
محتوا مواردی مانند متن و تصاویر است - کل قسمت جعبه.
هر چهار منطقه می توانند اندازه های خود را تنظیم کنند. در کد زیر ، دو پاراگراف از متن را تنظیم کرده ایم:


CSS code for two paragrpahs highlighting the box model


تمام کاری که ما انجام می دهیم تنظیم ارتفاع و عرض برای دو پاراگراف متن است. سپس حاشیه ، حاشیه و padding را تنظیم می کنیم. (ما همچنین یک رنگ اضافه کرده ایم تا بتوانید شکل ظاهری آن را در مرورگر مشاهده کنید.) نتیجه این است:


CSS code applied to two paragraphs of text

 

به اندازه حاشیه های اطراف مرز توجه کنید. حاشیه اول از هر چهار طرف 30 پیکسل است. در صورت تمایل می توانید جداگانه تنظیم کنید:

 

margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;

 

هرچند فقط با استفاده از حاشیه ، حاشیه را برای هر چهار طرف تعیین می کنید. در مورد حاشیه و padding نیز همین مورد وجود دارد: شما می توانید هر چهار را همزمان تنظیم کنید ، یا فقط با افزودن بالا ، راست ، پایین یا چپ مقادیر منفرد را تنظیم کنید.
برای بدست آوردن اندازه کلی جعبه ، هر چهار قسمت را اضافه می کنید: حاشیه ، مرز، padding ، محتوا. به عنوان مثال ، در کد بالا ما برای پاراگراف اول 300 پیکسل عرض داریم (عرض مربوط به منطقه محتوا است). حاشیه در هر طرف 30 پیکسل است و در کل عرض حاشیه 60 پیکسل را نشان می دهد. حاشیه 1 پیکسل در سمت چپ و 1 پیکسل در سمت راست است. بالشتک 20 پیکسل در سمت چپ و 20 پیکسل در سمت راست است. بنابراین کل عرض کل جعبه عبارت است از:


Left margin 30
Right margin 30
Left border 1
Right border 1
Left padding 20
Right padding 20
Content width 300
Total box width = 402 pixels

 

بنابراین اگرچه مقدار عرض 300 پیکسل را تعیین کردیم ، اما عرض کادر اطراف کل پاراگراف در واقع 402 پیکسل بود. هنگام تنظیم مقادیری از این دست ، باید این را بخاطر داشته باشید ، مخصوصاً وقتی عناصر را به چپ و راست شناور می کنید. به عنوان مثال ، اگر یک منطقه ناوبری به سمت چپ شناور است ، بهتر است مقدار عرض و سایر مقادیر را تنظیم کنید: فقط یادتان باشد که هنگام محاسبه اندازه کلی ، همه اندازه های مختلف را جمع کنید.

در درس بعدی ، نحوه افزودن نظرات به کد CSS خود را فرا خواهید گرفت.