Blok i inline oznake. HTML - Inline i Block elementi

20.04.2019 Savjet

U ovom poglavlju:

Sintaksa elementa

HTML element je glavna strukturna jedinica web stranice, napisana u HTML jezik... Slika ispod pokazuje sintaksu elemenata. Za većinu oznaka, sintaksa elementa će izgledati isto osim za pojedinačne oznake.

Svi elementi u HTML-u slijede isti format:

Element počinje početnom oznakom.
Element završava završnom oznakom.
Sadržaj elementa je sve između otvaranja i zatvaranja oznake.
Neki elementi nemaju sadržaj (prazni elementi).
Većina elemenata može sadržavati atribute

Napomena: ne zaboravite staviti " / ", govori pretraživaču da je vaš element završio i da je ono što će biti napisano nakon njega već drugi element.

Prazni elementi

Postoji nekoliko elemenata u HTML-u koji nemaju završnu oznaku, na primjer ili
... Takvi elementi se nazivaju prazan jer ne sadrže nikakav sadržaj i nemaju završnu oznaku.

Ugniježđeni elementi

Svi HTML dokumenti su sastavljeni od ugniježđenih elemenata. Većina njih može sadržavati ili druge elemente, ili sami mogu biti ugniježđeni u druge elemente, dok dubina ugniježđenja elemenata nije ograničena.

Sljedeći primjer ima tri elementa, od kojih su dva ugniježđena:

Moj prvi paragraf

Kada ugniježdite jedan element u drugi, pazite da ugniježđeni element počinje i završava unutar istog elementa. Dakle, sljedeći primjer nije tačan:

Ovo vrlo

zanimljivo

Blok i inline elementi savršeno se nadopunjuju tokom rasporeda, svaki zauzimajući svoju specifičnu nišu. Ali postoje slučajevi kada su karakteristike ovih elemenata očigledno nedovoljne. Galerija fotografija prikazana na sl. 3.28 se sastoji od sekcija, koje uključuju sliku sa natpisom, dok su sekcije poređane horizontalno, zauzimajući cijelu raspoloživu širinu. Kada se prozor pretraživača smanji, odeljci se pomeraju u drugi red.

Rice. 3.28. foto galerija

Ako koristite oznaku

kao blok element, svaki put će početi u novom redu. Za inline elemente ne možete postaviti boju pozadine cijelog odjeljka i postaviti njegove dimenzije. Najpopularnije rješenje u takvim slučajevima je korištenje float svojstva o čemu će biti reči u sljedeći odjeljak... U međuvremenu, fokusiraću se na inline-blok elemente, koji kombinuju prednosti inline i blok elemenata.

U HTML-u ne postoji oznaka koja se odnosi na inline-block elemente, može se definirati postavljanjem svojstva prikaza na inline-block na elementu.

Div (prikaz: inline-block;)

Karakteristike ovih elemenata su sljedeće.

Dozvoljeno je postavljanje tekstualnih, inline ili blok elemenata unutar inline-block elemenata.
Visinu elementa automatski izračunava pretraživač na osnovu sadržaja bloka.
Širina je jednaka sadržaju plus vrijednosti odstupanja, margine i ivice.
Nekoliko elemenata u nizu nalazi se na jednoj liniji i premotava se u drugu liniju ako je potrebno.
Može se vertikalno poravnati pomoću svojstva vertical-align.
Dozvoljeno podešavanje širine i visine.
Efekat sažimanja ne radi.

Za kreiranje galerije prikazane na sl. 3,28 za oznaku

trebali biste postaviti vrijednost za prikaz kao inline-block, a unutar nje dodati sliku i natpis kroz oznaku

(primjer 3.18).

Primjer 3.18. Korišćenje displeja

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

Galerija

Sophia Cathedral

Poljska crkva

Merchant Club

Spomenik Sv. Vladimiru

Pošto sve fotografije imaju istu veličinu, širina bloka je eksplicitno podešena i jednaka je 150px, ali visina nije navedena, stoga će se uz dugi natpis na slici visina sekcija razlikovati (slika 3.29). ).

Rice. 3.29. Različite visine sekcija

To nije problem, jer će sekcije biti prikazane u urednom redu, uprkos različitim visinama. U isto vrijeme, možete promijeniti tip poravnanja kroz vertikalno poravnanje dodavanjem ovog svojstva u klasu fotografija. Ako zadate vrijednost top, tada će se promijeniti prikaz sekcija (slika 3.30).

Rice. 3.30. Gornje poravnanje

Glavni problem je IE pretraživač do verzije 7.0 uključujući. Ovaj pretraživač primjenjuje vrijednost inline-block samo na inline elemente i ne radi ispravno s blok elementima. Da bismo uvjerili ovaj pretraživač da ispravno prikaže naš primjer, moramo koristiti inline umjesto inline-block i postaviti svojstvo hasLayout. Dodavanje inline će uništiti izgled u drugim pretraživačima, tako da ispravna odlukaće iskoristiti uslovni komentari(primjer 3.19).

Primjer 3.19. IE Style

Konstrukcija znači primjenu navedenog koda za IE pretraživač verzije 7.0 i niže. Drugi pretraživači to uzimaju kao komentar i ignorišu. Što se tiče svojstva zumiranja, ono je nestandardno i namijenjeno je postavljanju svojstva hasLayout, koje se ne može postaviti direktno.

Također je zgodno koristiti inline-block elemente za različite kataloge proizvoda koji se nalaze u online trgovinama. Obično se prikazuju sa slikom i natpisom. Ovo je sve slično galeriji iznad, tako da ostaje samo da se modificira njen kod kako bi se uzelo u obzir poravnanje po visini i ponašanje IE (primjer 3.20).

Primjer 3.20. Katalog

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Katalog

Video 1856

Fotografije 315

Mobilni uređaji 2109

Računari i kancelarijska oprema 4296

Kućni aparati 731

Rezultat ovaj primjer prikazano na sl. 3.31.

Rice. 3.31. Katalog

Da ne bi pitali svaki tag

, kojih može biti dosta, svoju vlastitu klasu, u predstavljenom primjeru

sa id katalogom i stil se primjenjuje na oznake unutar njega.

Postoje dvije glavne kategorije HTML elemenata koji odgovaraju njihovom tipu sadržaja i ponašanju u strukturi web stranice - blocky i inline elementi... Sa blok elementima možete kreirati strukturu web stranice, inline elementi se koriste za formatiranje fragmenti teksta(isključujući stavke i ).

Podjela elemenata na blok i inline koristi se u HTML specifikaciji prije verzije 4.01. U HTML5, ovi koncepti su zamijenjeni složenijim skupom, koji zahtijeva da svaki HTML element slijedi pravila koja određuju koji je sadržaj za njega prihvatljiv.

CSS model vizuelnog oblikovanja

1. Model vizualnog formatiranja

CSS model vizuelnog oblikovanja je algoritam koji obrađuje HTML dokument i prikazuje ga na ekranu uređaja. Ovaj model transformiše svaki element u dokumentu tako da generiše nula ili više pravougaonih okvira u skladu sa CSS modelom okvira. Položaj ovih okvira na stranici određen je sljedećim faktorima:
- veličina elementa (uzimajući u obzir da li su eksplicitno postavljeni ili ne);
- tip elementa (linija ili blok);
- šema pozicioniranja (normalan tok, pozicionirani ili plutajući elementi);
- odnosi između elemenata u DOM-u;
- unutrašnje dimenzije sadržanih slika;
- eksterne informacije (na primjer, veličina prozora pretraživača).

Položaj i dimenzije kutije(a) svakog elementa izračunavaju se u odnosu na ivice pravougaone kutije, tzv. "Blok koji sadrži"(koji sadrži blok). Veličina kutije nije ograničena veličinom bloka koji sadrži, stoga, pod određenim uvjetima, može ići izvan svojih granica.

2. Blok model

U modelu okvira, element se tretira kao pravokutni kontejner s područjem sadržaja i opcijskim granicama i paddingom (unutrašnjim i vanjskim). Svojstvo display određuje tip kontejnera elementa. Za svaku stavku postoji zadana vrijednost pretraživača.

Rice. 1. Blok model elementa

Područje sadržaja Je sadržaj elementa, kao što je tekst ili slika.

Unutrašnji padding postavljeno svojstvom paddinga. Padding je rastojanje između glavnog sadržaja i njegove granice (okvira). Ako postavite pozadinu za element, ona će se primijeniti i na polja elementa. Padding ne može biti negativan, za razliku od paddinga.

Vanjski padding postavljeno svojstvom margine. Dodaje prostor izvan elementa od vanjske granice ivice do susjednih elemenata, čime se odvajaju elementi na stranici. Vanjski padding uvijek ostaje transparentan i prikazuje pozadinu roditeljskog elementa.

Vrijednosti paddinga i margine su navedene sljedećim redoslijedom: gore, desno, dolje i lijevo.

Granica, ili ivica elementa, postavljena pomoću svojstva granice. Ako nije navedena boja obruba, ona preuzima boju glavnog sadržaja elementa, kao što je tekst. Ako obrub ima praznine, tada će se kroz njega vidjeti pozadina elementa.

Padding, padding i granica elementa su opcioni, prema zadanim postavkama su postavljeni na nulu. Međutim, neki pretraživači dodaju pozitivne zadane postavke ovim svojstvima na osnovu njihovih stilova. Možete obrisati stilove pretraživača za sve elemente koristeći univerzalni selektor:

* (margina: 0; dopuna: 0;)

3. Blok elementi i blok kontejneri

Blok elementi- elementi najvišeg nivoa koji su vizuelno formatirani kao blokovi, postavljeni okomito na stranicu u prozoru pretraživača. Vrijednosti svojstava prikaza kao što su blok, stavka liste i tablica čine elemente blokovnim. Blok elementi generiraju glavni blok koji sadrži samo blok elemenata. Stavke postavljene za prikaz: stavka liste generiše dodatne okvire za nabrajanje koji su pozicionirani u odnosu na glavni okvir.