این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با ویژگی های Height و Width در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی های Height و Width در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ویژگی های Height و Width در CSS
ویژگی های Height و Width همونطور که مشخصه اولی برای تنظیم اندازه ارتفاع و دومی برای تنظیم اندازه عرض یک تگ بکار برده می شوند.
یادتون باشه همیشه ویژگی های Border و Padding روی اندازه اصلی یک تگ تاثیر میزاره، یعنی اگه من بفرض مثال به تگ P مقدار ۵ پیکسل بوردر ( Border ) و ۱۰ پیکسل پدینگ ( Padding ) بدم همه ی اینها روهم محاسبه میشن و در نتیجه همشون روی اندازه اصلی ( Width و Height ) تاثیر میزارن.
در جلسه بعدی مفصل در مورد همین جریان ( مدل باکس ) تاثیر گذاشتن اندازه ویژگی های Border و Padding روی اندازه اصلی یک تگ صحبت میکنم که پیشنهاد میکنم حتما جلسه بعدی رو دنبال کنید.
Free-Learn
مثال از ویژگی های Height و Width در CSS
مثال شماره ۱ : مشخص کردن فقط اندازه عرض و ارتفاع تگ
|
1 2 3 4 |
div{ width:200px; height:70px; } |
مثال شماره ۲ : همون مثال شماره ۱ هس فقط اینجا اومدیم و Border و Padding اضافه کردیم
|
1 2 3 4 5 6 |
div{ width:200px; height:70px; border:2px solid black; padding:10px; } |
Free-Learn
تفکیک اندازه ها از همدیگه
خب همونطور که اشاره کردم ، اندازه های ویژگی های Border و Padding روی اندازه اصلی یک تگ تاثیر میزارن، حال برای رفع این مشکل ما باید از ویژگی box-sizing در CSS استفاده کنیم.
ویژگی box-sizing میاد و اندازه هارو از همدیگه تفکیک میکنه و دیگه نمیزاره اندازه ها روی همدیگه تاثیر بزارن، به همین سادگی و تموم شد رفت.
مثال : همون مثال های قبلی هستن فقط اینبار از ویژگی box-sizing استفاده شده
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .box-1{ width:200px; height:70px; border:5px solid black; padding:10px; box-sizing: border-box; } .box-2{ width:200px; height:70px; border:5px solid black; padding:15px; box-sizing: border-box; } </style> |
