🎁 تخفیفات عیدانه دوره های آموزشی آتریا را از دست ندهید🎁

آموزش طراحی سایت - Height و Width در CSS

در این بخش از آموزش طراحی سایت به آموزش ویژگی های Height و Width در CSS می پردازیم.

آموزش طراحی سایت - Height و Width در CSS

در طراحی سایت و صفحات وب، تنظیم مناسب عرض و ارتفاع عناصر از اهمیت بسیار بالایی برخوردار است. این موضوع در طراحی responsive (واکنش گرا) به خوبی خودش را نشان می دهد و اگر ما دانش کافی برای تنظیم عرض و ارتفاع عناصر را نداشته باشیم، طراحی واکنش گرا بسیار سخت خواهد شد. به مثال زیر توجه کنید:

آموزش طراحی سایت

در این مثال با استفاده از ویژگی width عرض عنصر div را 100% تعیین کرده ایم. این بدان معناست که این عنصر تمام عرض صفحه را اشغال کند و هیچ عنصر دیگری را در کنار خود نپذیرد. نتیجه کد بالا به شکل زیر است:

آموزش طراحی سایت

تنظیمات ارتفاع و عرض در CSS

مشخصه های (ارتفاع) height و (عرض) width برای تنظیم کردن ارتفاع و عرض عنصرها به کار می روند. مشخصه های ارتفاع و عرض شامل padding, borders, margins  نمی شوند. بلکه در فضای داخل هر عنصر ارتفاع و عرض را مشخص می کنند.


مقادیر ارتفاع و عرض در CSS

  • auto  - این مقدار بصورت پیش فرض وجود دارد و مرورگر ارتفاع و عرض را بصورت خودکار تعیین می کند.
  • length  - ارتفاع یا عرض را در واحدهای px, cm و ... مشخص می کند.
  • %  - ارتفاع یا عرض را به صورت درصدی از بلاک کلی صفحه مشخص می کند.
  • initial  - با مقدار پیش فرض
  • inherit  - با استفاده از مقدار والد

برای درک بهتر این موضوع در طراحی سایت به مثال های زیر توجه کنید:

آموزش height و width در CSS

در مثال بالا، عنصر div شامل یک عرض 200px و ارتفاع 50% است. همینطور این بلاک را با رنگ powderblue رنگ کرده ایم که ابعاد آن مشخص باشد. نتیجه کد بالا به شکل زیر است:

آموزش طراحی سایت

max-width (حداکثر عرض) در css

در طراحی سایت، مشخصه max-width برای تنظیم کردن حداکثر عرض یک عنصر می باشد. این مشخصه می تواند در واحدهای طولی مانند پیکسل، سانتی متر و... و یا در واحد درصدی و یا بصورت none (که به این معنا می باشد که هیچ عرض حداکثری وجود ندارد) باشد. عنصر div در مثال بالا زمانی مشکل ساز می شود که پنجره ی مرورگر از عرض عنصر کوچک تر باشد (یعنی عرض مرورگر از 500px کمتر شود). سپس مرورگر یک آیتم عرضی اسکرول به صفحه اضافه می کند که اصلا برای سایت و تجربه کاربری کاربر مناسب نیست.

آموزش CSS

در این مثال عرض عنصر div 500px در نظر گرفته شده است:

آموزش CSS

نکته: توجه داشته باشید که مقدار مشخصه max-width ، width را نادیده می گیرد.

آموزش طراحی سایت

در این مثال نیز، مقدار max-width مساوی با 500px در نظر گرفته شده است، یعنی این عنصر تحت هر شرایطی نمی تواند بیش از 500px عرض با به خود اختصاص دهد:

آموزش CSS

حال به صورت خلاصه تمام مشخصه های Dimension در CSS را در جدول زیر آورده ایم:

آموزش CSS
آموزش طراحی سایت آموزش Height و Width در CSS آموزش CSS آموزش HTML آموزش عرض و ارتفاع در CSS

مقالات این دسته بندی