پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
صفت width همانطور که از نام آن پیداست، برای تعیین عرض عناصر استفاده می شود.
و Max-width میتواند یک عرض حداکثری برای عناصر مشخص کند.
این صفات را نیز میتوان جزو تنظیمات display به حساب آورد.
در آموزش امروز نحوه کدنویسی و کار با این صفات را با هم مرور خواهیم کرد.
همراه ما باشید.
با سلام خدمت همراان همیشگی سایت پرنیان طرح
در ادامه سری آموزش های css، امروز به مبحث width و max-width در css خواهیم پرداخت.
با ماهمراه باشید تا نحوه کدنویسی برای ین ویژگی ها و کار با آنها را باهم مرور کنیم.
در مبحث display گفته شد که عناصری که صفت block دارند،همه فضای آزاد موجود در یک خط را اشغال میکنند. یعنی تا حد امکان از سمت چپ و راست، کشیده می شوند.
صفت Width
تنظیم این صفت به شما کمک میکند که برای یک عنصر block، تعیین کنید که در تمام خط کشیده نشود. یا به عبارت دیگر شما می تواندی عناصر block را با مقداردهی این صفت، محدود و کنترل کنید.
در این صورت میتوانید صفت margin را برای عنصر؛ با auto مقداردهی کنید. این باعث میشود که عنصر به صورت خودکار در مرکز افقی صفحه قرار بگیرد.
یک نکته مهم
در این حالت ، یک مشکل وجود درد. مشکل این است که در این روش، اگر پهنای عنصر از صفحه موجود بزرگتر باشد، یک نوار اسکرول(پیمایش) افقی به صفحه اضافه می شود. تا مرورگر تواند این عنصر و محتویات آن را به درستی نمایش دهد.
در تصویر زیر میتوانید نمونه اضافه شدن نوار اسکرول افقی را مشاهده کنید.
درست است که اضافه شدن نوار اسکرول افقی ، چندان جالب نیست.
اما نگران نباشید.
css قدرتمند، برای حل این مشکل نیز چاره ای در نظر درد.
برای این کار شما میتوانید از صفت max-width استفاده کنید.
max-width حداکثر پهنای عنصر را مشخص میکند. عنصر میتواند دارای پهنای کمتر از max-width باشد. اما نمیتواند مقداری بیشتر از آن را دربربگیرد.
این ویژگی زمانی تفاوت خود را نشان میدهد. که میخواهید عنصر، همراه با تغییر اندازه صفحه نمایش، تغییر سایز دهد.
در این حالت، مرورگر میتواند مدیریت بهتری روی نمایش عنصر داشته باشد.
مثلا وقتی که از موبایل برای نمایش صفحات وب سایت استفاده می شود.
تصویر زیر ، نتیجه را نمایش می دهد.
کدنویسی برای موارد گفته شده در بالا به صورت زیرخ واهد بود.
فقط کافیست تکه کدهای زیر را در بخش مربوط به css وارد کنید.
[php]
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
[/php]
در تکه کد بالا هر دو حالت width و max-width را در یک کد میبینید. شما میتوانید نتیجه هر دو کد را از طریق این لینک ببینید. و خودتان آنرا امتحان کنید. بخش div.ex1 نتیجه عملکرد width را نمایش خواهد داد. و div.ex2 نمایش عملکرد max-width خواهد بود. شما میتوانید با نگه داشتن کلید ctrl و همزمان اسکرول کردن دکمه غلطان ماوس تغییرات را مشاهده کنید.
