آموزش دور قاب CSS

آموزش Box در Css

تمامی عناصر 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 را نیز اضافه کنید.

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

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;‎

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

250 px(پهنا)

+ 20 px (چپ و راست padding )

+ 10 px (چپ و راست border )

+ 20 px(چپ و راست margin )

= 300 px

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

            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>
        < html lang="en" xmlns="http://www.w3.org/1999/xhtml">‎
        < html>
        ‎< head>
    ‎    < style type="text/css">
             div.ex ‎ {
                 width: 220px;
                 padding: 10px;
                 border: 5px solid gray;
                 margin: 0px;
             }
             ‎
        < /style>
        ‎< /head>‎
        < /html>