Primer

HTML

CSS

Rezultat

Pomisleki glede dostopnosti

Prepričajte se, da elementi, nastavljeni z višino, niso obrezani in/ali ne zakrivajo druge vsebine, ko je stran povečana za povečanje velikosti besedila.

Specifikacije

Združljivost brskalnika

Tabela združljivosti na tej strani je ustvarjena iz strukturiranih podatkov. Če želite prispevati k podatkom, obiščite https://github.com/mdn/browser-compat-data in nam pošljite zahtevo za vleko.

Posodobite podatke o združljivosti na GitHub

Legenda

Pozdravljeni, dragi bralci! Danes si bomo ogledali, kako nastaviti velikost elementov blokov na spletni strani z uporabo lastnosti CSS in konfigurirati prikaz vsebine, če se ne prilega elementu.

širina in višina - širina in višina elementov v css

Z atributoma sloga širine in višine lahko nastavite širino oziroma višino blokovnih elementov:

širina: avto|<ширина>|podedovati
višina: avto|<ширина>|podedovati

Kot vrednosti lahko uporabite vse merske enote, ki so na voljo v css - na primer slikovne pike (px), palci (in), točke (pt) itd.:

p (širina:200px; višina:150px)

Poleg absolutnih enot lahko nastavite relativno velikost elementov v odstotkih. V tem primeru bosta širina in višina elementa odvisni od širine in višine nadrejenega elementa. Če nadrejeni element ni izrecno naveden, bodo dimenzije odvisne od okna brskalnika.

div (width:40 %;)

Vrednost auto prepušča nadzor nad velikostjo elementa spletnemu brskalniku in je privzeta vrednost. V tem primeru bodo dimenzije elementa takšne, da se popolnoma prilega vsej njegovi vsebini.

Poglejmo si nekaj primerov.

rezultat:

V tem primeru smo ustvarili div in v njem ugnezdili odstavek p z besedilom. Za div smo strogo nastavili dimenzije na 300 x 300 slikovnih pik. Element p ima vrednosti lastnosti širine in višine enake samodejnim, tako da, kot lahko vidite na posnetku zaslona, ​​je njegova širina nastavljena enako širini nadrejenega elementa, njegova višina pa je taka, da se prilega vsemu besedilu v odstavek.

Zdaj pa spremenimo nastavitve css za odstavek p in nastavimo fiksne dimenzije:

Layer2 (
ozadje: #eee;
širina:250px;
}

rezultat:

Kot lahko vidite, je širina odstavka postala ožja in enaka 250 pikslov, njegova višina pa se je povečala, tako da se besedilo prilega, saj je parameter višine ostal enak samodejnemu.

Zdaj pa nastavimo višino in širino odstavka v odstotkih:

Layer2 (
ozadje: #eee;
širina: 50 %;
višina: 50 %;
}

rezultat:

Kot lahko vidite na sliki, je širina elementa p postala enaka polovici širine elementa div. In višina se je povečala in postala enaka 75 odstotkom višine diva.

Ko podajate širino in višino katerega koli elementa v relativnih enotah, boste morda morali določiti najmanjšo in največjo možno velikost. Navsezadnje se lahko na primer pri spreminjanju velikosti okna brskalnika dimenzije elementa zmanjšajo in povečajo do takšne velikosti, da postane berljivost spletnega mesta zelo nizka.

Najmanjšo širino in višino lahko določite z atributoma min-width in min-heigh:

najmanjša širina:<ширина>
najmanjša višina:<высота>

Atributa podobnega sloga max-width in max-height omogočata nastavitev največjih velikosti:

največja širina:<ширина>
največja višina:<высота>

Jasno je, da pri nastavitvi največjih in najmanjših vrednosti višine in širine dimenzije elementa ne morejo postati večje od največjih in manjše od najmanjših vrednosti.

Vredno je pojasniti, da naloga parametra višina in širina sta smiselna samo za oznake blokov, saj za elemente v vrstici teh parametrov brskalnik ne obdeluje.

