Príklad

HTML

CSS

Výsledok

Obavy s dostupnosťou

Uistite sa, že prvky nastavené s výškou nie sú orezané a/alebo nezakrývajú iný obsah, keď je stránka zväčšená, aby sa zväčšila veľkosť textu.

technické údaje

Kompatibilita prehliadača

Tabuľka kompatibility na tejto stránke je vygenerovaná zo štruktúrovaných údajov. Ak by ste chceli prispieť k údajom, pozrite si https://github.com/mdn/browser-compat-data a pošlite nám žiadosť o stiahnutie.

Aktualizujte údaje o kompatibilite na GitHub

Legenda

Dobrý deň, milí čitatelia! Dnes sa pozrieme na to, ako nastaviť veľkosť prvkov bloku na webovej stránke pomocou vlastností CSS a nakonfigurovať zobrazenie obsahu, ak sa do prvku nezmestí.

šírka a výška - šírka a výška prvkov v css

Pomocou atribútov štýlu šírka a výška môžete nastaviť šírku a výšku prvkov bloku, v tomto poradí:

šírka: auto|<ширина>|dediť
výška: auto|<ширина>|dediť

Ako hodnoty môžete použiť akékoľvek merné jednotky dostupné v css – napríklad pixely (px), palce (in), body (pt) atď.:

p (šírka: 200 pixelov; výška: 150 pixelov)

Okrem absolútnych jednotiek môžete nastaviť relatívnu veľkosť prvkov v percentách. V tomto prípade bude šírka a výška prvku závisieť od šírky a výšky nadradeného prvku. Ak rodič nie je explicitne zadaný, rozmery budú závisieť od okna prehliadača.

div (šírka: 40 % ;)

Auto ponecháva kontrolu nad veľkosťou prvkov na webovom prehliadači a je predvolenou hodnotou. V tomto prípade budú rozmery prvku také, aby úplne vyhovovali celému jeho obsahu.

Pozrime sa na pár príkladov.

výsledok:

V tomto príklade sme vytvorili div a vnorili sme do neho odsek p s textom. Pre div sme striktne nastavili rozmery na 300 x 300 pixelov. Prvok p má hodnoty vlastností šírka a výška rovné auto, takže ako môžete vidieť na snímke obrazovky, jeho šírka je nastavená rovnako ako šírka nadradeného prvku a jeho výška je taká, aby sa doň zmestil celý text obsiahnutý v odseku.

Teraz zmeňme nastavenia css pre odsek p a nastavme pevné rozmery:

Vrstva2 (
pozadie: #eee;
šírka: 250px;
}

výsledok:

Ako vidíte, šírka odseku sa zúžila a rovná sa 250 pixelom a jeho výška sa zväčšila tak, aby sa text zmestil, pretože parameter výšky zostal rovnaký ako auto.

Teraz nastavíme výšku a šírku odseku v percentách:

Vrstva2 (
pozadie: #eee;
šírka: 50 %;
výška: 50 %;
}

výsledok:

Ako môžete vidieť na obrázku, šírka prvku p sa rovná polovici šírky prvku div. A výška sa zvýšila a rovnala sa 75 percentám výšky div.

Pri zadávaní šírky a výšky akýchkoľvek prvkov v relatívnych jednotkách možno budete musieť zadať minimálne a maximálne možné veľkosti. Veď napríklad pri zmene veľkosti okna prehliadača sa rozmery prvku môžu zmenšiť a zväčšiť až na takú veľkosť, že čitateľnosť stránky bude veľmi nízka.

Minimálnu šírku a výšku môžete definovať pomocou atribútov min-width a min-heigh:

min-šírka:<ширина>
minimálna výška:<высота>

Podobné atribúty štýlu max-width a max-height vám umožňujú nastaviť maximálne veľkosti:

maximálna šírka:<ширина>
maximálna výška:<высота>

Je zrejmé, že pri nastavení maximálnych a minimálnych hodnôt výšky a šírky nemôžu byť rozmery prvku väčšie ako maximálne a menšie ako minimálne hodnoty.

Stojí za to objasniť túto úlohu parametre výšky a šírky majú zmysel len pre blokové značky, keďže pre vložené prvky tieto parametre prehliadač nespracováva.

