آشنایی با 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;
}
خودتان امتحان کنید

 

دیدگاه ها

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

دیدگاه های ارزشمند شما

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

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

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.