Primjer

HTML

CSS

Proizlaziti

Problemi s pristupačnošću

Osigurajte da elementi postavljeni s visinom nisu skraćeni i/ili da ne zaklanjaju drugi sadržaj kada se stranica zumira za povećanje veličine teksta.

Tehnički podaci

Kompatibilnost preglednika

Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

Ažurirajte podatke o kompatibilnosti na GitHubu

Legenda

Pozdrav, dragi čitatelji! Danas ćemo pogledati kako postaviti veličinu blok elemenata na web stranici pomoću CSS svojstava i konfigurirati prikaz sadržaja ako ne stane u element.

širina i visina - širina i visina elemenata u css-u

Pomoću atributa stila širine i visine možete postaviti širinu i visinu elemenata bloka:

širina: auto|<ширина>|naslijediti
visina: auto|<ширина>|naslijediti

Kao vrijednosti možete koristiti bilo koje mjerne jedinice dostupne u css-u - na primjer, piksele (px), inče (in), točke (pt), itd.:

p (širina:200px; visina:150px)

Osim apsolutnih jedinica, možete postaviti relativnu veličinu elemenata kao postotak. U ovom slučaju, širina i visina elementa ovisit će o širini i visini nadređenog elementa. Ako roditelj nije eksplicitno naveden, dimenzije će ovisiti o prozoru preglednika.

div (width:40%;)

Auto prepušta kontrolu nad veličinom elementa web pregledniku i to je zadana vrijednost. U tom će slučaju dimenzije elementa biti takve da u potpunosti stane u sav njegov sadržaj.

Pogledajmo nekoliko primjera.

Proizlaziti:

U ovom smo primjeru stvorili div i ugniježdili paragraf p s tekstom unutar njega. Za div smo striktno postavili dimenzije na 300 x 300 piksela. Element p ima vrijednosti svojstava širine i visine jednake auto, tako da kao što možete vidjeti na snimci zaslona, ​​njegova širina je postavljena jednako širini nadređenog elementa, a njegova visina je takva da stane u sav tekst sadržan u paragraf.

Sada promijenimo CSS postavke za paragraf p i postavimo fiksne dimenzije:

Sloj 2 (
pozadina: #eee;
širina:250px;
}

Proizlaziti:

Kao što vidite, širina paragrafa je postala uža i iznosi 250 piksela, a njegova visina je povećana tako da tekst stane, budući da je parametar visine ostao jednak auto.

Sada postavimo visinu i širinu odlomka u postocima:

Sloj 2 (
pozadina: #eee;
širina:50%;
visina:50%;
}

Proizlaziti:

Kao što možete vidjeti na slici, širina elementa p postala je jednaka polovici širine elementa div. I visina se povećala i postala jednaka 75 posto visine diva.

Prilikom određivanja širine i visine bilo kojeg elementa u relativnim jedinicama, možda ćete morati navesti minimalnu i najveću moguću veličinu. Uostalom, na primjer, kada mijenjate veličinu prozora preglednika, dimenzije elementa mogu se smanjiti i povećati do takve veličine da čitljivost web mjesta postane vrlo niska.

Minimalnu širinu i visinu možete definirati pomoću atributa min-width i min-heigh:

minimalna širina:<ширина>
minimalna visina:<высота>

Slični atributi stila max-width i max-height omogućuju postavljanje maksimalnih veličina:

maksimalna širina:<ширина>
maksimalna visina:<высота>

Jasno je da prilikom postavljanja maksimalnih i minimalnih vrijednosti za visinu i širinu, dimenzije elementa ne mogu postati veće od maksimalnih i manje od minimalnih vrijednosti.

Vrijedno je pojasniti da zadatak parametri visine i širine imaju smisla samo za blok oznake, jer za ugrađene elemente preglednik ne obrađuje te parametre.

Može se dogoditi da prilikom postavljanja krutih parametara za visinu i širinu elementa sadržaj koji sadrži ne stane u ograničeno područje.