Lahko se zgodi, da se pri nastavitvi togih parametrov za višino in širino elementa vsebina, ki jo vsebuje, morda ne prilega omejenemu območju.

Na primer, zmanjšajmo velikost odstavka p iz zgoraj obravnavanih primerov na 100 slikovnih pik:

Layer2 (
ozadje: #eee;
širina:100px;
višina:100px;
}

rezultat:

Kot lahko vidite, je besedilo preseglo meje odstavka in ni videti zelo lepo. Da bi se izognili takim situacijam, obstaja pravilo CSS - overflow.

Parameter prelivanja za skrivanje (skrite, vidne) ali drsenje (scroll, auto) vsebine

Do prelivanja vsebine lahko pride, če sta omejeni širina in višina elementa. Poglejmo dva odstavka:

Besedilo prvega odstavka

Besedilo drugega odstavka

rezultat:

Ker niti širina niti višina odstavkov nista podani, ju brskalnik neodvisno izračuna na podlagi lastnega razumevanja vrednosti auto. Tako so odstavki po širini zavzeli ves razpoložljivi prostor, po višini pa glede na vsebino, ki so jo vsebovali.

Zdaj pa omejimo širino prvega odstavka:

Besedilo prvega odstavka

Besedilo drugega odstavka

rezultat:

Širina odstavka je bila pričakovano zmanjšana, višina pa nastavljena tako, da sprejme celotno besedilo.

No, zdaj pa omejimo višino prvega odstavka:

Besedilo prvega odstavka

Besedilo drugega odstavka

Posledično se je izkazalo, da besedilo ne sodi v tako omejen odstavek in je zato zašlo v območje spodnjega soseda. Zato je praktično nemogoče prebrati besedilo ne v prvem ne v drugem odstavku. To je nadzor obnašanja vsebine v takih situacijah, ki obstaja prelivno pravilo:

overflow: vidno|skrito|drsenje|samodejno|podeduj

Prelivanje je privzeto nastavljeno na vidno, kar brskalniku pove, naj prikaže vsebino, ki ne sodi v vsebnik. Rezultat je viden v zgornjem primeru.

Pravilo skrije vse, kar ne sodi v vsebnik:

Vrednost drsenja bo prikazala navpične in vodoravne drsne trakove na elementu, tudi če se vsa vsebina prilega:

Besedilo prvega odstavka

Besedilo drugega odstavka

Najbolj priljubljena in logična rešitev, če morate narediti drsne trakove za vsebnik, je vrednost avto. V tem primeru bo brskalnik sam določil, kdaj in na katerih oseh naj prikaže drsne trakove:

Besedilo prvega odstavka

Besedilo drugega odstavka

rezultat:

Za prilagoditev drsnih trakov lahko uporabite tudi stilska atributa overflow-x in overflow-y, ki omogočata prilagajanje prikaza drsenja po posameznih oseh. Tako je odgovoren za vodoravna os, in za navpična os.

Torej, če na primer potrebujete, da se vodoravno drsenje nikoli ne prikaže v odstavku in da se navpično drsenje pojavi le, ko je potrebno, potem napišite naslednje pravilo css:

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

In problem bo rešen.

To je vse. Do naslednjič. Ne pozabite se naročiti na posodobitve spletnega dnevnika in hvaležen vam bom, če boste uporabljali gumbe družbenih omrežij.

Višina in širina elementa so izračunane količine. Vsak element spletne strani tvori pravokotno območje, ki je sestavljeno iz več področij – vsebinska področja, območja oblazinjenja, območja okvirja in poljske površine element.

Med vsebino elementa in njegovim robom sta vdolbina oblazinjenje, zunaj meje elementa - polja marža . Območje vsebine obstaja za vsak element; druga področja so neobvezna.

1. Višina elementa

Lastnost višine podaja višino vsebine elementa bloka in nima vpliva na prikaz elementov v vrstici: inline; . Višina inline elementov je enaka višini njihove vsebine. Negativne vrednosti niso dovoljene. Nepremičnina se ne deduje.

Sintaksa

P (višina: 100 slikovnih pik;)

2. Širina elementa

