آموزش مقدماتیHTMLوCSS(جلسه 7:مبحثBox Model–بخش ۱)
1398/02/18 09:33 , میلاد صاحب نظر

آموزش مقدماتیHTMLوCSS(جلسه 7:مبحثBox Model–بخش ۱)

در جلسه قبل به طور کامل و پروژه محور با HTML و CSS آشنا شدیم. حالا دیگر می‌دانیم که این دو زبان چگونه هستند و می‌توانیم با اصول آن‌ها کار کنیم. حالا قصد داریم بیشتر پیش برویم و بررسی کنیم که دقیقاً عنصرها چگونه در یک صفحه نمایش داده‌ می‌شوند و چگونه سایزبندی می‌شوند.

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

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

عنصرها چگونه نمایش داده می‌شوند؟

قبل از اینکه به سراغ box model برویم، بهتر است ابتدا چگونگی نمایش داده شدن عنصرها را درک کنید. در جلسات سوم و چهارم، تفاوت بین عنصرهای سطح block و سطح inline را توضیح دادیم.

به عنوان یک یادآوری سریع دوباره می‌گوییم که عنصرهای سطح block بدون توجه به اینکه چه محتوایی دارند، می‌توانند هر عرض (width) موجودی را اشغال کنند و از یک خط جدید شروع می‌شوند. عنصرهای سطح inline فقط عرض مورد نیاز برای محتوایشان را اشغال می‌کنند و در همان خط، یکی پس از دیگری نوشته می‌شوند.

عنصرهای سطح block معمولاً برای قطعات بزرگ محتوا مورد استفاده قرار می‌گیرند، مانند هدینگ‌ها و عنصرهای ساختاری. عنصرهای سطح inline معمولاً برای قطعات محتوای کوچک‌تر استفاده می‌شوند، مانند چند کلمه منتخب که باید bold یا italic شوند.

نمایش

اینکه عنصرها دقیقه چگونه نمایش داده می‌شوند (مانند عنصرهای سطح block،، سطح inline یا عنصرهای دیگر)، به وسیله property یا ویژگی نمایش (display) مشخص می‌شود. هر عنصر دارای یک مقدار ویژگی display پیش‌فرض است.

به هر حال، همانند تمام مقادیر ویژگی‌های دیگر، می‌توان آن مقدار را بازنویسی کرد. مقادیر زیادی برای ویژگی DISPLAY وجود دارند، اما مرسوم‌ترین آن‌ها عبارت‌اند ازinline – block، inline، block و none.

می‌توانیم مقدار ویژگی display یک عنصر را با انتخاب آن عنصر درون CSS و تعریف یک مقدار ویژگی display جدید، تغییر دهیم. مقدار block باعث می‌شود آن عنصر یک عنصر سطح block باشد.

p {
  display: block;
}

مقدار inline باعث می‌شود عنصر، به یک عنصر سطح inline تبدیل شود.

p {
  display: inline;
}

در مورد مقدار inline – block شرایط جالب می‌شود. استفاده از این مقدار به یک عنصر امکان می‌دهد تا به عنوان یک عنصر سطح block رفتار کند و تمام ویژگی‌های box model را بپذیرد (که به زودی توضیح خواهیم داد). به هر حال، عنصر درون خط همراه با بقیه عنصرها نمایش داده می‌شود و به صورت پیش‌فرض در یک خط جدید قرار نمی‌گیرد.

p {
  display: inline-block;
}

فضای بین عنصرهای Inline – Block

یکی از نشانه‌ها و ویژگی‌های خاص عنصرهای inline – block این است که آن‌ها همیشه به هم وصل نیستند، یا دقیقه در مقابل یکدیگر نمایش داده نمی‌شوند. معمولاً فضای کوچکی بین دو عنصر inline – block وجود دارد. این فضا، ممکن است کمی روی اعصاب باشد، اما طبیعی است.

در جلسات بعدی در مورد اینکه چرا این فضا وجود دارد و چگونه می‌توانیم آن را حذف کنیم صحبت خواهیم کرد.

در آخر، استفاده از یک مقدار none می‌تواند به طور کامل یک عنصر را مخفی کرده و صفحه را به گونه‌ای رندر کند که گویا آن عنصر اصلاً وجود ندارد. هر عنصری که درون آن عنصر مخفی شده قرار گرفته باشد نیز مخفی می‌شود.

div {
  display: none;
}

دانستن این که عنصرها چگونه نمایش داده می‌شوند و چگونه می‌توان display آن‌ها را تغییر داد بسیار حائز اهمیت است، چون display در یک عنصر دلالت‌ها و نشانه‌هایی از اینکه box model چگونه رندر می‌شود، دارد.

وقتی در مورد box model صحبت می‌کنیم، حتماً به این نشانه‌های مختلف و اینکه چگونه می‌توانند بر ارائه عنصر تأثیر بگذارند هم اشاره خواهیم کرد.

box model چیست؟

با توجه به مفهوم box model، هر عنصر در یک صفحه در واقع یک جعبه مستطیلی شکل است و می‌تواند دارای عرض، ارتفاع، padding یا حاشیه درون، خط مرز و حاشیه (margins) باشد.

این جمله خیلی مهم است: هر عنصر در یک صفحه، در واقع یک جعبه مستطیلی شکل است.

وقتی به صورت مجزا به هر عنصر نگاه می‌کنیم، می‌توانیم ببینیم که همه آن‌ها مستطیلی شکل هستند

شکل ۷.۱. وقتی به صورت مجزا به هر عنصر نگاه می‌کنیم، می‌توانیم ببینیم که همه آن‌ها مستطیلی شکل هستند، نباید به اشکال نمایش داده شده در آن‌ها توجه کنیم.

هر عنصر در هر صفحه با box model مطابقت دارد، پس این مبحث خیلی با اهمیت است. اجازه دهید این مبحث را باز کنیم و در این بین، چند ویژگی جدید از CSS نیز بیان خواهیم کرد تا بتوانید بهتر چیزی که روی آن کار می‌کنیم را درک کنید.

کار با box model

هر عنصر یک جعبه مستطیلی شکل است و چند ویژگی وجود دارند که می‌توانند سایز آن جعبه را مشخص کنند. هسته یا مرکز جعبه توسط عرض و ارتفاع یک عنصر تعریف می‌شود، که می‌توان آن را با استفاده از ویژگی display مشخص کرد (توسط محتوای عنصر یا با مشخص کردن ویژگی‌های width و height).

سپس padding و بعد از آن border ابعاد جعبه را به طرف خارج عرض و ارتفاع گسترش می‌دهند. در آخر، هر margin که مشخص کنیم، از border پیروی می‌کند.

هر بخش از box model در CSS یک ویژگی نظیر دارد : border، padding، height، width و margin.

 اجازه دهید این ویژگی‌ها را درون چند خط کد به کار ببریم:

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

با توجه به box model، عرض یک عنصر را می‌توان با استفاده از فرمول زیر محاسبه کرد:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

 در مقابل، با توجه به box model، ارتفاع یک عنصر را می‌توان با استفاده از فرمول زیر محاسبه کرد:

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

 تجزیه box model که شامل یک ارتفاع و عرض پایه به علاوه paddingها، مرزها و حاشیه‌ها می‌باشد

شکل ۷.۲. تجزیه box model که شامل یک ارتفاع و عرض پایه به علاوه paddingها، مرزها و حاشیه‌ها می‌باشد.

با استفاده از فرمول‌ها، می‌توانید ارتفاع و عرض کد مثال را پیدا کنیم:

box model بدون شک یکی از گیج‌کننده‌ترین قسمت‌های HTML و CSS است. ما مقدار ویژگی width را روی ۴۰۰ پیکسل تنظیم کردیم، اما عرض واقعی عنصر ما ۴۹۲ پیکسل شد. به طور پیش‌فرض، box model خاصیت جمعی دارد.

بنابراین برای تشخیص سایز واقعی یک جعبه، باید padding، مرزها و حاشیه‌ها را نیز برای هر چهار وجه جعبه به حساب آوریم. عرض ما نه تنها شامل مقدار ویژگی width است، بلکه همچنین سایز padding چپ و راست، مرزهای چپ و راست و حاشیه‌های چپ و راست را نیز شامل می‌شود.

ممکن است که تا اینجای کار خیلی از این ویژگی‌هایی که گفته شد زیاد منطقی به نظر نرسند، هیچ اشکالی ندارد. برای واضح‌تر کردن موضوع، اجازه دهید به طور دقیق‌تر تمام ویژگی‌هایی که box model را تشکیل می‌دهند(یعنی border،، padding، height، width و margin) مورد بررسی قرار دهیم.

Width و height

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

اگر یک عنصر برای طراحی و layout یک صفحه مهم و کلیدی باشد، ممکن است به مقادیر ویژگی‌های width و height خاصی نیاز داشته باشد. در این مورد، می‌توانید مقادیر ویژگی برای عنصرهای غیر inline را مشخص کنید.

Width

عرض پیش‌فرض یک عنصر به مقدار display آن بستگی دارد. عنصرهای سطح block دارای عرض پیش‌فرض ۱۰۰ درصد هستند، که کل فضای افقی موجود را مصرف می‌کنند. عنصرهای Inline و inline – block به صورت افقی رشد و گسترش می‌یابند تا با محتوای خود مطابقت یابند.

عنصرهای سطح inline نمی‌توانند سایز ثابت داشته باشند، بنابراین ویژگی‌های width و height فقط به عنصرهای غیر inline مربوط می‌شوند. برای مشخص کردن یک عرض خاص برای یک عنصر غیر inline، از ویژگی width استفاده می‌شود:

div {
  width: 400px;
}
Height

ارتفاع پیش‌فرض یک عنصر با محتوای آن مشخص می‌شود. یک عنصر در صورت نیاز برای تطابق با محتوایش، به صورت عمودی رشد و توسعه می‌یابد. برای تنظیم یک ارتفاع خاص برای یک عنصر غیر inline، از ویژگی height استفاده می‌شود:

div {
  height: 100px;
}
سایزبندی عنصرهای سطح Inline

لطفاً به خاطر داشته باشید که عنصرهای سطح inline ویژگی‌های width و height یا هر مقدار دیگر مربوط به عرض و ارتفاع را نمی‌پذیرند. اما از طرفی، عنصرهای block و inline - block ویژگی‌های width و height و مقادیر مشابه آن‌ها را می‌پذیرند.

Margin و padding

بسته به عنصر، مرورگرها می‌توانند حاشیه‌ها و padding پیش‌فرض برای یک عنصر اعمال کنند تا به زیبایی و خوانایی آن کمک کنند. معمولاً این وضعیت را در عنصرهای متنی مشاهده می‌کنیم. حاشیه‌ و paddingهای پیش‌فرض برای این عنصرها ممکن است در مرورگرها و عنصرهای مختلف، متفاوت باشند.

در جلسات اول و دوم با استفاده از یک CSS reset تمام این مقادیر پیش‌فرض را روی صفر تنظیم کردیم. این کار به ما امکان می‌دهد همه چیز را یکسان کنیم و مقادیر خودمان را تنظیم کنیم.

Margin

ویژگی margin به ما امکان می‌دهد تا میزان فضای اطراف یک عنصر را مشخص کنیم. حاشیه‌ها برای یک عنصر در بیرون از مرزها قرار می‌گیرند و کاملاً رنگ شفافی دارند. می‌توان از حاشیه‌ها برای کمک به موقعیت گیری عنصرها در یک محل به خصوص در یک صفحه یا برای ایجاد فضای کافی و دور نگه داشتن تمام عنصرهای دیگر استفاده کرد.

کاربرد ویژگی margin به این شکل است:

div {
  margin: 20px;
}