Na primjer, smanjimo veličinu odlomka p iz gore navedenih primjera na 100 piksela:

Sloj 2 (
pozadina: #eee;
širina:100px;
visina:100px;
}

Proizlaziti:

Kao što vidite, tekst je izašao izvan granica pasusa i ne izgleda baš lijepo. Kako bi se izbjegle takve situacije, postoji CSS pravilo - overflow.

Parametar preljeva za skrivanje (skriven, vidljiv) ili pomicanje (scroll, auto) sadržaja

Prelijevanje sadržaja može se dogoditi kada su i širina i visina elementa ograničene. Pogledajmo dva odlomka:

Prvi tekst teksta

Tekst drugog odlomka

Proizlaziti:

Budući da ni širina ni visina paragrafa nisu navedene, preglednik ih samostalno izračunava na temelju vlastitog razumijevanja vrijednosti auto. Zbog toga su paragrafi zauzimali sav raspoloživi prostor po širini, a po visini prema sadržaju koji su sadržavali.

Sada ograničimo širinu prvog odlomka:

Prvi tekst teksta

Tekst drugog odlomka

Proizlaziti:

Širina odlomka je očekivano smanjena, a visina je postavljena tako da se prilagodi cijelom tekstu.

Pa, sada ograničimo visinu prvog odlomka:

Prvi tekst teksta

Tekst drugog odlomka

Kao rezultat toga, pokazalo se da se tekst ne uklapa u tako ograničen odlomak i stoga je naletio na područje donjeg susjeda. Prema tome, praktički je nemoguće pročitati tekst ni u prvom ni u drugom odlomku. Postoji kontrola ponašanja sadržaja u takvim situacijama preljevno pravilo:

preljev: vidljivo|skriveno|pomicanje|auto|nasljeđivanje

Prema zadanim postavkama, overflow je postavljen na vidljivo, što govori pregledniku da prikaže sadržaj koji ne stane u spremnik. Rezultat se može vidjeti u gornjem primjeru.

Pravilo skriva sve što ne stane u spremnik:

Vrijednost pomicanja prikazat će okomite i vodoravne trake za pomicanje na elementu čak i ako sav sadržaj stane:

Prvi tekst teksta

Tekst drugog odlomka

Najpopularnije i logično rješenje ako trebate napraviti trake za pomicanje za spremnik je vrijednost auto. U ovom slučaju, preglednik će sam odrediti kada i na kojim osima treba prikazati trake za pomicanje:

Prvi tekst teksta

Tekst drugog odlomka

Proizlaziti:

Da biste prilagodili trake za pomicanje, također možete koristiti atribute stila overflow-x i overflow-y, koji vam omogućuju da prilagodite prikaz pomicanja na pojedinačnim osima. Tako je odgovoran za Vodoravna os, i za okomita os.

Stoga, ako vam je, na primjer, potrebno da se vodoravno pomicanje nikada ne pojavljuje u odlomku, a okomito pomicanje da se pojavljuje samo kada je potrebno, tada samo napišite sljedeće css pravilo:

p(overflow-x:hidden;overflow-y:auto;)

I problem će biti riješen.

To je sve. Do sljedećeg puta. Ne zaboravite se pretplatiti na ažuriranja bloga i bit ću vam zahvalan ako koristite gumbe društvenih mreža.

Visina i širina elementa su izračunate količine. Svaki element web stranice tvori pravokutno područje, koje se pak sastoji od nekoliko područja - sadržajna područja, područja podloge, područja okvira I poljske površine element.

Između sadržaja elementa i njegove granice su uvlačenje padding, izvan granice elementa - polja margina . Područje sadržaja postoji za svaki element; ostala područja su izborna.

1. Visina elementa

Svojstvo visine specificira visinu sadržaja blok elementa i nema utjecaja na prikaz inline elemenata: inline; . Visina inline elemenata jednaka je visini njihovog sadržaja. Negativne vrijednosti nisu dopuštene. Imovina se ne nasljeđuje.

Sintaksa

P (visina: 100 px;)

2. Širina elementa

Svojstvo width specificira širinu sadržaja blok elementa i nema utjecaja na prikaz inline elemenata: inline; . Širina inline elemenata jednaka je širini njihovog sadržaja. Negativne vrijednosti nisu dopuštene. Imovina se ne nasljeđuje.

Sintaksa

P (širina: 100 px;)

3. Visina i širina apsolutno pozicioniranog elementa

Postavite širinu i visinu apsolutno pozicioniranog elementa position: absolute; nije uvijek potrebno, budući da su u ovom slučaju visina i širina implicitno određene pomakom elementa. Ako element ima navedene obrube i margine, one smanjuju veličinu područja sadržaja za odgovarajuće vrijednosti.

Div ( background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; ) /*u ovom slučaju, visina elementa je 100%, širina je 50% od nadređeni blok*/
Riža. 2. Visina i širina apsolutno pozicioniranog elementa

4. Ispuna elementa

Koristeći svojstvo padding, možete postaviti padding istovremeno za nekoliko strana elementa sljedećim redoslijedom: . Ako element ima pozadinu, primijenit će se i na ispunu. Negativne vrijednosti nisu dopuštene. Imovina se ne nasljeđuje.

Ako su zadane tri vrijednosti, na primjer, div (padding: 10px 20px 30px;), tada će se raspodijeliti sljedećim redoslijedom: prva vrijednost je gornji padding, druga je desni i lijevi ispuna, treća je donja podstava.
Ako su dane dvije vrijednosti, na primjer, div (padding: 10px 20px;), tada će prva postaviti gornje i donje ispune, druga će postaviti desno i lijevo.
Pojedinačna vrijednost, kao što je div (padding: 10px;) , postavit će istu udaljenost na svim stranama elementa.

Sintaksa

P (ispod: 5px 10px 15px 10px;)

4.1. Ispuna na jednoj strani elementa

Da biste postavili ispunu samo na jednoj strani elementa, trebate koristiti jedno od svojstava padding-top, padding-right, padding-bottom, padding-left, na primjer:

P (padding-lijevo: 10px;)

5. Margine elemenata

Većina elemenata međusobno je odvojena marginama. Svojstvo margine je kratki oblik za snimanje polja elementa sljedećim redoslijedom: gore, desno, dolje, lijevo. Koristi se kada trebate postaviti margine na nekoliko strana, ali ne nužno na četiri. Okomito susjedne margine blok elemenata su skupljene, a gornja i donja margina nemaju učinka na elemente u liniji. Dopuštene su negativne vrijednosti. Imovina se ne nasljeđuje.

Ako su dane tri vrijednosti, na primjer, div (margina: 10px 20px 30px;), tada će se raspodijeliti sljedećim redoslijedom: prva vrijednost je gornja margina, druga je desna i lijeva margina, treća je donja margina.
Ako su dane dvije vrijednosti, na primjer, div (margina: 10px 20px;), tada će prva postaviti gornju i donju marginu, druga će postaviti desnu i lijevu marginu.
Jedna vrijednost, kao što je div (margin: 10px;) , postavit će jednake margine na sve strane elementa.

(margin: 0 auto;) radit će samo ako je širina elementa eksplicitno navedena.

Sintaksa

Div (margina: 5px 10px 2px 5px;)

5.1. Margine na jednoj strani elementa

Svojstva margin-top, margin-right, margin-bottom, margin-left kontroliraju odgovarajuće margine sa svake strane elementa, na primjer:

P (margin-lijevo: 10px;)

6. Ograničenje širine i visine

CSS također podržava nekoliko drugih svojstava koja se odnose na postavljanje visine i širine elemenata web stranice: min-height, min-width, max-height i max-width. Ova svojstva vam omogućuju da postavite minimalne i maksimalne vrijednosti za širinu ili visinu elementa, dajući elementu mogućnost da ispuni raspoloživi prostor. Svojstva se često koriste za responzivni dizajn web stranice. Primjenjuje se na sve elemente osim inline i tabličnih elemenata. Uvijek dolaze nakon glavnog pravila, tj. nakon zadavanja visine ili širine elementa . Nije naslijeđeno.

Možete odrediti regularne dimenzije pomoću nekih mjernih jedinica, a ograničenja veličine pomoću drugih jedinica, na primjer:

Div (širina: 400 px; maks. širina: 50%; )

Element će imati širinu od 400 piksela samo ako ta vrijednost ne prelazi 50% širine bloka spremnika, inače će se njegova širina smanjiti.

U ovom članku ćemo pogledati kako u CSS-u možete postaviti visinu bloka kao postotak njegove širine. Razmotrimo korištenje ove tehnologije na primjeru stvaranja Bootstrap karusela (klizača) od slika različitih veličina.

Stvaranje bloka visine koja je određeni postotak njegove širine

1. Napravite HTML strukturu od 2 bloka:
   Prvi blok ima 2 razreda. Koristeći klasu koja reagira na stavke, postavit ćemo relativno pozicioniranje bloka. To se mora učiniti tako da se blok 2 (koji će imati apsolutno pozicioniranje) nalazi u odnosu na njega. Osim toga, ova se klasa također koristi za dodavanje pseudoelementa:before ispred sadržaja odgovarajućih elemenata (item-responsive). Ovaj element će postaviti potrebnu visinu bloka u odnosu na njegovu širinu pomoću CSS svojstva padding-top. Trik ove metode je da ako je svojstvo padding postavljeno na ne u pikselima, već kao postotak, tada će to preglednik izračunati u odnosu na njegovu širinu. Na taj način možete dobiti blok potrebne visine. Sljedeći korak je dati bloku 2 apsolutni položaj i poravnati ga s prvim blokom.
2. Dodajte sljedeći CSS kod na stranicu: .item-responsive ( position: relative; /* relative positioning */ ) .item-responsive:before ( display: block; /* display element as a block */ content: "" ; /* pseudoelement sadržaja */ širina: 100%; /* širina elementa */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive >.content (position: absolute; /* apsolutni položaj elementa */ /* položaj elementa */ top: 0; left: 0; right: 0; bottom: 0; ) /* Ako je potrebno (za blokove koji imaju ove klase) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2) *100% */ ) .item -1by1 ( padding-top: 100%; /* (1:1)*100% */ )

Korištenje gornje tehnologije za stvaranje Bootstrap karusela

Ako niste upoznati s Bootstrapom, a želite znati što je to, možete koristiti članak Uvod u Bootstrap.

Pogledajmo primjer u kojem ćemo upotrijebiti gornju HTML strukturu i CSS kod za prikaz slajdova Bootstrap vrtuljka.

Koristit ćemo sljedeće datoteke kao slike:

• carousel_1.jpg (širina = 736 px, visina = 552 px, omjer slike (visina prema širini) = 1,33);
• carousel_2.jpg (širina = 1155 px, visina = 1280 px, omjer širine i visine (visina prema širini) = 0,9);
• carousel_3.jpg (širina = 1846 px, visina = 1028 px, omjer slike (visina prema širini) = 1,8);
• carousel_4.jpg (širina = 1140 px, visina = 550 px, omjer slike (visina prema širini) = 2,07);
• carousel_5.jpg (širina = 800 px, visina = 600 px, omjer slike (visina prema širini) = 1,33);

Postavit ćemo slike kao pozadinu. To će vam omogućiti korištenje 3 slike s nejednakim omjerima slike u vašem Bootstrap karuselu.

HTML označavanje karusela:

CSS kod karusela:

Item-responsive (position: relative; /* relativno pozicioniranje */) .item-responsive:before ( display: block; /* prikaz elementa kao bloka */ content: ""; /* sadržaj pseudoelementa */ širina : 100%; /* širina elementa */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content ( pozicija: apsolutna; /* apsolutni položaj elementa * / /* položaj elementa */ gore: 0; lijevo: 0; desno: 0; dolje: 0; veličina pozadine: naslovnica !važno; )

Da bi objekt dobio određenu širinu i visinu, postoje dva svojstva u CSS-u - širina i visina (odnosno). Uz njihovu pomoć možete postaviti fiksne veličine za elemente, bilo da se radi o bočnoj traci, slici, tablici ili bilo kojem bloku.

Značajke izračuna širine i visine

Možete koristiti bilo koju jedinicu duljine u CSS-u za definiranje širine ili visine objekta. Piksele je najlakše razumjeti. Ako koristite zapis postotaka, imajte na umu da će širina objekta ovisiti o širini njegovog roditelja. Ako ne postoji, tada se širina elementa izračunava na temelju širine prozora preglednika (ako korisnik promijeni širinu prozora, vrijednost širine će se ponovno izračunati).

Također možete koristiti em jedinicu kao vrijednost širine, koja je približno ista kao veličina fonta teksta, ali samo u konvencionalnim jedinicama. Na primjer, postavili ste veličinu fonta na 24 px. Tada će 1em za ovaj element biti jednak 24px, a ako postavite width: 2em tada će širina biti 2x24px = 48 piksela. Ako veličina fonta nije postavljena, bit će naslijeđena.

Visina, određena kao postotak, izračunava se na isti način kao i širina, ali se izračun temelji na visini nadređenog elementa, a ne na njegovoj širini. Ako nema roditelja, visina će ovisiti o visini prozora preglednika.

Postotak širine i visine podređenog elementa izračunava se na temelju dimenzija nadređenog

Što je uključeno u širinu i visinu

Vrijedno je odmah zapamtiti da svojstva širine i visine imaju osobitost - ne uključuju vrijednosti margine, ispune i granice. Vrijednost koju postavite za širinu/visinu značit će samo širinu/visinu područja sadržaja elementa.

Dakle, da bi se izračunala, na primjer, stvarna širina elementa (prostor koji će on stvarno zauzimati na ekranu), potrebno je malo aritmetike. Stvarna širina je zbroj vrijednosti kao što su širina, ispuna, rub i margina. Podsjetimo se da smo prethodno pogledali kako izgleda model CSS okvira.

Da bismo učvrstili znanje, pokazat ćemo primjer. Recimo da imate element s ovim stilom:

Širina: 200 px; margin-lijevo: 15px; margina-desno: 15px; padding-left: 10px; border-left: 3px solid #333;

Da biste izračunali stvarnu širinu elementa, izvršite zbrajanje:

širina + margina-lijevo + margina-desno + padding-lijevo + rub-lijevo = 200px + 15px + 15px + 10px + 3px = 243 px (stvarna širina)

Svojstvo visine može biti korisno ako trebate precizno kontrolirati, na primjer, visinu slike. Međutim, ako će spremnik sadržavati tekst ili bilo koji drugi sadržaj koji može varirati u visini, nije preporučljivo postaviti fiksnu visinu za spremnik, budući da takav raspored može dovesti do neočekivanog rezultata - sadržaj će biti prikazan na vrhu drugog sadržaja.

Umjesto fiksne visine koristite height: auto - ovaj unos znači da će se visina objekta izračunati automatski, ovisno o sadržaju koji sadrži.

Drugi način da se izbjegne kolaps izgleda je korištenje overflow: auto notacije. U tom slučaju, ako visina sadržaja premašuje visinu njegovog spremnika, preglednik će spremniku dodati traku za pomicanje.

U sljedećoj lekciji naučit ćete kako možete nadjačati širinu elementa koristeći zanimljivo i vrlo korisno svojstvo