ورود ثبت نام

مدل باکس در css

مدل باکس در css
به نام خدا در این قسمت قسط داریم مدل باکس در css را به شما آموزش دهیم.امروز با گفتن مبحث box model تمام اتفاقاتی که برای یک المان میوفته را شما درک خواهید کرد.به خوبی این قسمت را دقت کنید تا اگر اتفاق غیر منتظره ای برای المان افتاد متوجه شوید که مشکل از کجا بوده... با mosqdevelopers همراه باشید.

box model

اول از همه بیایید ببینیم مدل باکس چه شکلیه:

مشاهده میکنید که محتوا (content) که به رنگ سفید است قسمت اصلی المان ما است.اگر شما به آن خاصیت padding اضافه کنید قسمت خاکستری رنگ به آن اضافه میشود.که نزدیک ترین فاصله به هسته ی المان است.با اضافه کردن border حاشیه یا مرز برای المان ایجاد میکنید که بیرون از padding است.با اضافه کردن margin که اینجا برای بهتر دیده شدن از رنگ خاکستری استفاده شده ، فاصله ی بیرونی به المان که خارج از border است ایجاد میکنید. margin ها به المان اضافه میشوند ولی چون به صورت transparent هستند دیده نمیشن و شما آن ها را به صورت فاصله میبینید.padding ها هم همین جور هستند. نکته ی مهمی که میتوان به آن اشاره کرد عرض یک المان است.به این کد دقت کنید:
div{
	width: 200px;
	border: 1px solid red;
	padding: 10px;
	margin: 5px;
}

عرض المان را شما 200px در نظر گرفته اید ولی با اضافه شدن padding - margin - border دیگه عرض اصلی المان 200 نخواهد بود. نحوه ی محاسبه به صورت زیر است:
کل عرض: width + padding (left - right) + border (left - right) + margin (left - right)

با استفاده از فرمول بالا و جمع کردن عرض اصلی با border چپ و راست padding چپ و راست margin چپ و راست، عرض نهایی المان 232px خواهد بود.
width = 200px
border = 2px left + right
padding = 20px left + right
margin = 10px left + right

------ width = 232px ------

این قوانین برای height هم صادق است! تمام المان های html از این box پیروی میکنند! تا قسمت بعد...

0 332

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

معرفی و کاربرد های مهم زبان برنامه نویسی سی شارپ

در این مقاله درکنار شما هستیم...

ادامه مطلب


banner

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

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

ادامه مطلب


banner

دلایل یادگیری و کاربردهای زبان برنامه نویسی پایتون

درود برشما کاربران گرامی در ای...

ادامه مطلب


banner

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

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

ادامه مطلب


banner

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

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

ادامه مطلب


RSS RSS

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

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