آموزش کامل CSS قسمت هفتم

در این جلسه از آموزش های CSS به باکس مدل ها می‌ پردازیم.

باکس مدل چیست؟

در CSS وقتی صحبت از طراحی و لایه ها می شود Box Model ها جایگاه ویژه ای در کدهای ما خواهند داشت و بسیار پر کاربرد هستند. در یک توضیح ساده می توان گفت باکس مدل ها فضا و در اصطلاح جعبه ای است که در اطراف تمام عناصر HTML وجود دارد که به چهار مدل باکس محتوا (content box)، باکس لایه گذاری (padding box)، باکس مرز (border box) و باکس حاشیه (margin box) تقسیم می شوند.

باکس محتوا (content box)

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

باکس لایه گذاری (padding box)

اگر بخواهیم مقداری فضا برای پاراگراف دوم ایجاد کنیم باید از padding box استفاده کنیم و به عنوان مقدار نیز 20 پیکسل را برای آن درنظر می‌گیریم.

        body    { color:green;font-family:Arial black;font-weight:normal;background-color:#e9faff;
                  font-size:15px;}
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;padding:20px;}

همانطور که مشاهده می‌کنید پاراگراف دوم نسبت به قبل فضای بیشتری دور تا دور خود دارد.

باکس مرز (border box)

در این مرحله به این پاراگراف مرز اضافه می‌کنیم و برای اینکار به border box احتیاج داریم؛ این باکس، سه ویژگی border-color ، border-width و border-style را شامل می‌شود که مورد اول برای ضخامت بردار، مورد دوم برای رنگ بردار و مورد سوم برای استایل بردار است که مقدار solid را برای آن درنظر می‌گیریم.

        body    { color:green;font-family:Arial black;font-weight:normal;background-color:#e9faff;
                  font-size:15px;}
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;
                  padding:20px;
                  border-width:5px;
                  border-color:green;
                  border-style:solid;}

باکس حاشیه (margin box)

همانطور که متوجه شدید تا الان سه باکس از چهار باکس را توضیح دادیم اما margin box کجاست! دقیقا فضای بین border box و عناصر بالا و پایین آن و کناره های سایت را margin box تشکیل می‌دهد. این باکس بصورت خودکار همیشه مقداری فضا بین border box و لبه های سایت و بین عناصر قرار می‌دهد برای فهم بیشتر در این قسمت به margin box مقدار 50px را اختصاص می‌دهیم تا بهتر متوجه شوید.

        body    { color:green;font-family:Arial black;font-weight:normal;background-color:#e9faff;
                  font-size:15px;}
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;
                  padding:20px;
                  border-width:5px;
                  border-color:green;
                  border-style:solid;
                  margin:50px;}

همانطور که در بالا مشاهده می‌کنید border box از همه طرف فاصله بیشتری گرفته است. اگر بخواهیم قوانین border box و margin box در هر سمت عنصر موردنظر بصورت جداگانه اعمال شود باید هر کدام از پیشوند های top ، left، right ،bottom را به هر کدام از ویژگی های border یا margin اضافه کنیم. به عنوان مثال مقداری فضا در سمت چپ عنصر پاراگراف دوم اضافه می‌کنیم.

        body    { color:green;font-family:Arial black;font-weight:normal;background-color:#e9faff;
                  font-size:15px;}
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;
                  padding:20px;
                  border-width:5px;
                  border-color:green;
                  border-style:solid;
                  margin:50px;
                  padding-left:200px;}

همانطورکه در بالا مشاهده کردید با استفاده از padding box متن را به سمت راست کشیدیم و در سمت چپ فضای بیشتری ایجاد کردیم و همچنین پیش تر نیز گفتیم تمام عناصر، این چهار باکس را دارند پس عنصر body هم این باکس ها را دارد اگر این قوانین را در عنصر body قرار دهیم قوانین مانند مثال زیر برای کل صفحه اعمال می‌شود. در اینجا برای جلوگیری از شلوغی بیهوده بهتر است کدهای پاراگراف دوم را پاک کنیم.

        body    { color:green;font-family:Arial black;font-weight:normal;background-color:#e9faff;
                  font-size:15px; border-width:5px; border-color:green; border-style:solid;}
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;}

همانطور که در نتیجه بالا مشاهده می‌کنید دور تادورپیج مرز ایجاد کردیم.

• قسمت ششم آموزش CSS
• قسمت هشتم آموزش CSS