یک نکته عجیب در مورد ویژگی margin این است که حاشیه‌های عمودی (یعنی top و bottom) توسط عنصرهای سطح inline پذیرفته نمی‌شوند. به هر حال، این حاشیه‌های عمودی توسط عنصرهای سطح block و inline پذیرفته می‌شوند.

Padding

ویژگی padding خیلی شبیه به ویژگی margin است. اما، padding درون مرز عنصر قرار دارد، البته اگر یک عنصر مرز داشته باشد. ویژگی padding برای ایجاد فضا دقیقه درون یک عنصر استفاده می‌شود. کد آن به این شکل است:

div {
  padding: 20px;
}

ویژگی padding، بر خلاف ویژگی margin بر روی عنصرهای سطح inline به صورت عمودی عمل می‌کند. این padding عمودی ممکن است با خط بالا یا پایین عنصر مورد نظر ترکیب شود، اما باز هم نمایش داده می‌شود.

Margin و padding در عنصرهای سطح inline

عنصرهای سطح Inline از نظر حاشیه‌ها و padding، کمی متفاوت‌تر از عنصرهای سطح block و inline تأثیر می‌پذیرند. حاشیه‌ها برای عنصرهای سطح inline فقط به صورت افقی (left و right) عمل می‌کنند.Padding  روی تمام ۴ سمت عنصرهای سطح inline عمل می‌کنند.

به هر حال، padding عمودی (top و bottom) ممکن است باعث تداخل در خطوط بالا و پایین یک عنصر شود.

حاشیه و paddingها برای عنصرهای block و inline – block به طور طبیعی عمل می‌کنند.

تعریف‌های margin و padding

در CSS، برای تعریف مقادیر ویژگی‌های خاص بیش از یک روش وجود دارد. می‌توانیم از روش longhand استفاده کنید، در این روش چندین ویژگی و مقدار یکی پس از دیگری لیست می‌شوند، که در این لیست هر مقدار دارای ویژگی مخصوص به خودش است.

یا می‌توانیم از روش shorthand استفاده کنیم، در این روش باید اطمینان حاصل کنیم که از ساختار ویژگی و مقدار درستی استفاده کرده‌ایم.

ویژگی‌های margin و padding به هر دو شکل longhand و shorthand می‌آیند. وقتی از ویژگی margin در shorthand به منظور تنظیم یک مقدار برای تمام چهار سمت یک عنصر استفاده می‌کنیم، فقط یک مقدار مشخص می‌شود:

div {
  margin: 20px;
}

به منظور تنظیم یک مقدار برای سمت‌های top و bottom و یک مقدار دیگر برای سمت‌های left و right در یک عنصر، دو مقدار مشخص‌ می‌شوند: ابتدا top و bottom، سپس left و right. در کد زیر ما حاشیه‌های ۱۰ پیکسلی را برای top و bottom از یک ویژگی <div> و حاشیه‌های ۲۰ پیکسلی را برای left و right قرار داده‌ایم:

div {
  margin: 10px 20px;
}

به منظور تنظیم مقادیر منحصر به فرد برای هر چهار سمت یک عنصر، آن مقادیر به ترتیب bottom، right، top و left تنظیم می‌شوند (به صورت ساعت‌گرد). در کد زیر، ما حاشیه‌های ۱۰ پیکسلی را برای جهت top از یک <div>، ۲۰ پیکسلی برای right، ۰ پیکسلی برای bottom و ۱۵ پیکسلی برای left قرار داده‌ایم.

div {
  margin: 10px 20px 0 15px;
}

وقتی فقط از ویژگی‌های margin یا padding استفاده می‌شود (با هر تعداد مقدار)، این روش shorthand محسوب می‌شود. در روش longhand، می‌توانیم مقدار را با استفاده از ویژگی‌های منحصر به فرد هر دفعه برای یک جهت تنظیم کنیم.

