مدل باکس یک مفهوم بنیادین در CSS (شیوه‌نامه‌های طراحی شیبی) است که توصیف می‌کند چگونه عناصر در یک صفحه وب ساختاردهی و نمایش داده می‌شوند. این مدل ویژگی‌ها و رفتار محتوا، پدینگ (فاصله داخلی)، حاشیه‌ها و مرزهای یک عنصر را تعریف می‌کند.
اهمیت مدل باکس در CSS به شرح زیر است:
۱. نمایش تصویری: مدل باکس به توسعه‌دهندگان امکان می‌دهد تا چگونگی ساختار عناصر و نحوه نمایش آنها را تصور و درک کنند. هر عنصر به عنوان یک باکس مستطیلی نمایش داده می‌شود، که محتوای داخل باکس را احاطه می‌کند، از پدینگ‌ها، مرزها و حاشیه‌ها.
۲. طرح و موقعیت‌بندی: مدل باکس بر ترتیب و موقعیت‌بندی عناصر در یک صفحه وب تأثیر می‌گذارد.
۳. محاسبات اندازه: مدل باکس امکان محاسبات دقیق ابعاد عنصر را فراهم می‌کند، از جمله عرض و ارتفاع.
۴. کنترل و سفارشی‌سازی: با مدل باکس، توسعه‌دهندگان کنترل دقیقی بر روی ظاهر عناصر دارند.
۵. طراحی واکنشی: مدل باکس نقش حیاتی در طراحی واکنشی وب دارد، جایی که عناصر باید با اندازه‌ها و دستگاه‌های صفحه‌نمایش مختلف سازگاری و واکنش نشان دهند.
CSS box model
مدل جعبه CSS یک مفهوم بنیادین است که نحوه ساختاردهی و نمایش عناصر در یک صفحه وب را توصیف می‌کند. این مدل از چهار مولفه اصلی تشکیل شده است: محتوا، پر کردن، حاشیه و حاشیه. بیایید هر یک از این مولفه‌ها را به طور مفصل بررسی کنیم:
۱. جعبه محتوا: این قسمت درونی‌ترین بخش جعبه است و محتوای واقعی عنصر را شامل می‌شود، مانند متن، تصاویر یا رسانه‌های دیگر. اندازه جعبه محتوا توسط ویژگی‌های عرض و ارتفاع تعیین می‌شود، که به عنوان اندازه درون‌خطی و بلوکی شناخته می‌شوند. این ویژگی‌ها ابعاد ناحیه محتوا را مشخص می‌کنند.
۲. جعبه پر کردن: این جعبه محیطی برای محتوا فراهم می‌کند و فضایی بین محتوا و حاشیه عنصر فراهم می‌کند. پر کردن می‌تواند به طور جداگانه به هر کدام از طرف‌های عنصر (بالا، راست، پایین، چپ) با استفاده از ویژگی پرکردن اعمال شود. این معمولاً برای ایجاد فضا یا ارائه محافظت بصری در اطراف محتوا استفاده می‌شود.
۳. جعبه حاشیه: این جعبه حاشیه و پر کردن عنصر را احاطه کرده و مرز دیداری را دور آن تعیین می‌کند. جعبه حاشیه دارای ویژگی‌هایی مانند اندازه، استایل و رنگ است که می‌توان برای هر یک از طرف‌های عنصر به صورت جداگانه سفارشی کرد. معمولاً مرزها برای افزایش ظاهر بصری عناصر و ایجاد جداسازی بین بخش‌های مختلف یک صفحه وب استفاده می‌شوند.
۴. جعبه حاشیه: این فضا را خارج از حاشیه عنصر نشان می‌دهد و آن را از عناصر مجاور جدا می‌کند. حاشیه می‌تواند به طور جداگانه برای هر یک از طرف‌های عنصر با استفاده از ویژگی حاشیه تنظیم شود. معمولاً برای ایجاد فضا بین عناصر یا کنترل طرح بندی یک صفحه وب با تنظیم فضای بین بخش‌های مختلف استفاد
مدل جعبه استاندارد
هنگامی که مقادیر برای inline-size و block-size منتقل می‌شود، در صورت استفاده از مدل جعبه استاندارد، عرض و ارتفاع جعبه محتوا را تعیین می‌کند. برای محاسبه اندازه کلی جعبه، شما باید پوشاندگی و حاشیه را اگر تعیین شده است، اضافه کنید.
به تصویر زیر مراجعه کنید تا درک بهتری داشته باشید.
box-model-standard
ابعاد زیر را برای جعبه در نظر بگیرید و ما می‌خواهیم فضای واقعی مصرفی توسط جعبه را محاسبه کنیم:
.box {
width: 300px;
height: 100px;
margin: 20px;
padding: 15px;
border: 5px solid green;
}فضایی که توسط جعبه با ابعاد فوق گرفته شده‌است:
عرض عرض + پوشش-چپ + پوشش-راست + حاشیه-چپ + حاشیه-راست
ارتفاع ارتفاع + پوشش-بالا + پوشش-پایین + حاشیه-بالا + حاشیه-پایین
مجموع عرض = 300 (عرض) + 15 (پوشش چپ) + 15 (پوشش راست) + 5 (حاشیه چپ) + 5 (حاشیه راست) = 340px
مجموع ارتفاع = 100 (ارتفاع) + 15 (پوشش بالا) + 15 (پوشش پایین) + 5 (حاشیه بالا) + 5 (حاشیه پایین) = 140px
منطقه جعبه فقط تا حاشیه است، بنابراین منطقه حاشیه به فضای نهایی جعبه اضافه نمی‌شود.
مدل جعبه جایگزین
در صورت استفاده از مدل جعبه جایگزین، عرض واقعی یک عنصر مقدار عرضی است که به آن منتقل می‌شود و همین موضوع برای ارتفاع نیز صادق است. نیازی به اضافه کردن پوشش و حاشیه هنگام محاسبه اندازه واقعی جعبه وجود ندارد.
برای فعال‌سازی یا روشن کردن مدل جعبه جایگزین برای یک عنصر، شما باید box-sizing: border-box را روی آن تنظیم کنید. به دستور زیر مراجعه کنید:
.box {
box-sizing: border-box;
}ما همان ابعاد جعبه را که در مثال بالا ذکر شده است در نظر می‌گیریم و فضای واقعی مصرفی توسط جعبه را محاسبه می‌کنیم:
.box {
width: 300px;
height: 100px;
margin: 20px;
padding: 15px;
border: 5px solid green;
}فضایی که توسط جعبه با ابعاد فوق گرفته شده‌است:
مجموع عرض = عرض = 300px
مجموع ارتفاع = ارتفاع = 100px
<html>
<head>
<style>
.box {
width: 300px;
height: 100px;
margin: 20px;
padding: 15px;
border: 5px solid green;
background-color: aquamarine;
}
.alternative-model {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<h3>Standard box model</h3>
<p>Total width=300+15+15+5+5=340px</p>
<p>Total height=100+15+15+5+5=140px</p>
</div>
<div class="box alternative-model">
<h3>Alternative box model</h3>
<p>Total width=300px / height=100px</p>
</div>
</body>
</html> این مثال دو نوع مدل جعبه استاندارد و جعبه جایگزین را نشان می‌دهد. در اینجا توضیحات مربوط به هر کدام:
در این مثال، جعبه‌ها با عرض ۳۰۰ پیکسل، ارتفاع ۱۰۰ پیکسل، همراه با ۲۰ پیکسل حاشیه، ۱۵ پیکسل پرشده، و ۵ پیکسل حاشیه‌ی دور اطراف و یک حاشیه سبک رنگی ایجاد شده‌اند. اما با استفاده از مدل جعبه جایگزین، این پرشده‌ها و حاشیه‌ها دخالتی در محاسبات اندازه‌گیری نخواهند داشت و اندازه کلی جعبه‌ها همان مقدار عرض و ارتفاع مشخص شده خواهد بود.
Borders, Padding and Margins
حیطه‌های مهم مدل جعبه شامل حاشیه‌ها، پرشده‌ها و حاشیه‌ها هستند.
حاشیه‌ها حاشیه بین حاشیه و پرشده‌ی یک جعبه قرار دارد. انواعی از خواص CSS وجود دارند که برای استایل دادن به چهار حاشیه استفاده می‌شود، هر یک از این حاشیه‌ها یک استایل، عرض و رنگ دارد که می‌توان آنها را تغییر داد.
Border
شما می‌توانید از ویژگی border استفاده کنید تا عرض، استایل یا رنگ حاشیه‌ها را تنظیم کنید. این ویژگی مختصری برای حاشیه‌ها است.
همه ویژگی‌های مربوط به حاشیه در جدول زیر لیست شده‌اند:
border ویژگی مختصر برای تنظیم تمام ویژگی‌های حاشیه در یک اظهار نامه است
border-bottom ویژگی مختصر برای تنظیم حاشیه پایینی یک عنصر است.
border-bottom-color رنگ حاشیه پایینی یک عنصر را تنظیم می‌کند.
border-bottom-width عرض حاشیه پایینی یک عنصر را تنظیم می‌کند.
border-bottom-style استایل حاشیه پایینی یک عنصر را تنظیم می‌کند.
border-color ویژگی مختصر برای تنظیم رنگ حاشیه یک عنصر است.
border-left ویژگی مختصر برای تنظیم حاشیه چپ یک عنصر است.
border-left-color رنگ حاشیه چپ یک عنصر را تنظیم می‌کند.
border-left-width عرض حاشیه چپ یک عنصر را تنظیم می‌کند.
border-left-style استایل حاشیه چپ یک عنصر را تنظیم می‌کند.
border-right ویژگی مختصر برای تنظیم حاشیه راست یک عنصر است.
border-right-color رنگ حاشیه راست یک عنصر را تنظیم می‌کند.
border-right-width عرض حاشیه راست یک عنصر را تنظیم می‌کند.
border-right-style استایل حاشیه راست یک عنصر را تنظیم می‌کند.
border-style ویژگی مختصر برای تنظیم استایل حاشیه یک عنصر است
border-top ویژگی مختصر برای تنظیم حاشیه بالایی یک عنصر است.
border-top-color رنگ حاشیه بالایی یک عنصر را تنظیم می‌کند.
border-top-width عرض حاشیه بالایی یک عنصر را تنظیم می‌کند.
border-top-style استایل حاشیه بالایی یک عنصر را تنظیم می‌کند.
border-width ویژگی مختصر برای تنظیم عرض حاشیه یک عنصر است.
Padding
پرشینگ (Padding) منطقه‌ای بین مرز و محتوا است. این فضا محتوا را از مرز دور می‌کند. پرشینگ نمی‌تواند مقادیر منفی داشته باشد و زمانی که هر پس‌زمینه‌ای به عنصر اعمال می‌شود، پشت پرشینگ نمایش داده می‌شود.
ویژگی پرشینگ می‌تواند برای هر چهار طرف عنصر (بالا، راست، پایین و چپ) با استفاده از نوشتار مختصر یا به طور جداگانه برای هر طرف با استفاده از ویژگی‌های خاص تنظیم شود.
تمام ویژگی‌های مربوط به پرشینگ در جدول زیر آمده است:
padding ویژگی مختصری است که برای تنظیم تمام ویژگی‌های پرشینگ در یک اعلان استفاده می‌شود.
padding-top پرشینگ بالای عنصر را تنظیم می‌کند.
padding-right پرشینگ راست عنصر را تنظیم می‌کند.
padding-bottom پرشینگ پایین عنصر را تنظیم می‌کند.
padding-left پرشینگ چپ عنصر را تنظیم می‌کند.
Margin
حاشیه (Margin) فضایی نامرئی است که اطراف جعبه قرار دارد و عناصر را از جعبه دور می‌کند. ویژگی حاشیه در تنظیم طرح عناصر در یک صفحه وب مفید است.
ویژگی حاشیه می‌تواند برای هر چهار طرف عنصر (بالا، راست، پایین و چپ) با استفاده از نوشتار مختصر یا به طور جداگانه برای هر طرف با استفاده از ویژگی‌های خاص تنظیم شود.
مقادیر مثبت و منفی می‌توانند به ویژگی حاشیه انتقال داده شوند. مقدار منفی ممکن است منجر به همپوشانی عنصر شود. در محاسبه فضای کلی که توسط یک عنصر اشغال می‌شود، حاشیه را محاسبه نمی‌کند، به هر دو مدل جعبه استاندارد یا جعبه جایگزین.
تمام ویژگی‌های مربوط به حاشیه در جدول زیر آمده است:
margin-shorthand ویژگی مختصری است که برای تنظیم تمام ویژگی‌های حاشیه در یک اعلان استفاده می‌شود.
margin-top حاشیه بالایی عنصر را تنظیم می‌کند.
margin-right حاشیه راستی عنصر را تنظیم می‌کند.
margin-bottom حاشیه پایینی عنصر را تنظیم می‌کند.
margin-left حاشیه چپی عنصر را تنظیم می‌کند.
زمانی که یک عنصر دو حاشیه مثبت دارد، این دو حاشیه به یکدیگر می‌پیوندند و یک حاشیه تشکیل می‌دهند؛ جایی که اندازه حاشیه برابر با بزرگترین حاشیه فردی است.
زمانی که یک عنصر دو حاشیه منفی دارد، آنها همپوشانی خواهند کرد؛ جایی که اندازه حاشیه برابر با کوچکترین حاشیه فردی است.
زمانی که یک عنصر حاشیه منفی دارد، مقدار منفی از مقدار کل کم خواهد شد.
Box model and inline boxes
مدل جعبه و جعبه‌های خطی عناصر خطی همچنین دارای جعبه‌هایی حول خود هستند. آنها همچنین دارای حاشیه، پرشینگ، مرزها، مانند هر جعبه دیگری هستند.
مثال در اینجا یک مثال ارائه شده که جعبه‌ی مدل اطراف یک عنصر خطی <p> توضیح داده شده است. برای جزئیات بیشتر به نمودار مراجعه کنید.
<html>
<head>
<style>
p {
padding: 1em 2em;
margin: 5px 10px;
border: 5px solid red;
width: 200px;
}
</style>
</head>
<body>
<h1>مدل جعبه</h1>
<p>مثالی برای یک مدل جعبه.</p>
</body>
</html>
Display : inline-block
نمایش: inline-block یک عنصر با ویژگی display: inline-block، ارزش‌های عرض و ارتفاع را رعایت می‌کند. و مقادیر پرشینگ، مرز و حاشیه از دیگر عناصر دیگر، از جعبه دور می‌کند.
این ویژگی در مواردی کاربرد دارد که می‌خواهید یک منطقه بزرگتر به یک عنصر دهید، به عنوان مثال، یک لینک <a>. شما می‌توانید از display: inline-block برای آن عنصر استفاده کنید همراه با padding و دیگر ویژگی‌های مرتبط.
مثال در اینجا یک مثال است:
<html>
<head>
<style>
a {
padding: 1em 2em;
margin: 5px 10px;
border: 5px solid red;
width: 50px;
display: inline-block;
background-color: beige;
font-size: 1em;
}
</style>
</head>
<body>
<h1>display: inline-block</h1>
<a href="">First</a>
<a href="">Second</a>
<a href="">Third</a>
</body>
</html>در اینجا یک مثال از یک المان خطی است:
<html>
<head>
<style>
a {
padding: 0em 2em;
margin: 10px 10px;
border: 5px solid red;
width: 50px;
background-color: beige;
font-size: 1em;
}
</style>
</head>
<body>
<p>نمایش:inline-block ارتفاع عنصر را رعایت می‌کند. اینجا بر روی لینک <a href="">First</a> اعمال شده است.
همانطور که مقدار پرشینگ، مارجین یا/و مرز را تغییر می‌دهید، تغییر را مشاهده می‌کنید.</p>
</body>
</html>می‌توانید مارجین، پرشینگ یا/و مرز را کاهش دهید تا تغییر در عناصر خطی را مشاهده کنید.
Block and inline boxes
بلوک و جعبه‌های خطی CSS انواع مختلفی از جعبه‌ها را ارائه می‌دهد که یا جعبه‌های بلوک یا جعبه‌های خطی هستند. روش نمایش این جعبه‌ها، می‌تواند از دو نوع باشد: نوع نمایش داخلی و نوع نمایش خارجی.
نمایش یک جعبه می‌تواند با استفاده از ویژگی display در CSS تنظیم شود که مقادیر مختلفی دارد. بر اساس این مقادیر، نمایش مشخص می‌شود.
برای درک بهتر از display: block | inline به نمودار مراجعه کنید.
نوع نمایش خارجی – بلوک وقتی که نوع نمایش یک جعبه بلوک است، می‌توانید موارد زیر را مشاهده کنید:
ارزش‌های ویژگی‌های عرض و ارتفاع را رعایت می‌کند.
جعبه به یک خط جدید می‌شکند.
مقادیر پرشینگ، مارجین و مرز از سایر عناصر دیگر دور می‌شود.
در صورت عدم تعیین مقدار ویژگی عرض، جعبه فضای کانتینر را تشکیل می‌دهد و 100٪ از فضای آن را پر می‌کند.
به طور پیش‌فرض، عناصر HTML مانند <h1>، <p> و غیره از نوع بلوک به عنوان نوع نمایش خارجی خود استفاده می‌کنند.
نوع نمایش خارجی – خطی وقتی که نوع نمایش یک جعبه خطی است، می‌توانید موارد زیر را مشاهده کنید:
ارزش‌های ویژگی‌های عرض و ارتفاع را رعایت نمی‌کند و بنابراین اعمال نمی‌شود.
جعبه به یک خط جدید نمی‌شکند.
پرشینگ، مارجین‌ها و مرزهای بالا و پایین اعمال می‌شود اما باعث جابجایی سایر جعبه‌های خطی از جعبه نمی‌شود.
پرشینگ، مارجین‌ها و مرزهای چپ و راست اعمال می‌شود و باعث جابجایی سایر جعبه‌های خطی می‌شود.
به طور پیش‌فرض، عناصر HTML مانند <a>، <em>، <span>، <strong> و غیره از نوع خطی به عنوان نوع نمایش خارجی خود استفاده می‌کنند.
نوع نمایش داخلی به طور پیش‌فرض، طرح‌بندی عناصر یا جعبه‌ها بلوک و خطی است، اما نوع نمایش داخلی می‌تواند با استفاده از مقادیر ویژگی display تغییر کند؛ به عنوان مثال، display: flex | grid. عنصر خارجی نوع نمایش بلوک خواهد داشت، اما نمایش داخلی به flex | grid تغییر خواهد کرد. فرزندان مستقیم این عنصر، نوع نمایش را به صورت flex خواهند داشت.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام