Podjela stranica na blokove u css-u. Blok model

Dakle, od jednostavnog do složenog. Pogledajmo kako se div blokovi prema zadanim postavkama bez stilova koji utječu na njihov položaj. Radi jasnoće, dodaćemo stilove elementima inline, kroz atribut style.

Dodajmo vrijednost širine za svaki blok:

Vidi se da se, prema specifikaciji, svaki blok nalazi na novom redu. Ovo je njihovo normalno ponašanje.

Sad je pitanje kako urediti div blokova na jednom redu, jedan za drugim?

Da biste to učinili, postoji svojstvo koje određuje na kojoj će se strani blok biti prisiljen poravnati. Istodobno, s drugog ruba, može se omotati drugim elementima.

Svojstvo float ima sljedeća značenja:

• lijevo - kutija je poravnata lijevo, omotavajući se udesno
• desno - blok je poravnat udesno, zamotajte ga ulijevo
• none - nije navedeno omatanje, blok se ponaša prema zadanim postavkama kao u prethodnim primjerima.

Dodajte float: lijevo našim okvirima tako da okviri budu poravnati s lijeve strane:

Kao rezultat toga, blokovi su se poredali u jednu liniju. U redu, recimo da smo htjeli dodati još jedan div na dnu, a to ćemo učiniti bez navođenja svojstva float:

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Zašto se to dogodilo? Ukratko, to se događa jer su plutajući elementi ispušteni iz toka dokumenta. Međutim, ovo je tema za poseban članak. Ovdje ćemo se upoznati s novim svojstvom koje kontrolira ponašanje plutajućih elemenata:

• lijevo - onemogućuje prelamanje s lijeve strane, svi elementi će biti prikazani u novom retku (ispod elementa)
• desno - onemogućuje protok oko elementa s desne strane
• oba - zabranjuje strujanje oko elementa s obje strane, preporuča se koristiti kada je izričito potrebno prikazati element u novom retku ili se ne zna s koje strane je moguće teći oko drugih elemenata

Dodajte svojstvo clear: left Bloku 4, što će spriječiti da ovaj element teče oko drugih lebdećih elemenata na lijevoj strani.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blok 4 postavljen je na novu liniju, kako nam treba.

V u ovom slučaju znamo kako se drugi blokovi nalaze, pa smo u primjeru odmah naveli clear: left. Postoje situacije kada ne znamo točno na kojoj će se strani plutajući blok nalaziti, pa je u takvim slučajevima vrijedno navesti jasno: oboje, što poništava tok s obje strane. Sada smo shvatili kako rasporediti divove vodoravno na istoj liniji.

Treba imati na umu da blokovi s float vrijednost postavljene na jednu liniju ako širina dopušta roditeljski element... Ako blok elementi ne stanu u red, premotat će se u novi redak. Ako je to kritično, na primjer, prilikom postavljanja izgleda, morate to uzeti u obzir i za blokove s plutajućim elementima potrebno je postaviti širinu - fiksnu (px) ili elastičnu (%, rem itd.). Pogledajmo dalje takve situacije.

Kako ćemo utjecati na blokove ako te blokove želimo postaviti u centar?

Klasično rješenje bilo bi dodavanje roditelja u blokove i korištenje margine: 0 auto;

Zašto smo .wrapper klasu dali samom roditelju? "Omot" u prijevodu znači "omot". Općeprihvaćena je praksa definiranja naziva klase kada element omota druge blokove i tako vam omogućuje da kontrolirate/utječete na njih promjenom samog roditelja.

Uzmimo oznaku iz prethodnih primjera i pročistimo je.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Čini se da je ovdje sve jednostavno.

A ako nam se ne sviđa činjenica da se tekst drži usko uz rub roditeljskog bloka i želimo dodati polja bez promjene oznake, samo s koristeći css... Dodajmo svojstvo padding elementima:

Blok 1. Lorem

Blok 2. Lorem ipsum

Blok 3. Lorem ipsum

Blok 4. Lorem

I vidimo da nam se raspored ruši! Blok 3 je negdje otišao. Zašto se to dogodilo? Odgovor je jednostavan. Dodavanjem margina elementima povećali smo njihovu širinu. Sada su vrijednosti sljedeće:

Blok 1: 10 + 200 + 10 = 220 piksela

Blok 2: 10 + 150 + 10 = 170 piksela

Blok 3: 10 + 100 + 10 = 120 piksela

Blok 4: 10 + 450 + 10 = 470 piksela

220 + 170 + 120 = 510 piksela

Ukupna širina tri bloka je 510, ne uklapaju se u širinu roditelja (450) i stoga se prelamaju u novi redak.

Kako to popraviti? Možete učiniti sljedeće:

1. Ponovno postavite širine za svaki blok, uzimajući u obzir margine. Smanjenjem veličine blokova. Sve će opet uredno stati u jedan red. Slažete se, ovo je nezgodno? Svaki put ući u izgled i nešto urediti.
2. Koristi box-sizing: svojstvo border-box. Tako da se izračun uzima iz ukupne širine bloka. Savjetujem vam da saznate što je css blok model.

Koristimo drugu opciju, ispada ovako:

Blok 1. Lorem

Blok 2. Lorem ipsum

Blok 3. Lorem ipsum

Blok 4. Lorem

Sada ćemo zajedno prikupiti sve primljene informacije i pokušati stvoriti jednostavan tipični izgled s tri stupca gumeni raspored koji će se protegnuti na maksimalno 900px, nakon čega će cijeli izgled biti centriran.

Kreirajmo oznaku izgleda:

Pišemo stilove:

