آشنایی با width و max-width در CSS

همانطور که در فصل قبلی بیان شد یک عنصر block همیشه همه ی فضای موجود در یک خط را اشغال میکند(تا جای ممکن از طرف راست و چپ گسترده میشود). در این فصل به صفات width و ,max-width خواهیم پرداخت ....


استفاده صفت width و max-width

تنظیم صفت width برای یک عنصر block، مانع از گسترش آن در همه ی فضای یک خط میشود و در این صورت میتوانید مقدار صفت margin را برای آن عنصر با مقدار auto مقدار دهی کنید که باعث میشود عنصر مورد نظر به صورت افقی در مرکز container خود قرار بگیرد.

عنصر در این حالت به اندازه ی مشخصی فضا اشغال میکند و باقی مانده فضا به صورت مساوی بین دو margin سمت راست و چپ تقسیم میشود :

 

این عنصر <div> دارای مقدار 500 پیکسل برای صفت width است و مقدار margin برای آن با auto مقدار دهی شده است.

نکته : مشکلی که در <div> بالا وجود دارد این است که وقتی صفحه ی مرورگر کوچکتر از پهنای عنصر مورد نظر میشود، مرورگر نوار پیمایش افقی را به صفحه اضافه میکند تا بتواند همه  فضای div را نمایش دهد. 

 

برای حل این مشکل میتوان از صفت max-width به جای صفت width استفاده کرد.صفت max-width حداکثر پهنای عنصر را مشخص میکند.عنصر میتواند دارای پهنایی کمتر از مقدار max-width باشد اما نمیتواند دارای مقداری بزرگتر از آن باشد . این ویژگی وقتی مفید است که میخواهید صفحه متناسب با اندازه ی صفحه نمایش تغییر کند. در این صورت مرورگر قادر به مدیریت بهتر صفحه است، به خصوص در زمان هایی که صفحه در دستگاه های موبایل نمایش داده میشود:

 

این عنصر <div> دارای مقدار 500 پیکسل برای صفت max-width است و مقدار margin برای آن با auto مقدار دهی شده است.

 

با کوچک کردن صفحه ی مرورگر میتوانید تفاوت عناصر <div> بالا را مشاهد کنید.

در نمونه مثال زیر میتوانید تفاوت صفات width و max-width را در هنگام کوچک و بزرگ کردن صفحه مشاهده کنید : 

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}
خودتان امتحان کنید

 

منتشر شده در ۱۸ شهریور ۱۳۹۶ حمید رضا ملکی ۱۱۹۶ بازدید
دیدگاه ها
روح الله جمعه ۱۸ اسفند ۱۳۹۶

سلام: دمت گرم برام همه چیش مثل یه ارزو است تسلت برموضوع مخصوصا واقعا عالی شما یک استادید آرزوی سربلندی برای شما را دارم

حمید رضا ملکی دوشنبه ۲۸ اسفند ۱۳۹۶

ممنون این نظر لطف شماست و باعث دلگرمی ما.

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