عرض CSS

عرض CSS ، حداکثر و حداقل عرض از ویژگی های ظاهر طراحی شده هستند که به شما امکان می دهد ابعاد عنصر HTML را تعیین کنید.

تعریف عرض CSS برای عناصر

هنگامی که با طرح های CSS کار می کنید ، بسیار مهم است که بتوان ابعاد عناصر یک سند را دستکاری کرد. برای تعریف اینکه یک عنصر خاص به صورت افقی چقدر کشیده شده ، میتوانید از ویژگی CSS width استفاده کنید:

در CSS ، عرض عنصر را میتوان در واحدهای طولی (pt ، px ، cm و غیره) یا درصدهایی (٪) تعیین کرد. که عرض را در رابطه با بلوک حاوی عنصر توصیف می کند.

عرض یک مقدار ثابت است. به این معناست که به همان اندازه که شما تعیین کرده اید پهن خواهد ماند و در برابر تغییر اندازه پنجره یا مشاهده صفحه در صفحه های با اندازه متفاوت واکنش نشان نمیدهد. اگر عنصر با عرض مشخص ، اگر عرض کمتری داشته باشد ، می تواند ظرف اصلی را نیز سرریز کند.

در برخی موارد ، این ممکن است به طور منفی بر تجربه کاربر تأثیر بگذارد. به عنوان مثال ، ممکن است تصویری در یک صفحه کوچک قرار نگیرد و باعث شود وب سایت برای موبایل مناسب نباشد.

افزودن پاسخگویی با حداکثر عرض CSS و عرض حداقل

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

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

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

div.ex1 {
    width: 400px;
    margin: auto;
    border: 4px solid #256bdb;
}

div.ex2 {
    max-width: 400px;
    margin: auto;
    border: 4px solid #256bdb;
}

div.ex3 {
    min-width: 400px;
    margin: auto;
    border: 4px solid #256bdb;
}

نکات مهم عرض CSS:

• برای ویژگی CSS عرض دو مقدار آزمایشی وجود دارد: شما می توانید جعبه حاشیه یا جعبه محتوا را در نظر بگیرید تا عرض تعریف شده در واحد طول یا درصد در یک جعبه مشخص از عنصر اعمال شود.
• همیشه هنگام دستکاری اندازه متن با بزرگنمایی یا کوچک کردن ، حتماً نحوه رفتار عنصر خود را بررسی کنید.

پشتیبانی از مرورگرها

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.