عرض و ارتفاع

عرض و ارتفاع در css

همانطور که پیش تر اشاره کردیم تگ های html را می تواینم با css استایل دهی کنیم و برای آن ها خصوصیات مختلفی از قبیل: float, position, color, background-color …. در نظر گرفت.

دو تا از مهمترین خصوصیت تگ های html که اکنون به معرفی ان ها می پردازیم width  و height می باشند. width به ما قابلیت کنترل عرض تگ و height قابلیت کنترل ارتفاع تگ را می دهد.
box-model-standard
4 خاصیت زیر مجموعه نیز وجود دارند که به ما قابلیت کنترل عرض و ارتفاع را می دهند که در ادامه با آن ها آشنا می شویم.

Min-height: این خصوصیت به ما اجازه می دهد تا یک ارتفاع minimum برای تگ html انتخاب کنیم که در صورت بیشتر شدن محتوای داخل آن ارتفاعش بیشتر خواهد شد.

Max-height: این خصوصیت به ما اجازه میدهد یک ارتفاع maximum برای تگ html انتخاب کنیم که در صورت بیشتر شدن محتوا ارتفاع تگ ثابت خواهد ماند.

Min-width و max-width: این دو خصوصیت نیز مانند min-height  و max-height می باشند اما برای کنترل عرض مورد استفاده قرار می گیرند.

شما می توانید مقدار width و height  و چهار زیر مجموعه آن ها را برای هر عنصر html با (px , em , vw , % , …) مقداردهی کنید .همچنین می توانید ارتفاع را Auto قرار داده تا هر آنچه می خواهید در باکس مورد نظر قرار دهید، که با این کار مقدار عرض و ارتفاع وابسته به محتوا متغیر می گردد.

 

نحوه مقدار دهی عرض و ارتفاع در زیر نمایش داده شده است:

element{

width:700px; یا width:7em; یا width:70%; یا width:7vw;

height:20em; یا height:40%; یا height:5vw; یا height:200px;

}

عناصر block به صورت پیش فرض تمام عرض والد خود را دارا می باشند. اما شما با صفت width می توانید درصدی از عرض والد را برای عنصر فرزند در نظر بگیرید.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *