برای اهدافی مثل استایل بندی، خیلی از المنتهای HTML به دو گروه Block-level elements و Inline-level elements تقسیم میشن. معمولا المنتهای Block-level المنتهای ساختاری هستند و میتونن شامل گروه بزرگی از المنتها بشن اما المنتهای Inline-level المنتهای بر پایه متن(Text-base) هستند.
Block-level elements
بعضی از المنت های Block-level:
مشخصات و رفتارهای این نوع از المنتها:
- اگر مقدار
Width
تعیین نشود،پنهای المنت به اندازه پنهای المنت والد میشود. - اگر مقدار
Height
تعیین نشود،ارتفاع المنت به اندازه ارتفاع المنت فرزند میشود. - میتواند از ویژگی های
margin
وpadding
استفاده کند. - ویژگی
vertical-align
را نادیده میگیرد.
Inline-level elements
بعضی از المنت های Inline-level:
مشخصات و رفتارهای این نوع از المنتها:
- به اندازه متن در می اید.
- ویژگیهای
Height
وWidth
را نادیده میگیرد. - تنظیمات
margin-top
وmargin-bottom
را نادیده میگیرد. - اگر از ویژگی
float
برای این المنتها استفاده شود بصورت خودکار به المنت Block-level تبدیل میشوند.
قوانین جای گیری المنتها
اینا یکسری قوانین جای گیری المنت ها هستند منظور از جای گیری اینه که چه المنتهایی در چه المنتایی میتونن قرار بگیرن! اما استثنا هم در اونها وجود داره و همیشه این قانون ها درست نیستن.
- المنتهای Block-level میتوانند در دیگر المنتهای Block-level قرار بگیرند.
- المنتهای Inline-level میتوانند در دیگر المنتهای Inline-level قرار بگیرند.
- المنتهای Inline-level میتوانند در المنتهای Block-level قرار بگیرند.
- المنتهای Block-level نمیتوانند در المنتهای Inline-level قرار بگیرند.
طبق قوانین بالا، المنتهای Block-level نمیتونن تو المنتهای Inline-level قرار بگیرن اما گفتیم که استثنا هم وجود داره مثلا المنت <a> میتونه بیشتر المنتها رو پوشش بده.
Replaced elements
این دسته از المنتها ویژگی هر دو گروه رو دارن. بیشتر به Inline-level نزدیک هستند اما میتونن مثل Block-level ها property(خاصیت، ویژگی) های width
و height
هم داشته باشن.
المنت ها که این عضو این دسته هستن:
عالی بود 🙂
آموزش هاتون عالی هستند
ایده آموزش توی این وب سایت متفاوت هست و البته خیلی کامل و ریزبینانه
با تشکر
خیلی ممنونم پویان جان 🙂
سلام
حرف نداری داداشی بوس بوس …
ممنون داداش 😉
عالییییییییییییییییییییییییییییییییییییییییییییییییییییی
حرف نداری داداش
ممنون عزیز 🙂
سلام،واقعا آموزش های شما عالی است.من تا حالا تو هیچ سایتی انقدر کاربردی آموزش ندیده بودم.دوستدارم در مورد آموزشهاتون با هم همکاری کنیم و یه پیشنهاد دارم.در صورت امکان خواهشمندم به بنده ایمیل بزنید و یا شمارتونو برام بفرستید که باهاتون تماس بگیرم.ممنون
ممنونم حمیدرضا
به زودی با شما تماس میگیرم 😉