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

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

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

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

CSS Box Model

باکس محتوا (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;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد

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

باکس مرز (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;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد

باکس حاشیه (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;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد

همانطور که در بالا مشاهده می‌کنید 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;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد

همانطورکه در بالا مشاهده کردید با استفاده از 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 هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد

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

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