خب توی این جلسه از آموزش CSS میخوایم به مباحث عرض و ارتفاع برسیم . عرض با width مشخص میشه و ارتفاع هم با height . حالا همین دو تا کلی باهاشون کار داریم ! یه مشخصه دیگه هم داریم max-width و min-height . این ها هم همونطوری که حدس میزنین میان حداکثر عرض و حداقل ارتفاع رو برای المان مشخص میکنن.
واحدهایی هم که میتونیم برای این مقادیر استفاده کنیم یا به درصد میزنیم یا مقدار px – cm و … مشخص میشه و یا auto و یکی بیخودی هم ! inherit و آخری هم initial. موارد درصد رو کمی بهش رسیدگی کردیم در جلسه های قبلی . برای واحد هم که تا الان میدونین باید چیکار کرد ! auto هم که توی قسمت حاشیه های خارجی یاد گرفتیم ! همینطور هم inherit که میاد از المان بالایی ارث بری میکنه ! قسمت مقدار initial هم خیلی راحته ! میاد المان رو به مقدار اولیه اش ست میکنه ! چند تا مثال ببینیم :
<div style="width:50%;height:200px;padding:10px;background-color:powderblue;color:black;">
این المان عرض 50 درصد و ارتفاع ۲۰۰ پیکسل داره !</div>
<div style="height:100px;width:500px;padding:10px;background-color:powderblue;color:black">
این یکی المان عرض ۵۰۰ پیکسل و ارتفاع ۱۰۰ پیکسل داره !</div>
نکته ای که باید بدونین این هست که این عرض و ارتفاع شامل مقادیر ویژگی های padding و margin نمیشه ! اون ها هم روی عرض و ارتفاع المان تاثیر میذارن و تغییر میدن این مقادیر رو .
تنظیم کردن max-width
خب این ویژگی هم میاد بیشترین عرضی که المان میتونه داشته باشه رو تنظیم میکنه. واحدهایی که میتونه دریافت کنه به پیکسل و درصد و سانتی متر و … هستش . مقدار تهی هم میتونیم بهش بدیم یعنی مقدار none که یعنی هیچی براش تعریف نمیکنیم و بیشترین عرض نداره !
خب حالا اصلا کی ازین استفاده میکنیم !؟ ببینین وقتی المان ما یه عرضی بهش میدیم بعد میایم میبینم توی یک دیوایس های خاص یا کوچیکتر از حدی که ما بهش کد دادیم عملکرد درستی نداره و درست نشون نمیده . اینجاس که max-width به دادمون میرسه و میاد به مرورگر میگه این المان رو بیشترین عرضی که بهش میدی اینقدر باشه ها ! اگر عرض صفحه بیشتر میخواست بشه نکن این کار رو !
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
تنظیم کردن min-height
این ویژگی شیرین توی CSS هم خیلی بکارمون میاد ! زمانی هست که ما میخوایم یه حداقل ارتفاعی برای المان تعریف کنیم و بگیم از این حداقل شروع کن اگه ارتفاع المان کمتر ازین مقدار باشه که هیچی ! اگه بیشتر شد بیا زیادترش کن و هرچقدر شده بهش فضا بده . حالا بستگی داره چقدر داخلش مطلب و المان و ازین چیزا ریخته باشیم !
div {
min-height: 500px;
height: 100px;
background-color: powderblue;
}