Tijelo (maksimalna širina: 900 piksela; / * ograničenje maksimalna širina* / margina: 0 auto; ) / * za sve blokove unutar tijela, promijenite algoritam za izračun širine blokova i dodajte margine od 10px svim blokovima * / body div (-webkit-box-sizing: border-box; -moz-box-sizing : border-box; box-sizing: border-box; padding: 10px;) .header (pozadina: # CCA69E; padding: 10px;) .left-sidebar (širina: 20%; pozadina: # 8ED9B6; float: lijevo; ) .sadržaj (float: lijevo; širina: 60%;) .desna bočna traka (širina: 20%; pozadina: # FF9282; float: lijevo;) .podnožje (pozadina: # 000; jasno: oboje; / * onemogući prelamanje s obje strane, blok se prikazuje u novom redu * / boja: #ccc;)

Ako nešto nije jasno - pitajte u komentarima.

Pozdrav dragi ljubitelji informatike. Danas se glavni način stvaranja lijepih web-mjesta s više stranica temelji na rasporedu blokova pomoću oznake div.

U slučaju nepoznavanja osnovnih zamršenosti rada s ovim alatom, nažalost i oh, ali atraktivno responzivni dizajn nećete to dobiti na bilo koji način. Stoga je ovaj članak posvećen temi "Kako napraviti blok u html-u". Detaljno ću opisati kako stvoriti blokove na stranici od nule, kako ukrasiti pozadinu i dizajn blokova, i što je najvažnije, reći ću vam kako spojiti stylesheet. Dakle, počnimo!

Značajke blok elemenata

Blokovi Pravokutni su elementi koji zauzimaju cijelu dostupnu širinu stranice, uvijek počinju u novom retku i prema zadanim postavkama automatski izračunavaju visinu na temelju sadržaja.

Svi elementi bloka sastoje se od 4 svojstva koja, poput okvira, okružuju sadržaj objekta.

Glavna stvar u bloku je sadržaj.

Oko nje su polja, koja se zovu padding... Margine su odgovorne za udaljenost između sadržaja objekta i njegovog unutarnjeg ruba granica.

Nakon toga slijede same granice koje se zovu engleska riječ granica.

I, konačno, zadnji okvir oko svega navedenog je margina- uvlačenja od vanjskog ruba obruba do rubova stranice ili drugih elemenata. Treba napomenuti da ova svojstva nije potrebno postavljati.

Kao primjer, programirajmo 2 i popunimo stvorene elemente tekstom.

Na ovaj trenutak ovaj će se kod prikazati kao obične dvije rečenice. Da biste ukrasili dizajn blokova, morate spojiti stilski list i css jezik postaviti određena svojstva.

Unesite svijetle boje u svakodnevni život html

Kako bi blokovi izgledali zanimljivo i atraktivno, svakako bismo trebali uključiti kaskadni stilski list.

Da biste to učinili, u spremniku za glavu nakon oznake

Blok u css - 2.

Blok u css - 3.

Kao rezultat:

Sada, u CSS-u, pokazat ću vam nekoliko trikova gdje se proširuju mogućnosti HTML blokova.

Blok okvir u CSS-u

Nekretnina "GRANICA»
Često koristim okvire kada stvaram web stranice. Okviri mi pomažu vidjeti gdje blok počinje i gdje završava. To mi olakšava posao. Također, okvir se može koristiti za ukrašavanje blokova.
Za izradu obruba za blokove napišite već poznato pravilo "border".

Sintaksa:

Obrub: debljina okvira frame_view frame_color;

Blokiraj u css -1.

Blok u css - 2.

Blok u css - 3.

Ako ne razumijete gdje i gdje sam ušao u CSS, onda obratite pažnju na retke od 4 do 17. A ako još uvijek imate takvo pitanje da sam to učinio, onda ponovite lekciju # 3 - "".

Proizlaziti:

Sada možete vidjeti granice bloka, a kada su granice vidljive, onda je lakše raditi s blokovima.

Uvlačenje bloka u CSS-u

Nekretnina "MARGINA»
Da biste postavili udaljenost (uvlačenje) od bloka, koristite pravilo "margina".
Obratite pažnju na dijagram. Parametri se postavljaju iz bloka:

Svojstva:

• vrh- Gornja strana
• pravo- Desna strana
• dno- Loša
• lijevo- lijeva strana

Margin-top: 30px; / * gornja strana * / margin-desno: 70px; / * desna strana * / margin-bottom: 90px; / * donja strana * / margin-left: 120px; /* lijeva strana */

Skraćeni zapis

Sve što sam napisao za uvlačenje možete za svaki blok posebno zapisati u skraćenom obliku:

Sintaksa:

Margina: gornja_strana desna_strana donja_strana lijeva_strana;

Margina: 30px 70px 90px 120px; / * stenografija * /

Blokiraj u css -1.

Blok u css - 2.

Blok u css - 3.

Proizlaziti:

Ako postavite jedan parametar na pravilo "margina" (redak #22):

Margina: 100px; / * stenografija * /

tada će udaljenost od bloka sa svih strana biti 100 px.

Uvlačenje unutar bloka u CSS-u

Nekretnina "PADDING»
Da biste postavili udaljenost (uvlačenje) unutar bloka, koristite pravilo "padding".
Obratite pažnju na dijagram:

Svojstva:

• vrh- Gornja strana
• pravo- Desna strana
• dno- Loša
• lijevo- lijeva strana

Padding-top: 30px; / * gornja strana * / padding-desno: 70px; / * desna strana * / padding-bottom: 90px; / * donja strana * / padding-left: 120px; /* lijeva strana */

Skraćeni zapis

Sve što sam gore napisao možete zapisati u skraćenom obliku.

Sintaksa:

Padding: gornja_strana desna_strana donja_strana lijeva_strana;

Padding: 30px 70px 90px 120px; / * stenografija * /

Napišite to u HTML datoteku ovako:

Blokiraj u css -1.

Blok u css - 2.

Blok u css - 3.

Proizlaziti:

Ako postavite jedan parametar na pravilo "padding" (redak # 21):

Padding: 50px; / * stenografija * /

tada će udaljenost unutar bloka sa svih strana biti 50 px.

Širina i visina bloka u CSS-u

Nekretnina "ŠIRINA"i"VISINA»
Možete kreirati širinu i visinu bloka. Da biste to učinili, koristite pravila "širina" - širina i "visina" - visina.

Sintaksa:

• visina - visina bloka;
• širina- širina bloka;

Značenje:
Vrijednost je postavljena u px ili%.

Širina: 600px; / * širina bloka * / visina: 250px; / * visina bloka * /

Mislim da nema potrebe objašnjavati kako umetnuti pravilo u CSS, ujedno ću provjeriti kako ste svladali lekciju #3 o tome kako umetnuti CSS.

Proizlaziti:

Blok će imati fiksnu širinu i visinu.

Ako želite i nefiksnu gumeni blok(blok koji se proteže duž duljine monitora), tada umjesto px trebate navesti%. Samo zapamtite: cijeli monitor je 100%.

Širina: 90%; / * širina gumenog bloka * /

Blokiraj pozadinu u CSS-u

Nekretnina "POZADINA»
Pravilo "pozadine" već znate, pa ne vidim razloga da se ponavljam.
A tko ne zna, dobrodošli ste na stranicu sa.

Blok 1.

Redak 7 - pravilom "pozadina" pozadinu smo zamijenili zelenom

Proizlaziti:

Pozadinu možete ispuniti ne samo bojom, već i slikom:

Pozadinska slika: url (bg.gif); / * Pozadinska slika * /

Blok 1.

Red #7 - Pravilom "background-image" zamijenili smo pozadinu slikom pozadine.
bg.gif je pozadinska slika.

Proizlaziti:

DODATAK

Blokirajte transparentnost u CSS-u

Svojstvo OPACITY
Blok se može učiniti transparentnim korištenjem CSS pravila "prozirnost".

Sintaksa:

Neprozirnost: vrijednost;

Značenje:
vrijednosti su broj u rasponu od 0 do 1.

• Vrijednost 0 - potpuna transparentnost bloka.
• Vrijednost 1 je neprozirnost bloka (blok će ostati takav kakav jest).
• Vrijednost u razlomcima (0,5) je prozirnost bloka.

Blok 1.

Proizlaziti:

Sakrij blok u CSS-u

Nekretnina "PRIKAZ»
Pravilo prikaza pomoći će sakriti blok web stranice. Ovo se pravilo često koristi u padajućem izborniku ili kada trebate sakriti neke blokove u mobilnoj verziji stranice.

Blok1 (zaslon: nema;)

Nekretnina "NEPROZIRNOST»
Pravilo "neprozirnosti" također će pomoći pri skrivanju bloka web stranice.

Blok1 (prozirnost: 0;)

Nekretnina "VIDLJIVOST»
"Vidljivost" je još jedno pravilo koje će također pomoći u skrivanju bloka web stranice. Dodajte vrijednost "hidden" pravilu "vidljivost":

Blok1 (vidljivost: skriveno;)

Svojstvo preljeva

Nekretnina "OVERFLOW"
S pravilom preljeva možete odrediti što učiniti ako sadržaj elementa premašuje njegovu veličinu. Na primjer, slika ili tekst veći su od samog bloka.

Sintaksa:

Overflow: vrijednost;

Značenje:

• Vidljivo- označava da kada se element prepuni sadržajem, neće biti odsječen, već jednostavno preliven (zadano).
• Skriven- označava da će sadržaj koji ne stane u element biti izrezan (izrezani dio će biti nevidljiv).
• Svitak- označava da će sadržaj koji ne stane u element biti izrezan, ali možete koristiti traku za pomicanje da biste vidjeli izrezani dio.
• Auto- kada se element prepuni sadržajem, trake za pomicanje se dodaju automatski.

Primjer s "Vidljivo" (zadano):

Blok 1.

Proizlaziti:

Primjer sa "Skriveno»:

Blok1 (visina: 200px; / * visina * / širina: 250px; / * širina * / obrub: 2px s točkama # cc0000; / * obrub * / preljev: skriven;)

Proizlaziti:

Primjer s "Scroll»:

Blok1 (visina: 200px; / * visina * / širina: 250px; / * širina * / obrub: 2px s točkama # cc0000; / * obrub * / preljev: Scroll;)

Proizlaziti:

Primjer s "Auto":

Blok1 (visina: 200px; / * visina * / širina: 250px; / * širina * / obrub: 2px točkasto # cc0000; / * obrub * / preljev: auto;)

Proizlaziti:

Sjena okvira u CSS-u

Nekretnina "BOX-SHADOW"
Od bloka možete napraviti sjenu. Pravilo "kutija-sjena".

Sintaksa:

Blok1 (visina: 200px; / * visina * / širina: 250px; / * širina * / obrub: 1px čvrst #ccc; / * obrub * / sjena okvira: -19px 0 22px -19px # 000.19px 0 22px -19px # 000; / * sjena kutije * /)

Proizlaziti:

Poravnavanje bloka prema sredini

Nekretnina "MARGINA"
Za centriranje bloka postavite pravilo "margina" na "0 auto":

Margina: 0 auto;

Blok1 (visina: 100px; / * visina * / širina: 100px; / * širina * / obrub: 1px čvrsta #ccc; / * obrub * / margina: 0 auto;)

To je sve! Vrijeme je da završimo ovu lekciju, inače je ispala prevelika! I već čujem hrkanje izvan monitora.
Još malo i završit ćemo s učenjem osnova CSS-a.

Pretplatite se na ažuriranje!

Prethodni post
Sljedeći post

Prije je na Internetu bio široko rasprostranjen tabelarni tip izgleda kojem je i posvećen. Međutim, s vremenom je ovaj pristup stvaranju strukture web-mjesta zastario i zamijenjen je blok rasporedom.

Razlike između blokovnog i tabelarnog izgleda

Ako izgled tablice implicira da je sadržaj stranice unutar oznake

, tada se koncept rasporeda blokova temelji na aktivnoj upotrebi univerzalnih oznaka

unutar kojeg se nalazi sadržaj, uključujući druge oznake.

Blok raspored je lišen nedostataka tabelarnog izgleda - bolje ga indeksiraju tražilice, njegov kod nije tako raširen, a blokovi

, koje se tako rado nazivaju "slojevi", izvorno su zamišljeni kao univerzalni, odnosno "za sve", dok

je tablica koju trebate koristiti za prikaz tabličnih podataka i ništa više.

Jedini uočljivi nedostatak rasporeda blokova je to što se web-mjesta napravljena na njemu mogu prikazati na različite načine u preglednicima. Da biste to izbjegli, morate napraviti izgled "cross-browser", to jest, jednako prikazan u bilo kojem pregledniku.

Bit blok rasporeda

Izgled web stranice kreira se u grafičkom uređivaču: označeno je gdje će se koji dio stranice (zaglavlje, dno, bočna traka, glavni sadržaj) nalaziti i koliko prostora za snimanje, slike i pozadine su pripremljene.

Svaki dio stranice smješten je u svoj blok

: vrh stranice - u prvom, izbornik - u drugom, sadržaj - u trećem itd. Svaki blok je ispunjen sadržajem pomoću HTML-a, kao i pozicioniran i stiliziran pomoću CSS oznake.

Konačni HTML dokument je zbirka blokova

sa sadržajem iznutra. Dizajn se često nalazi u zasebnoj CSS datoteci povezanoj sa stranicom pomoću oznake. , ili barem u kontejneru

Svrha natječaja je otkrivanje predmeta materijalnog svijeta, kolosalne vrijednosti, koji pripadaju živom biološkom organizmu, u daljnjem tekstu zmaj, i njihovo izvlaštenje.

Proizlaziti ovaj primjer prikazano na sl. 2.

Riža. 2. Blok sa zaobljenim kutovima

Iako se pokazalo da je metoda prilično svestrana, ona ima niz ograničenja. Dakle, ne možete postaviti gradijent unutar bloka, jer horizontalne linije monofoni. Također, da biste promijenili radijus zaokruživanja, morate uređivati ​​svojstva stila nekoliko selektora u isto vrijeme.

Navedimo još jedan primjer za stvaranje bloka s polumjerom zaokruživanja od tri piksela. U mnogim slučajevima to je najviše najbolja opcija, kako u smislu dizajna tako i kompaktnosti koda (primjer 3).

Primjer 3. Radijus zaokruživanja od tri piksela

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Po isteku mogućnosti razumijevanja navedenih informacija, imate objektivnu priliku dostaviti službeni zahtjev glavni podređeni lokalnom virtualnom svemiru.

Rezultat ovog primjera prikazan je na sl. 3.

Vrhunski povezani članci

Različiti pokreti miša okomito i vodoravno

Kako komprimirati teksture u Fallout 4

Ostaje samo razumjeti potrebnu razinu

Kategorije:

• Programi
• Sigurnost
• Windows 10
• Željezo
• Windows 8
• U kontaktu s
• Pogreške

© 2021 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.