دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۳۰
  • مهر

جلسه ۱۹ : width و max-width در CSS

  • دسته‌بندی‌ها :
جلسه ۱۹ : width و max-width در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. تا قبل از معرفی CSS یکی از خصوصیات عناصر HTML که در داخل خود عناصر مشخص می شد خصوصیت width (عرض عناصر) بود، این ویژگی به دلیل تعیین عرض عناصر HTML در صفحات وب بسیار مهم است. با معرفی CSS امکان تعریف width در CSS نیز فراهم شد. همچنین ویژگی max-width در CSS نیز معرفی شد، همانطور که از نام آن پیداست این خصوصیت برای تعیین حداکثر عرض عناصر کاربرد دارد. ویژگی max-width در موارد Responsive کردن صفحات وب کاربرد فراوانی دارد. برای آشنایی بیشتر با صفات width و max-width در CSS  در ادامه ی این مبحث با ما همراه باشید.

      صفات width و max-width در CSS

      در این بخش ما به شما نحوه استفاده صحیح از صفات width و max-width در CSS را آموزش خواهیم داد.

      استفاده ی صحیح از width در CSS

      همانطور که قبلا نیز اشاره کردیم باید توجه داشته باشید که یک عنصر سطح block همیشه عرض کامل را در اختیار شما قرار می دهد.

      اما تنظیم width در یک عنصر سطح block از خارج شدن عنصر از لبه های عنصر والد خود جلوگیری می کند.

      سپس با قرار دادن margin در حالت auto فضای اضافی در حاشیه های خارجی عنصر تقسیم می شود.

      با تنظیم width در CSS و انجام اقدامات فوق عنصر مربوطه بصورت افقی و منظم در عنصر والد آن تنظیم می شود.

      width در CSS

      width در CSS

      نکته :

      مشکل در <div> بالا زمانی رخ می دهد که پنجره مرورگر کوچکتر از عرض عنصر باشد.

      در حالت فوق مرورگر یک اسکرول افقی را به صفحه اضافه می کند.

      کاربرد ویژگی max-width در CSS

      اگر بجای width از max-width در CSS استفاده شود، باعث تنظیم خودکار عرض عنصر با اندازه های مختلف پنجره ی مرورگر می شود.

      max-width به دلیل تنظیم خودکار عرض ، در تکنیک Responsive و نمایش صفحه وب در دستگاه های کوچکتر کاربرد بسیاری دارد.

      ویژگی max-width در CSS

      ویژگی max-width در CSS

      کد ایجاد دو div فوق به صورت زیر خواهد بود:

      مثال : حداکثر عرض
      خودتان امتحان کنید »

      کلام آخر

      width و max-width در CSS دو ویژگی تعیین کننده ی عرض عناصر در صفحات وب بوده و تعیین آن ها در مرتب سازی و طراحی صفحه وب ضروری است. ویژگی max-width در CSS امروزه به دلیل ایجاد ویژگی Responsive بسیار پر کاربرد است.

      QR: جلسه ۱۹ : width و max-width در CSS
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر

        mohsen11astane

        بهمن ۱۲, ۱۳۹۸

        مرسی داش
        کدای مربوط به max-width رو توی نت پد قرار دادم و کلی تغییرشون دادم تا رفتارشونو توی پنجره های مختلف ببینم. برای div دومی یک img و یک p تعریف کردم. استایلاشو مدام تغییر دادم تا رفتارهاشو ببینم. برای تصویر min-width 450 و max-width 450 قرار دادم تا رفتارشو مشاهده بکنم. margin شو auto قرار دادم و displayشو block. برای تگ p هم padding 20px و text-alignشو justify قرار دادم. background-colorشو رو هم ddd# قرار دادم. فونت سایزش رو هم ۲۰ پیکسل گذاشتم. برای تگ div عنصر والدش هم marginشو auto و border-radiusشو ۶ پیکسل و overflowشو هم auto قرار دادم. همچنین عرض ۵۰۰ پیکسلی رو به ۴۵۰ تغییر دادم. واقعا جالبه. هر چقدر بیشتر با کدا بازی می کنه و ور میری نتیجه بهتری می گیری.
        Practice Makes Perfect

        پاسخ دادن
      2. تصویر کاربر

        mohsen11astane

        بهمن ۱۲, ۱۳۹۸

        نکته مهمی که از قلم انداختم —> برای تمام عناصر مارجین و پدینگو صفر قرار دادم تا استایلهای پیش فرضی که مرورگرها به عناصر صفحه میدن رو از بین ببرم.
        *{
        padding: 0;
        margin: 0;
        }

        پاسخ دادن

      لیست مطالب دوره

      مطالب ویژه