ورود ثبت نام

اندازه و فاصله در css

اندازه و فاصله در css
به نام خدا این بار میخواهیم اندازه و فاصله در css را به شما آموزش دهیم.این که چگونه اندازه ی دلخواه خود را به المان مورد نظر نسبت دهید.و البته گذری به فرمت اندازه ها را هم میگوییم.مثلا px , % , em.هر فرمت به نوع خود و جایگاه خود در صفحه تاثیر متفاوت خواهد گذاشت.اگر به این بخش دقت بیشتری داشته باشید در جلسات آینده مخصوصا بخش رسپانسیو به مشکل نخواهید خورد. با mosqdevelopers همراه باشید. در قسمت قبلی ما با فونت ها و رنگ ها در css آشنا شدیم.این بار میخواهیم به همان المان های رنگ شده اندازه بدهیم.و اگر چنتا المان بود بینشون فاصله بدیم!

اندازه و فاصله در css

اولین موردی که باید گفت width و height است. عرض و طول یک المان با این دو انجام میشود.width میتواند به اندازه ی کل پنجره ی مرورگر و حتی بیشتر از آن شود.ولی اگر بیشتر شود صفحه اسکرول افقی خواهید خورد.بیایید کدشو با هم ببینیم:
div{
	width:100px;
	height:100px;
}


یک div با طول و عرض 100px ساختیم و چون مرورگر ها به صورت پیشفرض انگلیسی هستند به خاطر همین چیدمان از سمت چپ شروع میشود. حالا همین width را با % امتحان میکنیم.
div{
	width:50%;
	height:100px;
}


مشاهده میکنید که width این المان 50 درصد است.سوال اینجاست که 50 درصد از کجا؟یا از چه المانی؟ شما اگر یک div به عنوان پدر داشته باشید با width: 200px فرزند آن اگر 50 درصد width داشته باشد.یعنی عرض نصف پدر را گرفته است.استفاده از % یعنی ارث بردن از المان سطح بالا تر. اگر از em استفاده میکنید ، همان طور که گفته شد یعنی n برابر فونت اصلی.n همان عددی است که شما انتخاب میکنید مثلا 10em. معمولا برای این که یک المان تمام سطح پدرش را پوشش دهد از عرض 100% استفاده میکند:
div{
	width:100%;
	height:100px;
}


به عنوان مثال اگر شما دوتا div داشته باشید با عرض مشخص . این دو به هم چسبیده هستند:

فاصله ها

برای فاصله دادن ما از margin ها استفاده میکنیم.margin ها معروف به فاصله ی بیرونی هستند که شما فاصله ی المان مورد نظر خود را با بیرون مشخص میکنید.
div{
	width:100px;
	height:100px;
}
.avalin-div{
	margin-bottom:10px;
}


اینجا فاصله از پایین داده شده تا بتوان دو تا div را از هم تشخیص داد.margin ها هم مثل width ها از px , % em , ... استفاده میکنند. margin ها به انواع گوناگون نوشته میشوند:
margin:10px;
margin:20px 10px;
margin:20px 10px 20px;
margin:10px 20px 30px 40px;
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
اولین مورد فاصله از تمام جهات داده میشود.دومی از بالا و پایین 20 از چپ و راست 10 پیکسل و سومی از بالا 20 از چپ و راست 10 و از پایین 20 پیکسل داده میشود.مورد های اخر هم که به صورت تکی فاصله داده میشه. در قسمت ها بعد با فاصله ها بیشتر آشنا میشیم.فاصله ی بیرونی و درونی را همراه با box model خواهیم گفت تا تمام اتفاقاتی که برای یک المان میوفته را درک کنید. تا قسمت بعد...

0 2368

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

کاربردها و فرصت های شغلی زبان برنامه نویسی جاوا

زبان برنامه نویسی جاوا در ا...

ادامه مطلب


banner

ساخت جداول گوناگون در css

به نام خدا. در این قسمت میخوا...

ادامه مطلب


banner

کتابخوان های الکترونیکی برتر

به نام خدا ؛ تاحالا شده وقتت ت...

ادامه مطلب


banner

لاراول 6

انتظار ها به سررسید و سرانجام...

ادامه مطلب


banner

padding ها در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


RSS RSS

نظرات ارزشمند خود را در مورد وبسایت با ما در میان بگذارید

© کلیه حقوق مادی و معنوی متعلق به تیم برنامه نویسی Mosquito Network می باشد