CSS Box Model
تمامی المان های موجود در html به صورت یک جعبه چهار گوش در نظر گرفته می شوند که دارای خصوصیات زیر هستند :
عرض (width)
ارتفاع (height)
فاصله از بیرون (margin)
فاصله از درون (padding)
حاشیه (border)
عرض (width):
عرض بعضی از المان ها به صورت پیش فرض کل عرض مرورگر می شود مثل تگ div ، حتی اگر در تگ div یک کاراکتر قرار بگیرد باز هم اندازه عرض آن 100 درصد عرض مرورگر می باشد و کل سطر را می گیرد .
اما بعضی دیگر از المان ها اندازه عرض آنها به اندازه مقدار داده موجود در آنها می باشد مثل تگ span .
Max-width :
حداکثر عرض المان را تعیین می کند .عرض المان هیچگاه از مقدار تعیین شده max-width بیشتر نمی شود .
1 |
Div{max-width:200px} |
دستور css بالا باعث می شود عرض المان های div هیچگاه از 200px بیشتر نشود .
سازگاری مرورگر ها با max-width :
Min-width :
حداقل عرض المان را تعیین می کند .عرض المان هیچگاه از اندازه تعیین شده کمتر نخواهد شد .
1 |
Div {min-width:100px} |
دستور فوق باعث می شود اندازه عرض المان های div حداقل 100px باشد حتی اگر امیل هیچ محتوایی نباشد .
سازگاری مرورگرها با min-width :
ارتفاع (height) :
اندازه ارتفاع همه تگ های html به صورت پیش فرض به اندازه مقدار داده ای می باشد که در آن قرار دارد.امکان تغییر آن از طریق css هست.
Max-height :
حداکثر ارتفاع المان را تعیین میکند .ارتفاع المان هیچگاه بیشتر از مقدار تعیین شده نخواهد شد .
1 |
Div{max-height:300px} |
دستور فوق باعث می شود ارتفاع المان های div هیچگاه بیشتر از 300px نخواهد شد .
سازگاری مرورگرها با max-height :
Min-height :
حداقل ارتفاع المان را تعیین میکند .ارتفاع المان هیچگاه کمتر از مقدار تعیین شده نخواهد شد حتی اگر شامل هیچ محتوایی نباشد .
سازگاری مرورگرها با min-height :
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.