بلاک و برچسب های درون خطی HTML - عناصر درون خطی و بلوک

20.04.2019 مشاوره

در این فصل:

نحو عنصر

عنصر HTML واحد ساختاری اصلی یک صفحه وب است که در آن نوشته شده است زبان HTML... تصویر زیر نحو عناصر را نشان می دهد. برای اکثر تگ ها، نحو عنصر به جز تگ های منفرد یکسان به نظر می رسد.

همه عناصر در HTML از یک فرمت پیروی می کنند:

عنصر با یک تگ شروع شروع می شود.
عنصر با یک تگ بسته به پایان می رسد.
محتوای یک عنصر همه چیز بین تگ های باز و بسته است.
برخی از عناصر محتوایی ندارند (عناصر خالی).
اکثر عناصر می توانند دارای ویژگی باشند

توجه: فراموش نکنید که " / "، به مرورگر می گوید که عنصر شما به پایان رسیده است و آنچه بعد از آن نوشته می شود قبلاً عنصر دیگری است.

عناصر خالی

چندین عنصر در HTML وجود دارد که برای مثال تگ پایانی ندارند یا
... چنین عناصری نامیده می شوند خالیزیرا آنها حاوی هیچ محتوایی نیستند و برچسب پایانی ندارند.

عناصر تو در تو

تمام اسناد HTML از عناصر تو در تو تشکیل شده اند. اکثر آنها می توانند یا حاوی عناصر دیگری باشند، یا خود می توانند در عناصر دیگر تودرتو باشند، در حالی که عمق لانه سازی عناصر محدود نیست.

مثال زیر دارای سه عنصر است که دو عنصر تودرتو هستند:

اولین پاراگراف من

هنگام قرار دادن یک عنصر در عنصر دیگر، مراقب باشید که عنصر تودرتو در همان عنصر شروع و پایان یابد. بنابراین، مثال زیر نادرست است:

این خیلی

جالب هست

عناصر بلوک و درون خطی در حین چیدمان کاملاً یکدیگر را تکمیل می کنند و هر کدام جایگاه خاص خود را اشغال می کنند. اما مواردی وجود دارد که ویژگی های این عناصر به وضوح کافی نیست. گالری عکس نشان داده شده در شکل. 3.28 شامل بخش هایی است که شامل یک تصویر با عنوان است، در حالی که بخش ها به صورت افقی ردیف شده اند و کل عرض موجود را اشغال می کنند. هنگامی که پنجره مرورگر کاهش می یابد، بخش ها به خط دیگری منتقل می شوند.

برنج. 3.28. گالری عکس

اگر از تگ استفاده می کنید

به عنوان یک عنصر بلوک، هر بار در یک خط جدید شروع می شود. برای عناصر درون خطی، نمی توانید رنگ پس زمینه کل بخش را تنظیم کنید و ابعاد آن را تنظیم کنید. محبوب ترین راه حل در چنین مواردی استفاده از آن است خواص شناورکه در مورد بحث قرار خواهد گرفت بخش بعدی... در عین حال، من روی عناصر بلاک درون خطی تمرکز خواهم کرد که مزایای عناصر درون خطی و بلوک را با هم ترکیب می کنند.

هیچ برچسبی در HTML وجود ندارد که به عناصر inline-block اشاره کند، می توان آن را با تنظیم ویژگی display روی inline-block روی عنصر تعریف کرد.

Div (نمایش: inline-block؛)

ویژگی های این عناصر به شرح زیر است.

امکان قرار دادن متن، عناصر درون خطی یا بلوک در داخل عناصر بلوک درون خطی مجاز است.
ارتفاع عنصر به طور خودکار توسط مرورگر بر اساس محتوای بلوک محاسبه می شود.
عرض برابر است با محتوا به اضافه مقادیر padding، margin و border.
چندین عنصر در یک ردیف در یک خط قرار دارند و در صورت لزوم به خط دیگری بسته می شوند.
با استفاده از ویژگی vertical-align می توان آن را به صورت عمودی تراز کرد.
مجاز به تنظیم عرض و ارتفاع.
جلوه فرو ریختن کار نمی کند.

برای ایجاد گالری نشان داده شده در شکل. 3.28 برای یک برچسب

