V predvolenom nastavení prvky bloku používajú automatickú šírku. To znamená, že prvok bude horizontálne natiahnutý presne toľko, koľko je voľného miesta. Predvolená výška blokových prvkov sa nastavuje automaticky, t.j. Prehliadač roztiahne oblasť obsahu vertikálne tak, aby sa zobrazil celý obsah. Ak chcete nastaviť vlastné rozmery pre oblasť obsahu prvku, môžete použiť vlastnosti width a height.
Vlastnosť CSS width vám umožňuje nastaviť šírku oblasti obsahu prvku a vlastnosť height vám umožňuje nastaviť výšku oblasti obsahu:
Všimnite si, že vlastnosti width a height určujú iba veľkosť oblasti obsahu; na výpočet celkovej šírky prvku bloku je potrebné pridať šírku oblasti obsahu, ľavú a pravú výplň a šírku ľavého a pravá hranica. To isté platí pre celkovú výšku prvku, iba všetky hodnoty sa počítajú vertikálne:
Pre tento odsek nastavíme len šírku a výšku.
Tento odsek obsahuje okrem šírky a výšky aj vnútornú výplň, okraj a vonkajšiu výplň.
Skúste »Príklad jasne ukazuje, že druhý prvok zaberá viac miesta ako prvý. Ak vypočítame pomocou nášho vzorca, potom rozmery prvého odseku sú 150 x 100 pixelov a rozmery druhého odseku sú:
| Celková výška: | 5 pixelov | + | 10 pixelov | + | 100 pixelov | + | 10 pixelov | + | 5 pixelov | = 130 pixelov |
| top rám | horný odsadenie | výška | nižšie odsadenie | nižšie rám |
teda 180 x 130 pixelov.
Pretečenie prvku
Keď určíte šírku a výšku prvku, mali by ste venovať pozornosť jednému dôležitému bodu – obsah umiestnený vo vnútri prvku môže presahovať zadanú veľkosť bloku. V tomto prípade bude časť obsahu presahovať hranice prvku. Aby ste sa vyhli tomuto nepríjemnému momentu, môžete použiť vlastnosť CSS overflow. Vlastnosť overflow hovorí prehliadaču, čo má robiť, ak obsah bloku prekročí jeho veľkosť. Táto vlastnosť môže nadobúdať jednu zo štyroch hodnôt:
- viditeľné – predvolená hodnota používaná prehliadačom. Nastavenie tejto hodnoty bude mať rovnaký účinok, ako keby ste nenastavili vlastnosť overflow.
- scroll – pridá k prvku vertikálne a horizontálne posúvače.
- auto - v prípade potreby pridá posuvníky.
- skrytý - skryje časť obsahu, ktorá presahuje hranice prvku bloku.
The výška Vlastnosť CSS určuje výšku prvku. Vlastnosť predvolene definuje výšku oblasti obsahu. Ak je však veľkosť poľa nastavená na hodnotu border-box , namiesto toho určuje výšku oblasti okraja .
Zdroj tohto interaktívneho príkladu je uložený v úložisku GitHub. Ak by ste chceli prispieť k projektu interaktívnych príkladov, naklonujte https://github.com/mdn/interactive-examples a pošlite nám žiadosť o stiahnutie.
Vlastnosti min-height a max-height prepíšu výšku .
Syntax
/* Hodnota kľúčového slova */ výška: auto; /*hodnoty
Dátový typ CSS predstavuje hodnotu vzdialenosti. Dĺžky možno použiť v mnohých vlastnostiach CSS, ako je šírka, výška, okraj, výplň, šírka okraja, veľkosť písma a tieň textu.">Formálna syntax
Príklad
HTML
CSS
div ( šírka: 250px; okraj-dolný okraj: 5px; orámovanie: 2px plná modrá; ) #taller (výška: 50px; ) #kratší (výška: 25px; ) #parent (výška: 100px; ) #child (výška: 50% šírka: 75% ;)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
| Špecifikácia | Postavenie | Komentujte |
|---|---|---|
| Modul vnútornej a vonkajšej veľkosti CSS úrovne 4 |
Návrh editora | |
| Modul vnútornej a vonkajšej veľkosti CSS úrovne 3 Definícia „výšky“ v tejto špecifikácii. |
Pracovný návrh | Pridané kľúčové slová max-content , min-content , fit-content. |
| Prechody CSS Definícia „výšky“ v tejto špecifikácii. |
Pracovný návrh | Výšku uvádza ako animovateľnú. |
| CSS úroveň 2 (revízia 1) Definícia „výšky“ v tejto špecifikácii. |
Odporúčanie | Pridáva podporu pre typ údajov CSS predstavuje hodnotu vzdialenosti. Dĺžky možno použiť v mnohých vlastnostiach CSS, ako je šírka, výška, okraj, výplň, šírka okraja, veľkosť písma a tieň textu."> |
| CSS úroveň 1 Definícia „výšky“ v tejto špecifikácii. |
Odporúčanie | Počiatočná definícia. |
| Pôvodná hodnota | auto |
|---|---|
| Týka sa | všetky prvky okrem nenahradených vložených prvkov, stĺpcov tabuľky a skupín stĺpcov |
| Zdedené | č |
| Percentá | Percento sa vypočíta vzhľadom na výšku vygenerovaného bloku obsahujúceho rámček. Ak výška obsahujúceho bloku nie je explicitne špecifikovaná (t. j. závisí od výšky obsahu) a tento prvok nie je absolútne umiestnený, hodnota sa vypočíta Percentuálna výška koreňového prvku je relatívna k počiatočnému bloku, ktorý obsahuje. |
| Médiá | vizuálny |
| Vypočítaná hodnota | percento alebo auto alebo absolútnu dĺžku |
| Typ animácie | dátový typ CSS sa interpoluje ako reálne čísla s pohyblivou rádovou čiarkou.">dĺžka , dátový typ CSS sa interpoluje ako reálne čísla s pohyblivou rádovou čiarkou.">percentá alebo calc(); |
| Kanonické poradie | jedinečné jednoznačné poradie definované formálnou gramatikou |
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
| Desktop | Mobilné | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Hrana | Firefox | internet Explorer | Opera | Safari | Webové zobrazenie Android | Chrome pre Android | Firefox pre Android | Opera pre Android | Safari na iOS | Internet Samsung | |
| výška | Plná podpora prehliadača Chrome 1 | Úplná podpora Edge 12 | Plná podpora Firefoxu 1 | Plná podpora IE 4 | Opera plná podpora 7 | Plná podpora Safari 1 | WebView Plná podpora pre Android 1 | Chrome Plná podpora pre Android 18 | Firefox Plná podpora pre Android 4 | Opera Android Plná podpora 10.1 | Safari iOS Plná podpora 1 | Samsung Internet Android Plná podpora 1.0 |
| fit-obsah | Plná podpora prehliadača Chrome 46 | Hrana Bez podpory č | Firefox Žiadna podpora Nie | IE Žiadna podpora Nie | Opera plná podpora 33 | Safari Plná podpora 11 Plná podpora 11 Plná podpora 9 Predpona Predpona | Opera Android? | Safari iOS Plná podpora 11 Plná podpora 11 Plná podpora 9 Predpona Predpona Implementované s predponou predajcu: -webkit- | ||||
| max-obsah | Plná podpora prehliadača Chrome 46 | Hrana Bez podpory č | Predpona Predpona | IE Žiadna podpora Nie | Opera plná podpora 44 | Plná podpora Safari 11 | WebView Plná podpora pre Android 46 | Chrome Plná podpora pre Android 46 | Predpona Predpona Implementované s predponou predajcu: -moz- | Samsung Internet Android Plná podpora 5.0 | ||
| min-obsah | Plná podpora prehliadača Chrome 46 | Hrana Bez podpory č | Firefox Plná podpora 66 Plná podpora 66 Plná podpora 3 Predpona Predpona Implementované s predponou predajcu: -moz- | IE Žiadna podpora Nie | Opera plná podpora 44 | Plná podpora Safari 11 | WebView Plná podpora pre Android 46 | Chrome Plná podpora pre Android 46 | Firefox Android Plná podpora 66 Plná podpora 66 Plná podpora 4 Predpona Predpona Implementované s predponou predajcu: -moz- | Opera Android Plná podpora 43 | Safari iOS Plná podpora 11 | Samsung Internet Android Plná podpora 5.0 |
| natiahnuť | Plná podpora prehliadača Chrome 28 Webkit-fill-available">Alternatívny názov Plná podpora 28Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov | Hrana Bez podpory č | Firefox Žiadna podpora Nie | IE Žiadna podpora Nie | Opera plná podpora 15 Webkit-fill-available">Alternatívny názov Plná podpora 15Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov Používa neštandardný názov: -webkit-fill-available | Plná podpora Safari 9 Webkit-fill-available">Alternatívny názov Plná podpora 9Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov Používa neštandardný názov: -webkit-fill-available | WebView Plná podpora pre Android 4.4 Webkit-fill-available">Alternatívny názov Plná podpora 4.4Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov Používa neštandardný názov: -webkit-fill-available | Chrome Plná podpora pre Android 28 Webkit-fill-available">Alternatívny názov Plná podpora 28Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov Používa neštandardný názov: -webkit-fill-available | Firefox Android Žiadna podpora Nie | Opera Android? | Safari iOS Plná podpora 9 Webkit-fill-available">Alternatívny názov Plná podpora 9Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov Používa neštandardný názov: -webkit-fill-available | Samsung Internet Android Plná podpora 5.0 Webkit-fill-available">Alternatívny názov Plná podpora 5.0Webkit-fill-available">Alternatívny názov Webkit-fill-available">Alternatívny názov Používa neštandardný názov: -webkit-fill-available |
Legenda
Plná podpora Plná podpora Bez podpory Bez podpory Kompatibilita neznáma Neznáma kompatibilita Používa neštandardný názov. Používa neštandardný názov. Na použitie sa vyžaduje predpona dodávateľa alebo iný názov. Na použitie sa vyžaduje predpona dodávateľa alebo iný názov.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
- 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.
- 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é; )
Väčšina prvkov v HTML má zvyčajne špecifickú výšku a šírku. Nastavenie týchto parametrov v CSS je celkom jednoduché a vo výsledku aj praktické. Na tento účel sa používajú už známe vlastnosti výšky a šírky. V tejto lekcii však budeme hovoriť aj o nepevnej šírke a výške alebo gume, teda v závislosti od šírky samotného okna. Začnime)
šírka
Táto vlastnosť nastavuje špecifickú šírku prvku HTML. Hodnota môže byť špecifikovaná v pixeloch, percentách (iné hodnoty sa používajú menej často).MyBlock(
šírka: 400px; /* šírka 400 pixelov */
}
Alebo v percentách:
MyBlockPercent50 (
šírka: 50 %; /* šírka 50 % šírky bloku alebo okna (ak nie je vo vnútri bloku s pevnou šírkou) */
farba: #f1f1f1; /* svetlosivý blok */
}
Podľa toho dostaneme blok, ktorý bude mať vždy polovicu šírky rodiča.
Teraz o najzaujímavejšej časti. šírka má parametre, ktoré určujú maximálnu alebo minimálnu šírku. Toto sú vlastnosti min-width a max-width. Môžete tiež zadať ich hodnoty v pixeloch, percentách a iných hodnotách. Tieto vlastnosti sú základom pre vytváranie tekutých a adaptívnych návrhov ().
Príklad responzívneho dizajnu. Pozrite, zmena veľkosti okna prehliadača:
Samozrejme, predbehol som sa. Musíte však pochopiť, čo je potrebné a prečo. Áno, a dotknite sa príjemného výsledku)
Ako ste už pochopili, pomocou týchto vlastností môžete flexibilnejšie manipulovať s prvkami na stránke bez skreslenia obsahu. Ako to funguje? Pozrime sa na kód.
Blokovať (
max-width: 800px;
farba pozadia: #f1f1f1; /* svetlosivý blok */
výplň: 20px;
}
Blok s týmito vlastnosťami s rodičovskou šírkou 200 pixelov nadobudne zodpovedajúcu hodnotu, ale ak je rodičovský blok väčší, napríklad 1000 pixelov, potom už bude mať svoju maximálnu šírku, teda 800 pixelov. To znamená, že sa bude zväčšovať, kým šírka rodičovského bloku nebude 801 pixelov alebo viac. Ďalej, blok bloku bude mať vždy maximálnu povolenú šírku 800 pixelov.
výška
Táto vlastnosť je zodpovedná za výšku prvku. Použité hodnoty sú rovnaké ako pre CSS. Najčastejšie rovnaké percentá a pixely.Info (
výška: 200px; /* výška bloku bude 200 pixelov */
výplň: 10px; /* opakujte o zarážkach vo vnútri bloku =) */
}
Čo je logické, pre výšku môžete zadať hodnoty minimálnej a maximálnej výšky pre prvok s vlastnosťami min-height a max-height.
Info (
max-height: 360px; /* maximálna výška bloku */
minimálna výška: 120px; /* minimálna výška bloku */
}
Ako vidíte, vlastnosti môžu byť a často by sa mali používať v pároch.
Alebo skombinujte hodnoty:
obsah (
výška: 100 %; /* výška bude vždy 100 % */
šírka: 760px; /* ale šírka je pevná 760 pixelov */
}
Ak máte nejaké otázky, napíšte do komentárov!
Ďakujem za tvoju pozornosť! Veľa šťastia s rozložením!)
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
