تغییر انداره طول و عرض height و width
درود مجدد خدمت شما علاقه مندان به آموزش طراحی سایت
علیرضا حاتمی نیا هستم و امروز با آموزش چگونگی تغییر اندازه ابعاد عناصر (height , width) در HTML و CSS در خدمت شما هستم .
برای تغییر اندازه ابعاد یک عنصر (طول و عرض) در صفحه از خصوصیت های CSS به شرح زیر استفاده می کنیم :
تغییر اندازه عرض :
width
max-width
min-width
تغییر اندازه ارتفاع:
height
max-height
min-height
در ادامه به توضیح خصوصیت های بالا و نحوه عملکرد ها آن ها و مقادیری که دریافت می کنند می پردازیم.
تغییر عرض عناصر:
width :
از خصوصیت width در CSS جهت تغیر اندازه عرض عنصر استفاده می شود.
مقدارهایی که width می گیرد به شرح زیر است :
auto: با این مقدار مروگر به صورت خودکار و با توجه به محتوا اندازه عرض عنصر را تعیین می کند.
length : تعیین اندازه عرض با توجه به واحد پیکسل (px) یا نقطه (pt)
% (درصد) : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه عرض والد و یا عنصر در برگیرنده آن عنصر می باشد.
width: auto;
width: 100px;
width: 50%;
max-width :
با مقداردهی max-width در CSS شما اندازه حداکثرعرض یک عنصر در صفحه را انتخاب می کنید.
مقدارهایی که max-width می گیرد به شرح زیر است :
none: این حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر نمی گیرد.
length: تعیین اندازه حداکثر عرض با توجه به واحد پیکسل (px) یا نقطه (pt)
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه عرض والد و یا عنصر در برگیرنده آن عنصر حداکثر عرض آن می باشد.
min-width :
با مقداردهی min-width در CSS اندازه حداقل عرض یک عنصر در صفحه را انتخاب می شود.
مقدارهایی که min-width می گیرد به شرح زیر است :
none: این حالت هيچ مقدار و محدوديتی برای حداقل عرض عنصر درنظر نمی گیرد.
length: با تعیین این مقدار حداقل عرض را بر حسب واحدی مانند پيکسل ( px ) يا نقطه ( pt ) انتخاب می کنيم .
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه عرص والد و یا عنصر در برگیرنده آن عنصر حداقل عرض آن می باشد.
تغییر اندازه ارتفاع یک عنصر در CSS :
height :
از خصوصیت height در CSS جهت تغیر اندازه ارتفاع یک عنصر استفاده می شود.
مقدارهایی که height می گیرد به شرح زیر است :
auto: با این مقدار مروگر به صورت خودکار و با توجه به محتوا اندازه ارتفاع عنصر را تعیین می کند.
length : تعیین اندازه ارتفاع با توجه به واحد پیکسل (px) یا نقطه (pt)
% (درصد) : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه ارتفاع والد و یا عنصر در برگیرنده آن عنصر می باشد.
height: auto;
height: 100px;
height: 50%;
max- height:
با مقداردهی max- height در CSS شما اندازه حداکثرارتفاع یک عنصر در صفحه را انتخاب می کنید.
مقدارهایی که max- height می گیرد به شرح زیر است :
none: این حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر نمی گیرد.
: length با تعیین این مقدار حداکثر ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) انتخاب می کنيم .
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه ارتفاع والد و یا عنصر در برگیرنده آن عنصر حداکثر عرض آن می باشد.
min-height :
با مقداردهی min-height در CSS اندازه حداقل ارتفاع یک عنصر در صفحه را تعیین می شود.
مقدارهایی که min-height می گیرد به شرح زیر است :
none: این حالت هيچ مقدار و محدوديتی برای حداقل ارتفاع عنصر درنظر نمی گیرد.
length: با تعینن این مقدار حداقل ارتفاع را بر حسب واحدی مانند پيکسل ( px ) يا نقطه ( pt ) انتخاب می کنيم .
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه ارتفاع والد و یا عنصر در برگیرنده آن عنصر حداقل ارتفاع آن می باشد.
آموزش این قسمت از طراحی سایت نیز پایان یافت. طبق روال همیشه یک فایل ویدویی برای این قسمت تهیه شده است که لینک دانلود و مشاهده آن را در ادامه خواهیم گذاشت.
نظرات کاربران