شما باید مقدار نمایشگر را به صورت inline-block تنظیم کنید و داخل آن یک تصویر و یک عنوان از طریق برچسب اضافه کنید

(مثال 3.18).

مثال 3.18. با استفاده از نمایشگر

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

گالری

کلیسای جامع سوفیا

کلیسای لهستانی

باشگاه بازرگانان

بنای یادبود سنت ولادیمیر

از آنجایی که همه عکس ها اندازه یکسانی دارند، عرض بلوک به صراحت تنظیم شده و برابر با 150 پیکسل است، اما ارتفاع آن مشخص نشده است، بنابراین، با عنوان طولانی در شکل، ارتفاع بخش ها متفاوت خواهد بود (شکل 3.29). ).

برنج. 3.29. ارتفاع بخش های مختلف

این مشکلی نیست، زیرا با وجود ارتفاع های مختلف، بخش ها در یک ردیف منظم نمایش داده می شوند. در عین حال می توانید با افزودن این ویژگی به کلاس عکس، نوع تراز را از طریق vertical-align تغییر دهید. اگر مقدار بالا را مشخص کنید، نمایش بخش ها تغییر می کند (شکل 3.30).

برنج. 3.30. تراز بالا

مشکل اصلی مرورگر اینترنت اکسپلورر تا نسخه 7.0 است. این مرورگر مقدار inline-block را فقط برای عناصر درون خطی اعمال می کند و با عناصر بلوک به درستی کار نمی کند. برای متقاعد کردن این مرورگر به ارائه صحیح مثال ما، باید از inline به جای inline-block استفاده کنیم و ویژگی hasLayout را تنظیم کنیم. افزودن درون خطی، طرح را در سایر مرورگرها از بین می برد، بنابراین تصمیم درستبهره خواهد برد نظرات مشروط(مثال 3.19).

مثال 3.19. سبک IE

ساختار به معنای اعمال کد مشخص شده برای مرورگر اینترنت اکسپلورر نسخه 7.0 و پایین تر است. مرورگرهای دیگر آن را به عنوان یک نظر می گیرند و آن را نادیده می گیرند. در مورد خاصیت بزرگنمایی، این ویژگی غیر استاندارد است و برای تنظیم خاصیت hasLayout در نظر گرفته شده است که مستقیماً قابل تنظیم نیست.

همچنین استفاده از عناصر بلوک درون خطی برای کاتالوگ های مختلف محصولات که در فروشگاه های آنلاین یافت می شوند، راحت است. معمولاً آنها با یک عکس و یک توضیح برای آن نمایش داده می شوند. این همه شبیه به گالری بالا است، بنابراین تنها چیزی که باقی می‌ماند این است که کد آن را برای در نظر گرفتن تراز ارتفاع و رفتار اینترنت اکسپلورر تغییر دهید (مثال 3.20).

مثال 3.20. کاتالوگ

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

کاتالوگ

ویدیو 1856

عکس 315

دستگاه های موبایل 2109

کامپیوتر و تجهیزات اداری 4296

لوازم خانگی 731

نتیجه این مثالنشان داده شده در شکل 3.31.

برنج. 3.31. کاتالوگ

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

، که می تواند تعداد کمی از آنها وجود داشته باشد، کلاس خودش، در مثال معرفی شده

با کاتالوگ id و استایل روی تگ های داخل آن اعمال می شود.

دو دسته اصلی از عناصر HTML وجود دارد که با نوع محتوا و رفتار آنها در ساختار یک صفحه وب مطابقت دارد - بلوکیو عناصر درون خطی... با عناصر بلوک می توانید ساختار یک صفحه وب را ایجاد کنید، عناصر درون خطی برای قالب بندی استفاده می شوند قطعات متن(به استثنای موارد و ).

تقسیم عناصر به بلوک و درون خطی در مشخصات HTML قبل از نسخه 4.01 استفاده می شود. در HTML5، این مفاهیم با مجموعه پیچیده‌تری جایگزین می‌شوند که هر عنصر HTML را ملزم می‌کند از قوانینی پیروی کند که تعیین می‌کند چه محتوایی برای آن قابل قبول است.