پس از نام هر ویژگی (که در این مثال margin یا padding است) یک خط تیره یا Dash و بعد از آن جهت جعبه قرار می‌گیرد (جهتی که مقدار برای آن اعمال می‌شود): یعنی یکی از جهات bottom، right، top یا left. برای مثال، ویژگی padding – left فقط یک مقدار می‌پذیرد و padding سمت چپ را برای آن عنصر تنظیم می‌کند.

ویژگی margin – top فقط یک مقدار می‌پذیرد و حاشیه بالا را برای آن عنصر تنظیم می‌کند.

div {
  margin-top: 10px;
  padding-left: 6px;
}

وقتی می‌خواهیم فقط یک مقدار margin یا padding مشخص کنیم، بهترین کار این است که از ویژگی‌های longhand استفاده کنیم. با این کار، کد ما واضح و خوانا باقی می‌ماند و به ما کمک می‌کند که گیج نشویم.

برای مثال، قصد دارید که برای جهت‌های right، top و left عنصر حاشیه‌های ۰ پیکسلی قرار دهید، یا می‌خواهید فقط برای جهت bottom حاشیه ۱۰ پیکسلی قرار دهید؟ با استفاده از ویژگی‌ها و مقادیر longhand می‌توانیم هدفمان را واضح بیان کنیم. وقتی با سه یا تعداد بیشتری مقدار کار می‌کنیم، روش shorthand بسیار مفید خواهد بود.

رنگ‌های margin و padding

ویژگی‌های margin و padding کاملاً شفاف و بی‌رنگ هستند و هیچ مقدار رنگی نمی‌پذیرند. شفاف بودن آن‌ها باعث می‌شود که رنگ‌های پشت زمینه عنصرهای مرتبط نمایش داده شوند. برای حاشیه‌ها، ما رنگ پشت زمینه عنصر پدر را می‌بینیم و برای padding، رنگ پشت زمینه عنصری که padding برای آن اعمال می‌شود را می‌بینیم.

مرزها یا borderها

مرزها بین padding و حاشیه قرار می‌گیرند و محیط یک عنصر را تشکیل می‌دهند. ویژگی border به سه مقدار نیاز دارد: style، width و color.

مقادیر shorthand برای ویژگی border به این شکل نوشته می‌شوند: width, style, color. در longhand، این سه مقدار می‌توانند به سه ویژگی border-style، border-width و border-color تجزیه شوند. این ویژگی‌های longhand برای تغییر یا بازنویسی یک مقدار border بسیار مفید هستند.

ویژگی‌های width و color از مرزها را می‌توانید با استفاده از واحد‌های معمول CSS (یعنی length و color) تعریف کرد، که در جلسه پنجم و ششم کامل توضیح داده شدند.

مرزها ممکن است ظواهر متفاوتی داشته باشند. معمول‌ترین مقادیر استایل عبارت‌اند از dotted، dashed، double، solid و none،‌ اما چند مقدار استایل‌ دیگر هم هستند که می‌توانید استفاده کنید.

در زیر کدی برای یک مرز با ضخامت ۶ پیکسل، خط صاف و خاکستری قرار دارد که اطراف چهار جهت یک <div> را می‌پوشاند:

div {
  border: 6px solid #949599;
}
مرزهای تک وجهی

درست همانند ویژگی‌های margin و padding، اگر بخواهیم مرزها نیز می‌توانند هر دفعه فقط روی یک وجه قرار بگیرند. این کار به ویژگی‌های جدیدی نیاز دارد که عبارت‌اند از: border-bottom، border-right، border-top و border-left.

مقادیر این ویژگی‌ها همانند مقادیری هستند که برای ویژگی‌های تک کلمه‌ای border (یعنی style، width و color) به کار می‌رفتند. اگر بخواهیم، می‌توانیم کاری کنیم که یک مرز فقط برای زیر یک عنصر ظاهر شود:

div {
  border-bottom: 6px solid #949599;
}

علاوه بر این، استایل‌ها برای مرزهای تک وجهی را می‌توان در یک سطح برابر و متناسب کنترل کرد. برای مثال، اگر می‌خواهیم فقط ویژگی width از مرز زیرین تغییر کند، می‌توانیم از کد زیر استفاده کنیم:

