آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

دوره های مرتبط با این مقاله

آموزش Box در Css

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

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

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

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

Alternate Text

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

  • margin: نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است
  • border: یک border اطراف padding و content را می پوشاند. border، از رنگ پیش زمینه box تاثیر می گیرد
  • padding: نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد
  • content: محتوای box، یعنی جایی که متن و تصاویر ظاهر می شوند.

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

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

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

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

نمونه 1

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>
        
  • 3812
  •    1828
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .