آموزش کار با Box Model؛ نشان دهنده محیط اطراف یک عنصر HTML! یادگیری Box Model برای هر توسعه دهنده سایت در ایجاد طراح هایی به روش دلخواه واقعا از اهمیت بالایی برخوردار است. شما ممکن است برای ایجاد چیدمان یا موقعیت عناصر در صفحه به دلیل کمبود دانش و تخصص درباره نحوه کار باکس مدل با مشکل روبرو شوید.
CSS یکی از بهترین زبان های برنامه نویسی در حوزه وب است که شامل بخش ها و قسمت های مختلفی است. باکس مدل یکی از بخش های مهم در زبان CSS است که شما می توانید از این بخش استفاده کرده و کارهای مختلفی انجام دهید. اگر قصد طراحی سایت در ارومیه را دارید، توصیه می کنیم تا با این بخش ها آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد Box Model در CSS برای شما ارائه کنیم و نحوه کار با باکس مدل را به طور کامل به شما یاد دهیم.
Box Model در CSS چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که Box Model چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Box Model یکی از بخش های مهم و کاربردی در CSS است که شما می توانید از باکس مدل استفاده کرده و کارهای مختلفی انجام دهید. توجه داشته باشید که تمامی تگ ها در یک صفحه وب حالت باکس مدل دارند و هر کدام از این باکس ها دارای برخی ویژگی ها و خصوصیات هستند. اگر می خواهید نحوه کار با باکس مدل را یاد بگیرید، پیشنهاد می کنیم تا در دوره آموزش CSS شرکت کنید.
جالب است بدانید، زمانی که در CSS صحبت از طراحی و لایه ها می شود، باکس مدل ها جایگاه ویژه ای در کدهای ما خواهند داشت و بسیار پرکاربرد هستند. در یک توضیح داده می توان گفت باکس مدل ها فضا و در اصطلاح جعبه ای هستند که در اطراف تمامی عناصر HTML وجود دارند که به چهار مدل باکس محتوا، باکس لایه گذاری، باکس مرز و باکس حاشیه تقسیم می شوند.
قسمت های مختلف باکس مدل
توجه داشته باشید که باکس مدل یکی از بخش های مهم در زبان CSS پس از آموزش کار با رنگ ها در CSS است که این بخش کمک زیادی به توسعه دهندگان می کند. باکس مدل(Box Model) شامل بخش های مختلفی است که می توانید از این بخش ها استفاده کنید. در ادامه سعی می کنیم تا به بررسی قسمت های مختلف باکس مدل بپردازیم:
• Margin: یکی از قسمت های مختلف باکس مدل، بخش Margin است. فضای خالی در خارج از محیط Box و مرز Border است که می توان اندازه آن را برای ضلع های مختلف به صورت کلی و یا جزء به جزء مشخص کرد.
• Border: این بخش تعیین کننده مرز خارجی Box یعنی خارج از محتوا و Padding است که می توان میزان ضخامت، رنگ و نوع آن را مشخص کرد. معمولا رنگ این قسمت از رنگ زمینه باکس مدل پیروی می کند.
• Padding: این قسمت فضای خالی بین محتوا و Border است که می توان اندازه آن را برای ضلع های مختلف به صورت کلی و یا جزء به جزء تعیین کرد.
مثال: در مثال زیر دو مورد باکس مدل CSS وجود دارد. در باکس اولی از ویژگی های Padding و Border استفاده نشده، ولی در باکس دومی از ویژگی های Padding و Border استفاده شده است:
<style>
.box-1{
background-color:#282a35;
width:200px;
height:70px;
}
.box-2{
background-color:#282a35;
width:200px;
height:70px;
border:5px solid black;
padding:10px;
}
</style>
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد Box Model در CSS برای شما ارائه کنیم و نحوه کار با باکس مدل را به طور کامل به شما یاد دهیم. همانطور که گفته شد، Box Model یکی از بخش های مهم و کاربردی در زبان CSS است که شما می توانید از آن استفاده کنید. اگر می خواهید نحوه کار با باکس مدل را یاد بگیرید، پیشنهاد می کنیم تا در دوره آموزش CSS شرکت کنید.
نظرات: