سبد خرید 0

وبلاگ

CSS Box Model

تمامی المان های موجود در html به صورت یک جعبه چهار گوش در نظر گرفته می شوند که دارای خصوصیات زیر هستند :

عرض (width)

ارتفاع (height)

فاصله از بیرون (margin)

فاصله از درون (padding)

حاشیه (border)

عرض (width):

عرض بعضی از المان ها به صورت پیش فرض کل عرض مرورگر می شود مثل تگ div ، حتی اگر در تگ div یک کاراکتر قرار بگیرد باز هم اندازه عرض آن 100 درصد عرض مرورگر می باشد و کل سطر را می گیرد .

اما بعضی دیگر از المان ها اندازه عرض آنها به اندازه مقدار داده موجود در آنها می باشد مثل تگ span .

Max-width :

حداکثر عرض المان را تعیین می کند .عرض المان هیچگاه از مقدار تعیین شده max-width بیشتر نمی شود .

دستور css بالا باعث می شود عرض المان های div هیچگاه از 200px بیشتر نشود .

سازگاری مرورگر ها با max-width :

Min-width :

حداقل عرض المان را تعیین می کند .عرض المان هیچگاه از اندازه تعیین شده کمتر نخواهد شد .

دستور فوق باعث می شود اندازه عرض المان های div حداقل 100px باشد حتی اگر امیل هیچ محتوایی نباشد .

سازگاری مرورگرها با min-width :

ارتفاع (height) :

اندازه ارتفاع همه تگ های html به صورت پیش فرض به اندازه مقدار داده ای می باشد که در آن قرار دارد.امکان تغییر آن از طریق css هست.

Max-height :

حداکثر ارتفاع المان را تعیین میکند .ارتفاع المان هیچگاه بیشتر از مقدار تعیین شده نخواهد شد .

دستور فوق باعث می شود ارتفاع المان های div هیچگاه بیشتر از 300px نخواهد شد .

سازگاری مرورگرها با max-height :

Min-height :

حداقل ارتفاع المان را تعیین میکند .ارتفاع المان هیچگاه کمتر از مقدار تعیین شده نخواهد شد حتی اگر شامل هیچ محتوایی نباشد .

سازگاری مرورگرها با min-height :

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

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

keyboard_arrow_up