Lastnost širine določa širino vsebine elementa bloka in nima vpliva na prikaz elementov v vrstici: inline; . Širina inline elementov je enaka širini njihove vsebine. Negativne vrednosti niso dovoljene. Nepremičnina se ne deduje.

Sintaksa

P (širina: 100 slikovnih pik;)

3. Višina in širina absolutno pozicioniranega elementa

Nastavite širino in višino absolutno pozicioniranega elementa position: absolute; ni vedno potrebno, saj sta v tem primeru višina in širina implicitno določena z odmikom elementa. Če ima element določene obrobe in robove, zmanjšajo velikost območja vsebine za ustrezne vrednosti.

Div (ozadje: #6A7690; položaj: absolutno; zgoraj: 0; spodaj: 0; levo: 50 %; desno: 0; ) /*v tem primeru je višina elementa 100 %, širina 50 % nadrejeni blok*/
riž. 2. Višina in širina absolutno pozicioniranega elementa

4. Oblazinjenje elementov

Z lastnostjo oblazinjenja lahko nastavite oblazinjenje hkrati za več strani elementa v naslednjem vrstnem redu: . Če ima element ozadje, bo to veljalo tudi za oblazinjenje. Negativne vrednosti niso dovoljene. Nepremičnina se ne deduje.

Če so podane tri vrednosti, na primer div (padding: 10px 20px 30px;), bodo porazdeljene v naslednjem vrstnem redu: prva vrednost je zgornje oblazinjenje, druga je desno in levo oblazinjenje, tretja je spodnja obloga.
Če sta podani dve vrednosti, na primer div (padding: 10px 20px;), bo prva nastavila zgornje in spodnje oblazinjenje, druga pa desno in levo.
Ena sama vrednost, kot je div (padding: 10px;) , bo nastavila enako oblazinjenje na vseh straneh elementa.

Sintaksa

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

4.1. Oblazinjenje na eni strani elementa

Če želite nastaviti oblazinjenje samo na eni strani elementa, morate uporabiti eno od lastnosti padding-top, padding-right, padding-bottom, padding-left, na primer:

P (oblazinjenje-levo: 10px;)

5. Robovi elementov

Večina elementov je med seboj ločena z robovi. Lastnost roba je kratka oblika za zapis polj elementa v naslednjem vrstnem redu: zgoraj, desno, spodaj, levo. Uporablja se, ko morate nastaviti robove na več straneh, vendar ne nujno na štirih. Navpično sosednji robovi blokovnih elementov so strnjeni, zgornji in spodnji rob pa ne vplivata na elemente v vrstici. Negativne vrednosti so dovoljene. Nepremičnina se ne deduje.

Če so podane tri vrednosti, na primer div (margin: 10px 20px 30px;), bodo porazdeljene v naslednjem vrstnem redu: prva vrednost je zgornji rob, druga desni in levi rob, tretja je spodnji rob.
Če sta podani dve vrednosti, na primer div (margin: 10px 20px;), potem bo prva nastavila zgornji in spodnji rob, druga bo nastavila desno in levo.
Ena sama vrednost, kot je div (margin: 10px;) , bo nastavila enake robove na vseh straneh elementa.

(margin: 0 auto;) bo deloval le, če je širina elementa izrecno določena.

Sintaksa

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

5.1. Robovi na eni strani elementa

Lastnosti margin-top , margin-right , margin-bottom , margin-left nadzorujejo ustrezne robove na vsaki strani elementa, na primer:

P (levi rob: 10 slikovnih pik;)

6. Omejitev širine in višine

CSS podpira tudi več drugih lastnosti, povezanih z nastavitvijo višine in širine elementov spletne strani: min-height, min-width, max-height in max-width. Te lastnosti vam omogočajo, da nastavite najmanjšo in največjo vrednost za širino ali višino elementa, kar elementu omogoča, da zapolni razpoložljivi prostor. Lastnosti se pogosto uporabljajo za odzivno oblikovanje spletnih strani. Velja za vse elemente, razen za elemente v vrstici in tabelo. Vedno pridejo po glavnem pravilu, tj. po določitvi višine ali širine elementa. Ni podedovano.

Z nekaterimi merskimi enotami lahko določite navadne dimenzije, z drugimi enotami pa omejitve velikosti, na primer:

Div (širina: 400 slikovnih pik; največja širina: 50 %; )

Element bo imel širino 400 slikovnih pik le, če ta vrednost ne presega 50 % širine bloka vsebnika, sicer bo njegova širina zmanjšana.

V tem članku si bomo ogledali, kako lahko v CSS nastavite višino bloka kot odstotek njegove širine. Razmislimo o uporabi te tehnologije na primeru ustvarjanja Bootstrap vrtiljaka (drsnika) iz slik različnih velikosti.

Ustvarjanje bloka z višino, ki je določen odstotek njegove širine

1. Ustvarite strukturo HTML iz dveh blokov:
   Prvi blok ima 2 razreda. Z uporabo razreda, ki se odziva na elemente, bomo nastavili relativno pozicijo bloka. To je treba narediti tako, da se blok 2 (ki bo imel absolutno pozicioniranje) nahaja glede na njega. Poleg tega se ta razred uporablja tudi za dodajanje psevdoelementa:before pred vsebino ustreznih elementov (item-responsive). Ta element bo nastavil zahtevano višino bloka glede na njegovo širino z uporabo lastnosti CSS padding-top. Trik te metode je, da če je lastnost oblazinjenja nastavljena na ne v slikovnih pikah, ampak kot odstotek, potem ga bo brskalnik izračunal glede na njegovo širino. Tako lahko dobite blok z zahtevano višino. Naslednji korak je, da bloku 2 dodelite absolutni položaj in ga poravnate s prvim blokom.
2. Na stran dodajte naslednjo kodo CSS: .item-responsive ( position: relative; /* relative positioning */ ) .item-responsive:before ( display: block; /* prikaži element kot blok */ content: "" ; /* psevdoelement vsebine */ širina: 100 %; /* širina elementa */ ) .item-16by9 ( oblazinjenje na vrhu: 56,25 %; /* (9:16)*100 % */ ) .item-responsive >.content (position: absolute; /* absolutni položaj elementa */ /* položaj elementa */ top: 0; left: 0; right: 0; bottom: 0; ) /* Po potrebi (za bloke, ki imajo te razrede) */ .item -4by3 ( oblazinjenje na vrhu: 75 %; /* (3:4)*100 % */ ) .item-2by1 ( oblazinjenje na vrhu: 50 %; /* (1:2) *100 % */ ) .item -1by1 ( oblazinjenje na vrhu: 100 %; /* (1:1)*100 % */ )

Uporaba zgornje tehnologije za ustvarjanje vrtiljaka Bootstrap

Če niste seznanjeni z Bootstrapom in želite vedeti, kaj je, lahko uporabite članek Uvod v Bootstrap.

Oglejmo si primer, v katerem bomo uporabili zgornjo strukturo HTML in kodo CSS za prikaz diapozitivov vrtiljaka Bootstrap.

Kot slike bomo uporabili naslednje datoteke:

• carousel_1.jpg (širina = 736 slikovnih pik, višina = 552 slikovnih pik, razmerje stranic (višina proti širini) = 1,33);
• carousel_2.jpg (širina = 1155 slikovnih pik, višina = 1280 slikovnih pik, razmerje stranic (višina proti širini) = 0,9);
• carousel_3.jpg (širina = 1846 slikovnih pik, višina = 1028 slikovnih pik, razmerje stranic (višina proti širini) = 1,8);
• carousel_4.jpg (širina = 1140 slikovnih pik, višina = 550 slikovnih pik, razmerje stranic (višina proti širini) = 2,07);
• carousel_5.jpg (širina = 800 slikovnih pik, višina = 600 slikovnih pik, razmerje stranic (višina proti širini) = 1,33);

Slike bomo postavili za ozadje. To vam bo omogočilo uporabo 3 slik z neenakimi razmerji stranic v vrtiljaku Bootstrap.

HTML oznaka vrtiljaka:

Koda CSS Carousel:

Item-responsive ( position: relative; /* relative positioning */ ) .item-responsive:before ( display: block; /* prikaži element kot blok */ content: ""; /* vsebina psevdoelementa */ width : 100 %; /* širina elementa */ ) .item-16by9 ( padding-top: 56,25 %; /* (9:16)*100 % */ ) .item-responsive>.content ( položaj: absolutno; /* absolutni položaj elementa * / /* položaj elementa */ zgoraj: 0; levo: 0; desno: 0; spodaj: 0; velikost ozadja: naslovnica !pomembno; )

Da bi lahko predmet dobil določeno širino in višino, sta v CSS dve lastnosti - širina in višina (oziroma). Z njihovo pomočjo lahko nastavite fiksne velikosti za elemente, naj bo to stranska vrstica, slika, tabela ali kateri koli blok.

Značilnosti izračuna širine in višine

Za določitev širine ali višine predmeta lahko uporabite katero koli dolžinsko enoto v CSS. Piksle je najlažje razumeti. Če uporabljate zapis v odstotkih, ne pozabite, da bo širina predmeta odvisna od širine njegovega nadrejenega. Če ga ni, se širina elementa izračuna na podlagi širine okna brskalnika (če uporabnik spremeni širino okna, se vrednost širine preračuna).

Kot vrednost širine lahko uporabite tudi enoto em, ki je približno enaka velikosti pisave besedila, vendar le v običajnih enotah. Na primer, nastavite velikost pisave na 24 slikovnih pik. Potem bo 1em za ta element enak 24px, in če nastavite širino: 2em, bo širina 2x24px = 48 slikovnih pik. Če velikost pisave ni nastavljena, bo podedovana.

Višina, določena v odstotkih, se izračuna na enak način kot širina, vendar izračun temelji na višini nadrejenega elementa in ne na njegovi širini. Če nadrejenega elementa ni, bo višina odvisna od višine okna brskalnika.

Odstotek širine in višine podrejenega elementa se izračuna na podlagi dimenzij nadrejenega

Kaj je vključeno v širino in višino

Takoj se je treba spomniti, da imajo lastnosti širine in višine posebnost - ne vključujejo vrednosti roba, oblazinjenja in obrobe. Vrednost, ki jo nastavite za širino/višino, bo označevala samo širino/višino področja vsebine elementa.

Torej, da bi izračunali, na primer, dejansko širino elementa (prostor, ki ga bo dejansko zasedel na zaslonu), je potrebno malo aritmetike. Dejanska širina je vsota vrednosti, kot so širina, oblazinjenje, obroba in rob. Spomnimo se, da smo prej pogledali, kako izgleda okvirni model CSS.

Za utrjevanje znanja bomo pokazali primer. Recimo, da imate element s tem slogom:

Širina: 200 slikovnih pik; rob-levo: 15px; rob-desno: 15px; oblazinjenje-levo: 10px; obroba-levo: 3px polna #333;

Za izračun dejanske širine elementa izvedite seštevanje:

širina + rob-levo + rob-desno + obroba-levo + rob-levo = 200px + 15px + 15px + 10px + 3px = 243px (dejanska širina)

Lastnost višine je lahko uporabna, če morate natančno nadzorovati, na primer, višino slike. Če pa bo vsebnik vseboval besedilo ali katero koli drugo vsebino, ki se lahko razlikuje po višini, zelo ni priporočljivo nastaviti fiksne višine za vsebnik, saj lahko takšna postavitev privede do nepričakovanega rezultata - vsebina bo prikazana na vrhu druge vsebine.

Namesto fiksne višine uporabite height: auto - ta vnos pomeni, da bo višina predmeta izračunana samodejno, odvisno od vsebine, ki jo vsebuje.

Drugi način, da se izognete zrušitvi postavitve, je uporaba overflow: auto zapisa. V tem primeru, če višina vsebine presega višino vsebnika, bo brskalnik vsebniku dodal drsni trak.

V naslednji lekciji se boste naučili, kako lahko preglasite širino elementa z uporabo zanimive in zelo uporabne lastnosti