مدل قالب بندی بصری CSS

1. مدل قالب بندی بصری

مدل قالب‌بندی بصری CSS الگوریتمی است که یک سند HTML را پردازش می‌کند و آن را روی صفحه دستگاه نمایش می‌دهد. این مدل هر عنصر را در سند تغییر می دهد تا جعبه های مستطیلی صفر یا بیشتر مطابق با مدل جعبه CSS ایجاد کند. موقعیت این جعبه ها در صفحه با عوامل زیر تعیین می شود:
- اندازه عنصر (با در نظر گرفتن اینکه آیا آنها به صراحت تنظیم شده اند یا خیر)؛
- نوع عنصر (خط یا بلوک)؛
- طرح موقعیت یابی (جریان عادی، عناصر مستقر یا شناور)؛
- روابط بین عناصر در DOM؛
- ابعاد داخلی تصاویر موجود؛
- اطلاعات خارجی (به عنوان مثال، اندازه پنجره مرورگر).

موقعیت و ابعاد جعبه (های) هر عنصر نسبت به لبه های جعبه مستطیلی محاسبه می شود، به اصطلاح. "بلاک حاوی"(حاوی بلوک). اندازه جعبه با اندازه بلوک حاوی محدود نمی شود، بنابراین، تحت شرایط خاص، می تواند از مرزهای خود فراتر رود.

2. مدل بلوک

در مدل جعبه، یک عنصر به عنوان یک ظرف مستطیل شکل با یک منطقه محتوا و حاشیه های اختیاری و بالشتک (داخلی و بیرونی) در نظر گرفته می شود. ویژگی display نوع محفظه عنصر را تعیین می کند. برای هر مورد یک مقدار مرورگر پیش فرض وجود دارد.

برنج. 1. مدل بلوک یک عنصر

حوزه محتوامحتوای یک عنصر است، مانند متن یا تصویر.

بالشتک داخلیتوسط ویژگی padding تنظیم شده است. Padding فاصله بین محتوای اصلی و مرز آن (قاب) است. اگر یک پس‌زمینه برای یک عنصر تنظیم کنید، در فیلدهای عنصر نیز اعمال می‌شود. بر خلاف padding نمی تواند منفی باشد.

بالشتک بیرونیتوسط ویژگی حاشیه تنظیم می شود. فضای بیرونی یک عنصر را از مرز بیرونی حاشیه به عناصر مجاور اضافه می کند و در نتیجه عناصر صفحه را از هم جدا می کند. لایه بیرونی همیشه شفاف باقی می ماند و پس زمینه عنصر والد را نشان می دهد.

مقادیر padding و margin به ترتیب زیر مشخص می شوند: بالا، راست، پایین و چپ.

مرز، یا مرز عنصر، با استفاده از ویژگی border تنظیم می شود. اگر رنگ حاشیه مشخص نشده باشد، رنگ محتوای اصلی عنصر مانند متن را به خود می گیرد. اگر حاشیه دارای شکاف باشد، پس زمینه عنصر از طریق آن نشان داده می شود.

padding، padding، و حاشیه عنصر اختیاری هستند، به طور پیش فرض آنها روی صفر تنظیم شده اند. با این حال، برخی از مرورگرها بر اساس شیوه نامه خود، پیش فرض های مثبت را به این ویژگی ها اضافه می کنند. با استفاده از انتخابگر جهانی می توانید سبک های مرورگر را برای همه عناصر پاک کنید:

* (حاشیه: 0؛ بالشتک: 0؛)

3. عناصر و ظروف را مسدود کنید

بلوک کردن عناصر- عناصر سطح بالا که به صورت بصری به صورت بلوک قالب بندی می شوند و به صورت عمودی در صفحه در پنجره مرورگر قرار می گیرند. نمایش مقادیر ویژگی مانند بلوک، آیتم فهرست و جدول عناصر را شبیه به بلوک می کند. عناصر بلوک یک بلوک اصلی ایجاد می کنند که فقط شامل بلوک عنصر است. موارد تنظیم شده برای نمایش: آیتم فهرست، جعبه های گلوله دیگری را ایجاد می کند که نسبت به کادر اصلی قرار دارند.