Môže sa stať, že pri nastavení pevných parametrov pre výšku a šírku prvku sa obsah, ktorý obsahuje, nemusí zmestiť do ohraničenej oblasti.

Napríklad znížme veľkosť odseku p z príkladov uvedených vyššie na 100 pixelov:

Vrstva2 (
pozadie: #eee;
šírka: 100px;
výška: 100px;
}

výsledok:

Ako vidíte, text prekročil hranice odseku a nevyzerá to veľmi pekne. Aby sa predišlo takýmto situáciám, existuje pravidlo CSS - pretečenie.

Parameter pretečenia na skrytie (skryté, viditeľné) alebo posúvanie (rolovanie, automatické) obsahu

Pretečenie obsahu môže nastať, keď je obmedzená šírka aj výška prvku. Pozrime sa na dva odseky:

Text prvého odseku

Text druhého odseku

výsledok:

Keďže nie je špecifikovaná ani šírka, ani výška odsekov, prehliadač ich vypočítava nezávisle na základe vlastného chápania hodnoty auto. V dôsledku toho odseky zaberali všetok dostupný priestor na šírku a na výšku v súlade s obsahom, ktorý obsahovali.

Teraz obmedzme šírku prvého odseku:

Text prvého odseku

Text druhého odseku

výsledok:

Šírka odseku bola podľa očakávania zmenšená a výška bola nastavená tak, aby vyhovovala celému textu.

Teraz obmedzme výšku prvého odseku:

Text prvého odseku

Text druhého odseku

V dôsledku toho sa ukázalo, že text sa nezmestil do takto obmedzeného odseku a preto sa dostal do oblasti dolného suseda. Preto je prakticky nemožné prečítať text v prvom ani druhom odseku. Ide o kontrolu správania obsahu v takýchto situáciách pravidlo pretečenia:

pretečenie: viditeľné|skryté|scroll|auto|dedit

V predvolenom nastavení je pretečenie nastavené na viditeľné, čo prehliadaču povie, aby zobrazil obsah, ktorý sa nezmestí do kontajnera. Výsledok je možné vidieť na príklade vyššie.

Pravidlo skryje všetko, čo sa nezmestí do kontajnera:

Hodnota posúvania zobrazí zvislé a vodorovné posúvače na prvku, aj keď sa zmestí celý obsah:

Text prvého odseku

Text druhého odseku

Najpopulárnejším a najlogickejším riešením, ak potrebujete vytvoriť posúvače pre kontajner, je hodnota auto. V tomto prípade prehliadač sám určí, kedy a na ktorých osiach má zobrazovať posuvníky:

Text prvého odseku

Text druhého odseku

výsledok:

Na prispôsobenie posuvníkov môžete použiť aj atribúty štýlu overflow-x a overflow-y, ktoré umožňujú prispôsobiť zobrazenie rolovania na jednotlivých osiach. Je teda zodpovedný za horizontálna os, a pre vertikálna os.

Preto, ak napríklad potrebujete, aby sa horizontálne posúvanie nikdy neobjavilo v odseku a vertikálne posúvanie, aby sa zobrazovalo iba v prípade potreby, stačí napísať nasledujúce pravidlo css:

p(pretečenie-x:skryté;pretečenie-y:auto;)

A problém bude vyriešený.

To je všetko. Dobudúcna. Nezabudnite sa prihlásiť na odber aktualizácií blogu a budem vďačný, ak použijete tlačidlá sociálnych sietí.

Výška a šírka prvku sú vypočítané množstvá. Každý prvok webovej stránky tvorí obdĺžnikovú oblasť, ktorá sa skladá z niekoľkých oblastí - obsahové oblasti, vypchávkové oblasti, rámové oblasti A poľné oblasti element.

Medzi obsahom prvku a jeho hranicou sú odsadenie výplň, mimo hranice prvku - poliach marža . Pre každý prvok existuje oblasť obsahu, ostatné oblasti sú voliteľné.

1. Výška prvku

Vlastnosť height určuje výšku obsahu prvku bloku a nemá žiadny vplyv na prvky v riadku display: inline; . Výška vložených prvkov sa rovná výške ich obsahu. Záporné hodnoty nie sú povolené. Nehnuteľnosť sa nededí.

Syntax

P (výška: 100px;)

2. Šírka prvku

Vlastnosť width určuje šírku obsahu elementu bloku a nemá žiadny vplyv na inline elementy display: inline; . Šírka vložených prvkov sa rovná šírke ich obsahu. Záporné hodnoty nie sú povolené. Nehnuteľnosť sa nededí.

Syntax

P (šírka: 100px;)

3. Výška a šírka absolútne umiestneného prvku

Nastavte šírku a výšku absolútne umiestnenej pozície prvku: absolútna; nie vždy potrebné, pretože v tomto prípade sú výška a šírka implicitne určené odsadením prvku. Ak má prvok zadané okraje a okraje, zmenší sa veľkosť oblasti obsahu o príslušné hodnoty.

Div ( pozadie: #6A7690; pozícia: absolútna; hore: 0; dole: 0; vľavo: 50 %; vpravo: 0; ) /*v tomto prípade je výška prvku 100 %, šírka 50 % rodičovský blok*/
Ryža. 2. Výška a šírka absolútne umiestneného prvku

4. Výplň prvku

Pomocou vlastnosti padding môžete nastaviť padding súčasne pre niekoľko strán prvku v nasledujúcom poradí: . Ak má prvok pozadie, bude sa vzťahovať aj na výplň. Záporné hodnoty nie sú povolené. Nehnuteľnosť sa nededí.

Ak sú uvedené tri hodnoty, napríklad div (výplň: 10px 20px 30px;), potom budú rozdelené v tomto poradí: prvá hodnota je horná výplň, druhá je výplň vpravo a vľavo, tretia je spodná výplň.
Ak sú zadané dve hodnoty, napríklad div (výplň: 10px 20px;), potom prvá nastaví hornú a spodnú výplň, druhá nastaví pravú a ľavú.
Jediná hodnota, ako napríklad div (odsadenie: 10px;) , nastaví rovnaké odsadenie na všetkých stranách prvku.

Syntax

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

4.1. Polstrovanie na jednej strane prvku

Ak chcete nastaviť odsadenie iba na jednej strane prvku, musíte použiť jednu z vlastností padding-top , padding-right , padding-bottom , padding-left , napríklad:

P (odsadenie vľavo: 10px;)

5. Okraje prvkov

Väčšina prvkov je od seba oddelená okrajmi. Vlastnosť margin je krátky formulár na zaznamenávanie polí prvku v nasledujúcom poradí: hore, vpravo, dole, vľavo. Používa sa, keď potrebujete nastaviť okraje na niekoľkých stranách, ale nie nevyhnutne na štyroch. Vertikálne susediace okraje prvkov bloku sú zbalené a horné a spodné okraje nemajú žiadny vplyv na vložené prvky. Záporné hodnoty sú povolené. Nehnuteľnosť sa nededí.

Ak sú uvedené tri hodnoty, napríklad div (okraj: 10px 20px 30px;), potom budú rozdelené v nasledujúcom poradí: prvá hodnota je horný okraj, druhá je pravý a ľavý okraj, tretia je spodný okraj.
Ak sú zadané dve hodnoty, napríklad div (okraj: 10px 20px;), potom prvá nastaví horný a dolný okraj, druhá nastaví pravý a ľavý okraj.
Jediná hodnota, ako napríklad div (margin: 10px;) , nastaví rovnaké okraje na všetkých stranách prvku.

(margin: 0 auto;) bude fungovať iba vtedy, ak je šírka prvku špecifikovaná explicitne.

Syntax

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

5.1. Okraje na jednej strane prvku

Vlastnosti margin-top , margin-right , margin-bottom , margin-left ovládajú zodpovedajúce okraje na každej strane prvku, napríklad:

P (ľavý okraj: 10px;)

6. Obmedzenie šírky a výšky

CSS podporuje aj niekoľko ďalších vlastností súvisiacich s nastavením výšky a šírky prvkov webovej stránky: min-height, min-width, max-height a max-width. Tieto vlastnosti vám umožňujú nastaviť minimálnu a maximálnu hodnotu šírky alebo výšky prvku, čo umožňuje prvku vyplniť dostupný priestor. Vlastnosti sa často používajú na responzívny dizajn webových stránok. Vzťahuje sa na všetky prvky okrem vložených prvkov a prvkov tabuľky. Vždy prídu po hlavnom pravidle, t.j. po zadaní výšky alebo šírky prvku. Nezdedené.

Bežné rozmery môžete určiť pomocou niektorých jednotiek merania a obmedzenia veľkosti pomocou iných jednotiek, napríklad:

Div (šírka: 400 pixelov; maximálna šírka: 50 %; )

Prvok bude mať šírku 400px iba vtedy, ak táto hodnota nepresiahne 50% šírky kontajnerového bloku, inak sa jeho šírka zmenší.

V tomto článku sa pozrieme na to, ako v CSS môžete nastaviť výšku bloku ako percento jeho šírky. Uvažujme o použití tejto technológie na príklade vytvorenia Bootstrap kolotoča (slider) z obrázkov rôznych veľkostí.

Vytvorenie bloku s výškou, ktorá je určitým percentom jeho šírky

1. Vytvorte HTML štruktúru z 2 blokov:
   Prvý blok má 2 triedy. Pomocou triedy reagujúcej na položky nastavíme relatívne umiestnenie bloku. Toto sa musí urobiť tak, aby blok 2 (ktorý bude mať absolútne umiestnenie) bol umiestnený relatívne k nemu. Okrem toho sa táto trieda používa aj na pridanie pseudoprvku:pred obsah zodpovedajúcich prvkov (responzívny na položku). Tento prvok nastaví požadovanú výšku bloku vzhľadom na jeho šírku pomocou vlastnosti CSS padding-top. Trik tejto metódy spočíva v tom, že ak je vlastnosť padding nastavená na nie v pixeloch, ale v percentách, potom to prehliadač vypočíta vzhľadom na jeho šírku. Takto môžete získať blok s požadovanou výškou. Ďalším krokom je dať bloku 2 absolútnu polohu a zarovnať ho s prvým blokom.
2. Pridajte na stránku nasledujúci kód CSS: .item-responsive ( position: relativní; /* relatívne umiestnenie */ ) .item-responsive:before ( display: block; /* zobrazenie prvku ako bloku */ content: "" ; /* pseudoprvok obsahu */ šírka: 100 %; /* šírka prvku */ ) .item-16by9 ( padding-top: 56,25 %; /* (9:16)*100 % */ ) .item-responsive >.obsah ( poloha: absolútna; /* absolútna poloha prvku */ /* poloha prvku */ hore: 0; vľavo: 0; vpravo: 0; dole: 0; ) /* V prípade potreby (pre bloky, ktoré majú tieto triedy) */ .item -4by3 ( padding-top: 75 %; /* (3:4)*100 % */ ) .item-2by1 ( padding-top: 50 %; /* (1:2) *100 % */ ) .item -1by1 ( padding-top: 100%; /* (1:1)*100% */ )

Pomocou vyššie uvedenej technológie vytvorte kolotoč Bootstrap

Ak nepoznáte Bootstrap a chcete vedieť, čo to je, môžete použiť článok Úvod do Bootstrapu.

Pozrime sa na príklad, v ktorom použijeme vyššie uvedenú štruktúru HTML a kód CSS na zobrazenie snímok kolotoča Bootstrap.

Ako obrázky použijeme nasledujúce súbory:

• carousel_1.jpg (šírka = 736 pixelov, výška = 552 pixelov, pomer strán (výška k šírke) = 1,33);
• carousel_2.jpg (šírka = 1155px, výška = 1280px, pomer strán (výška k šírke) = 0,9);
• carousel_3.jpg (šírka = 1846px, výška = 1028px, pomer strán (výška k šírke) = 1,8);
• carousel_4.jpg (šírka = 1140px, výška = 550px, pomer strán (výška k šírke) = 2,07);
• carousel_5.jpg (šírka = 800px, výška = 600px, pomer strán (výška k šírke) = 1,33);

Nastavíme obrázky ako pozadie. To vám umožní použiť 3 obrázky s nerovnakými pomermi strán v karuseli Bootstrap.

HTML označenie karuselu:

CSS kód karuselu:

Item-responsive ( position: relatívne; /* relatívne umiestnenie */ ) .item-responsive:before ( display: block; /* zobrazenie prvku ako bloku */ content: ""; /* pseudo-obsah prvku */ šírka : 100 %; /* šírka prvku */ ) .item-16by9 ( padding-top: 56,25 %; /* (9:16)*100 % */ ) .item-responsive>.content ( position: absolute; /* absolútna poloha prvku * / /* poloha prvku */ hore: 0; vľavo: 0; vpravo: 0; dole: 0; veľkosť pozadia: obal !dôležité; )

Na to, aby objekt dostal konkrétnu šírku a výšku, existujú v CSS dve vlastnosti – šírka a výška (v tomto poradí). S ich pomocou môžete nastaviť pevné veľkosti prvkov, či už ide o bočný panel, obrázok, tabuľku alebo akýkoľvek blok.

Funkcie výpočtu šírky a výšky

Na definovanie šírky alebo výšky objektu môžete v CSS použiť akúkoľvek jednotku dĺžky. Pixely sú najjednoduchšie na pochopenie. Ak používate percentuálny zápis, majte na pamäti, že šírka objektu bude závisieť od šírky jeho rodiča. Ak tam nie je žiadna, potom sa šírka prvku vypočíta na základe šírky okna prehliadača (ak používateľ zmení šírku okna, hodnota šírky sa prepočíta).

Ako hodnotu šírky môžete použiť aj jednotku em, ktorá je približne rovnaká ako veľkosť písma textu, ale iba v konvenčných jednotkách. Napríklad nastavíte veľkosť písma na 24 pixelov. Potom sa 1 em pre tento prvok bude rovnať 24 pixelom a ak nastavíte šírku: 2 em, šírka bude 2 x 24 pixelov = 48 pixelov. Ak nie je nastavená veľkosť písma, bude sa dediť.

Výška zadaná v percentách sa vypočíta rovnakým spôsobom ako šírka, ale výpočet je založený na výške nadradeného prvku a nie na jeho šírke. Ak neexistuje žiadny rodič, výška bude závisieť od výšky okna prehliadača.

Percento šírky a výšky podradeného prvku sa vypočíta na základe rozmerov nadradeného prvku

Čo je zahrnuté v šírke a výške

Okamžite je potrebné pripomenúť, že vlastnosti šírky a výšky majú zvláštnosť - nezahŕňajú hodnoty margin, padding a border. Hodnota, ktorú nastavíte pre šírku/výšku, bude indikovať iba šírku/výšku oblasti obsahu prvku.

Aby sme mohli napríklad vypočítať skutočnú šírku prvku (miesto, ktoré skutočne zaberie na obrazovke), je potrebná malá aritmetika. Skutočná šírka je súčet hodnôt, ako sú šírka, výplň, okraj a okraj. Pripomeňme, že sme sa predtým pozreli na to, ako vyzerá model CSS boxu.

Na upevnenie vedomostí si ukážeme príklad. Povedzme, že máte prvok s týmto štýlom:

Šírka: 200px; ľavý okraj: 15px; pravý okraj: 15px; padding-left: 10px; border-left: 3px solid #333;

Ak chcete vypočítať skutočnú šírku prvku, vykonajte sčítanie:

šírka + ľavý okraj + pravý okraj + ľavý padding + ľavý okraj = 200 pixelov + 15 pixelov + 15 pixelov + 10 pixelov + 3 pixely = 243 pixelov (skutočná šírka)

Vlastnosť height môže byť užitočná, ak potrebujete presne ovládať napríklad výšku obrázka. Ak však kontajner bude obsahovať text alebo akýkoľvek iný obsah, ktorý sa môže líšiť výškou, dôrazne sa neodporúča nastaviť pevnú výšku kontajnera, pretože takéto rozloženie môže viesť k neočakávanému výsledku – obsah sa zobrazí navrchu. iného obsahu.

Namiesto pevnej výšky použite výšku: auto - tento údaj znamená, že výška objektu sa vypočíta automaticky v závislosti od obsahu, ktorý obsahuje.

Ďalším spôsobom, ako sa vyhnúť zrúteniu rozloženia, je použiť pretečenie: automatickú notáciu. V tomto prípade, ak výška obsahu presahuje výšku jeho kontajnera, prehliadač pridá do kontajnera posuvník.

V ďalšej lekcii sa dozviete, ako môžete prepísať šírku prvku pomocou zaujímavej a veľmi užitočnej vlastnosti