div {
  border-bottom-width: 12px;
}

این ویژگی‌های مرز longhand بسیار خاص شامل مجموعه‌ای از کلمات هستند که با خطر تیره از هم مجزا می‌شوند و این مجموعه با کلیدواژه border شروع می‌شوند، پس از آن‌ها جهت منتخب (bottom، right،، top یا left) و سپس بسته به ویژگی مطلوب و مورد نظر ما، یکی از ویژگی‌های style، width یا color قرار می‌گیرد.

گردی مرز

همین‌طور که در حال بررسی مرزها و ویژگی‌های متفاوت آن‌ها هستیم، همچنین باید ویژگی border-redius را نیز امتحان کنیم. این ویژگی به ما امکان می‌دهد گوشه‌های یک عنصر را گرد کنیم.

ویژگی border – radius واحد‌های طولی از جمله درصدها و پیکسل‌ها را می‌پذیرد و این واحدها گوشه‌هایی از عنصر که باید گرد شوند را مشخص می‌کنند. یک مقدار به تنها می‌توانند هر چهار گوشه یک عنصر را به صورت برابر گرد کند.

دو مقدار به ترتیب گوشه‌های top-left/bottom-right و top-right/bottom-left را گرد می‌کنند. چهار مقدار به ترتیب گوشه‌های bottom-right، top-right، top-left و bottom-left را گرد می‌کنند.

وقتی ترتیبی را در نظر می‌گیرید که در آن چندین مقدار برای ویژگی border – radius به کار رفته‌اند ( همچنین برای ویژگی‌های margin و padding)، به یاد داشته باشید که آن‌ها به صورت ساعت‌گرد عمل می‌کنند  ترتیب از بالا سمت چپ عنصر شروع می‌شود.

div {
  border-radius: 5px;
}

ویژگی border-radius ممکن است همچنین به ویژگی‌های longhand تجزیه شود که برای ما امکان تغییر گردی یک گوشه از عنصر را فراهم می‌کنند.

این ویژگی‌های longhand با border شروع می‌شوند، پس از آن موقعیت عمودی گوشه عنصر (top یا bottom) و موقعیت افقی گوشه عنصر (left یا right) قرار می‌گیرند و سپس با میزان گردی پایان می‌یابند. برای مثال، برای تغییر گردی گوشه بالا راست از یک <div>، از ویژگی border-top-right-radius استفاده می‌کنیم.

div {
  border-top-right-radius: 5px;
}

سایزبندی جعبه

تا الآن، box model یک طراحی جمعی بوده است. اگر width یک عنصر را روی ۴۰۰ پیکسل قرار دهید و سپس ۲۰ پیکسل padding و یک مرز ۱۰ پیکسلی در هر سمت اضافه کنید، عرض واقعی عنصر برابر با ۴۶۰ پیکسل می‌شود.

به یاد داشته باشید، باید مقادیر ویژگی padding، width و border را با همدیگر جمع کنیم تا عرض کامل و واقعی یک عنصر به دست آید.

به هر حال Box model می‌تواند برای پشتیبانی از محاسبات متفاوت، تغییر کند. CSS3 ویژگی box-sizing را معرفی کرد، که به ما امکان می‌دهد چگونگی عملکرد box model و چگونگی محاسبه سایز عنصر را تغییر دهیم.

این ویژگی سه مقدار اصلی را می‌پذیرد – padding-box، content-box و border-box – که هر کدام دارای تأثیر کمی متفاوت نسبت به دیگری روی چگونگی محاسبه سایز جعبه می‌باشند.

خلاصه

در این جلسه با مفهوم box model و تعریف و ویژگی‌های آن آشنا شدید. در مورد بخش‌های مختلف box office و چگونگی تغییر آن‌ها آشنا شدید. البته در این جلسه فقط در مورد ظاهر box model صحبت شد. در جلسه بعدی در مورد محتوای درون box model صحبت می‌کنیم و این مبحث را کامل خواهیم کرد.

با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات