CSS Box Model

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

عرض (width)

ارتفاع (height)

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

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

حاشیه (border)

عرض (width):

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

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

Max-width :

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

Div{max-width:200px}

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

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

Min-width :

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

Div {min-width:100px}

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

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

 

ارتفاع (height) :

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

Max-height :

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

Div{max-height:300px}

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

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

Min-height :

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

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


توسط : عثمان رحیمی  3 ماه قبل ، سه شنبه 4 شهریور 1393 ساعت 05:51  0  751

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط