دور قاب (CSS Box Model)

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS، عبارت "box model" هنگام صحبت در مورد design و layout استفاده می شود.

CSS Box Model، الزاماً یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از: حاشیه ها، قاب ها (border)، padding، و محتوای واقعی.

box model، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.

تصویر زیر، box model را تشریح می کند:


توضیح بخش های مختلف:

margin: نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است

border: یک border اطراف padding و content را می پوشاند. border، از رنگ پیش زمینه box تاثیر می گیرد

padding: نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد

content: محتوای box، یعنی جاییکه متن و تصاویر ظاهر می شوند

به منظور تنظیم صحیح پهنا و ارتفاع عنصر در همه مرورگرها، باید بدانید box model چگونه کار می کند.

پهنا و ارتفاع عنصر

نکته مهم: هنگامی که پراپرتی پهنا و ارتفاع عنصر با CSS را تعیین می کنید، فقط پهنا و ارتفاع ناحیه content را تعیین می کنید. به منظور درک اندازه عنصر، همچنین باید padding، border، و margin را نیز اضافه کنید.

کل پهنای عنصر در مثال زیر، 300px است:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

 بیایید محاسبه ریاضی اش را هم انجام دهیم:

250px (پهنا)
+ 20px (چپ و راست padding )
+ 10px (چپ و راست border )
+ 20px (چپ و راست margin )
= 300px

تصور کنید فقط 250px فضا دارید. بیایید عنصری با پهنای کل بسازیم:

width:220px;
padding:10px;
border:5px solid gray;margin:0px;

 کل پهنای عنصر همیشه باید بصورت زیر برگزار شود:

کل پهنای عنصر = پهنا + padding چپ + padding راست + border چپ + border راست + margin چپ + margin راست

کل ارتفاع عنصر نیز باید بصورا زیر محاسبه شود:

کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + border بالا + border پایین + margin بالا + margin پایین

مبحث سازگاری مرورگرها

اگر مثال قبلی را در Internet Explorer امتحان کرده باشید، دیده اید که کل ارتفاع دقیقاً 250px نبود.

IE، هنگام تعیین پراپرتی پهنا، padding و border را در پهنا محاسبه می کند، مگر اینکه یک DOCTYPE تعریف شود.

برای حل این مشکل، کافیست یک DOCTYPE به کد اضافه کنید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{width:220px;
padding: 10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

 CSS Border

پراپرتی های CSS border، به شما اجازه تعیین استایل و رنگ border عنصر را می دهند.

استایل border

پراپرتی border-style، تعیین می کند چه نوع borderیی نمایش داده شود.

هیچ یک ازپراپرتی های border تا وقتی که پراپرتی border-style تنظیم نشوند، تاثیری نخواهند داشت!

valueهای border-style

none: بدون border

dotted: یک border نقطه چین تعریف می کند

dashed: یک border خط چین تعریف می کند

solid: یک border با خط صاف تعریف می کند

double: دو border تعریف می کند. پهنای این دو border، اندازه valueی border-width است

groove: یک border سه بعدی تعریف می کند. ابن افکت بستگی به valueی border-color دارد

پهنای border

پراپرتی border-width برای تنظیم پهنای border استفاده می شود.

پهنا به صورت پیکسل، یا با استفاده از یکی از valueی از پیش تعریف شده نازک، متوسط، و ضخیم تنظیم می شود.

نکته: پراپرتی border-width در صورتی که به تنهایی استفاده شود، موثر نخواهد بود. ابتدا از پراپرتی border-width برای تنظیم borderها استفاده کنید.

 

p.one
{border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

 رنگ border

پراپرتی border-color برای تنظیم border استفاده می شود. رنگ را می توان به طرق زیر تنظیم کرد:

  • نام – نام یک رنگ، مثلاً "قرمز"
  • RGB – مقدار RGB، مثلاً "rgb(255,0,0)"
  • Hex – مقدار Hex، مثلاً ""#ff0000

همچنین می توان رنگ border را به صورت "شفاف" نیز تنظیم کرد.

نکته: پراپرتی "border-color" در صورتی که به تنهایی استفاده شود، کار نمی کند. ابتدااز پراپرتی "border-style" جهت تنظیم borderها استفاده کنید.

p.one
{border-style:solid;
border-color:red;
}p.two
{border-style:solid;
border-color:#98bf21;
}

 Border – ضلع های مجزا

در CSS، ایجاد borderهای مختلف برای ضلع های مختلف ممکن است.

p
{border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

 مثال بالا را با یک پراپرتی واحد نیز می توان تنظیم کرد:

border-style:dotted solid;

 پراپرتی border-style ممکن است از یک تا چهار value داشته باشد.

  • border-style: dotted solid double dashed
    • border بالا، نقطه چین است
    • border سمت راست، خط صاف است
    • border پایین، دوبل است
    • border سمت چپ، خط چین است
  • border-style: dotted solid double
    • border بالا، نقطه چین است
    • border های سمت راست و چپ، خط صاف هستند
    • border پایین، دوبل است
  • border-style: dotted solid
    • border های سمت بالا و پایین، نقطه چین هستند
    • border های سمت راست و چپ، خط صاف هستند
  • border-style: dotted
    • همه borderها، خط صاف هستند