Výška a šírka prvku sú vypočítané hodnoty. Každý prvok webovej stránky tvorí obdĺžniková oblasť, ktorá sa skladá z niekoľkých oblastí - oblasť obsahu (obsah), výplňové oblasti, rámové oblasti a poľné oblasti element.
Medzi obsahom prvku a jeho okrajom sú odsadeniečalúnenie, mimo hranicu prvku - polia marža. Každý prvok má oblasť obsahu, ostatné oblasti sú voliteľné.
Ryža. 1. Blokový model prvku 1. Výška prvku
Vlastnosť height nastavuje výšku obsahu prvku bloku a nemá žiadny vplyv na zobrazenie vložených prvkov: 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: 100 pixelov;)
2. Šírka položky
Vlastnosť width nastavuje šírku obsahu prvku bloku a nemá žiadny vplyv na zobrazenie vložených prvkov: inline; ... Vložené prvky majú rovnakú šírku ako ich obsah. Záporné hodnoty nie sú povolené. Nehnuteľnosť sa nededí.
Syntax
P (šírka: 100 pixelov;)
3. Výška a šírka absolútne umiestneného prvku
Nastavte šírku a výšku absolútne umiestnenej polohy prvku: absolútne; nie je vždy potrebné, pretože v tomto prípade sú výška a šírka implicitne určené posunom prvku. Ak sú pre prvok zadané okraje a okraje, zmenšia veľkosť oblasti obsahu o príslušné hodnoty.
Div (pozadie: # 6A7690; poloha: absolútna; hore: 0; dole: 0; vľavo: 50%; vpravo: 0;) / * v tomto prípade je výška prvku 100%, šírka je 50%rodičovského bloku * / 
Ryža. 2. Výška a šírka absolútne umiestneného prvku
4. Odsadenie prvkov
Pomocou vlastnosti padding môžete nastaviť polstrovanie pre viac strán prvku súčasne v nasledujúcom poradí :. Ak má prvok pozadie, rozšíri sa aj na vypchávky. Záporné hodnoty nie sú povolené. Nehnuteľnosť sa nededí.
Ak sú zadané tri hodnoty, napríklad div (výplň: 10 pixelov 20 pixelov 30 pixelov;), budú distribuované v nasledujúcom poradí: prvá hodnota je horná výplň, druhá je pravá a ľavá výplň a tretie je spodné polstrovanie.
Ak sú zadané dve hodnoty, napríklad div (výplň: 10 pixelov 20 pixelov;), potom prvá nastaví hornú a dolnú výplň, druhá nastaví pravú a ľavú stranu.
Jedna hodnota ako div (výplň: 10 pixelov;) nastaví rovnaké vypchávky na všetkých stranách prvku.
Syntax
P (polstrovanie: 5 pixelov 10 pixelov 15 pixelov 10 pixelov;)
4.1. Odsadenie jednej strany prvku
Ak chcete nastaviť výplň iba na jednej strane prvku, musíte použiť jednu z vlastností padding-top, padding-right, padding-bottom, padding-left, napríklad:
P (polstrovanie vľavo: 10 pixelov;)
5. Polia prvkov
Väčšina prvkov je od seba oddelená okrajmi. Vlastnosť margin je skrátená forma na zapísanie okrajov prvku v nasledujúcom poradí: hore, vpravo, dole, vľavo... Používa sa vtedy, keď potrebujete určiť okraje z niekoľkých strán, ale nie nevyhnutne zo štyroch strán. Vertikálne susediace okraje blokových prvkov sú zbalené a horné a dolné okraje nemajú žiadny vplyv na vložené prvky. Záporné hodnoty sú povolené. Nehnuteľnosť sa nededí.
Ak sú zadané tri hodnoty, napríklad div (okraj: 10 pixelov 20 pixelov 30 pixelov;), budú rozdelené v nasledujúcom poradí: prvá hodnota je horný okraj, druhá je pravý a ľavý okraj a tretí je spodný okraj.
Ak sú zadané dve hodnoty, napríklad div (okraj: 10 pixelov 20 pixelov;), potom prvá nastaví horný a dolný okraj, druhá nastaví pravý a ľavý.
Jedna hodnota ako div (margin: 10px;) nastaví rovnaké okraje na všetkých stranách prvku.
(margin: 0 auto;) bude fungovať iba vtedy, ak je šírka prvku explicitne nastavená.
Ryža. 3. okraj: auto; pre absolútne umiestnený prvok Syntax
Div (okraj: 5 pixelov 10 pixelov 2 pixely 5 pixelov;)
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: 10 pixelov;)
6. Obmedzenie šírky a výšky
CSS podporuje aj niekoľko ďalších vlastností súvisiacich s nastavením výšky a šírky prvkov webových stránok: min-height, min-width, max-height a max-width. Tieto vlastnosti vám umožňujú nastaviť minimálne a maximálne hodnoty pre šírku alebo výšku prvku, čo dáva prvku schopnosť vyplniť dostupný priestor. Vlastnosti sa často používajú na responzívny dizajn webových stránok. Platí pre všetky prvky okrem vložených a tabuľkových prvkov. Vždy sa riadia hlavným pravidlom, t.j. potom, čo prvku dáte výšku alebo šírku. Nededí sa.
Bežné rozmery môžete zadať pomocou niektorých merných jednotiek a obmedzenia veľkosti pomocou iných jednotiek, napríklad:
Div (šírka: 400 pixelov; maximálna šírka: 50%;)
Prvok bude mať šírku 400 pixelov iba vtedy, ak táto hodnota nepresiahne 50% šírky bloku kontajnera, inak sa jeho šírka zmenší.
V tomto článku sa pozrieme na to, ako môžete v CSS nastaviť výšku bloku ako percento jeho šírky. Pozrime sa na aplikáciu tejto technológie na príklade vytvorenia kolotoča (posúvača) Bootstrap z obrázkov rôznych veľkostí.
Vytvorenie bloku s výškou, ktorá má určité percento jeho šírky
- Vytvorte štruktúru HTML z 2 blokov:
Prvý blok má 2 triedy. Pomocou triedy reagujúcej na položky nastavíme relatívne umiestnenie bloku. To sa musí urobiť tak, aby 2 bloky (ktoré budú mať absolútne umiestnenie) boli umiestnené relatívne k nemu. Táto trieda sa navyše používa aj na pridanie pseudoprvku: before pred obsah zodpovedajúcich prvkov (reagujúce na položku). Tento prvok nastaví požadovanú výšku poľa vzhľadom na jeho šírku pomocou vlastnosti CSS padding-top. Trik tejto metódy spočíva v tom, že ak je vlastnosť vypchávky nastavená na nie v pixeloch, ale v percentách, potom ho prehliadač vypočíta vzhľadom na jeho šírku... Je teda možné získať blok s požadovanou výškou. Ďalším krokom je dať bloku 2 absolútne umiestnenie a zarovnať ho s prvým blokom.
- Pridajte na stránku nasledujúci CSS:. Responzívny na položku (poloha: relatívna; / * relatívna poloha * /). Reagujúca na položku: pred (zobrazenie: blok; / * vykreslí prvok ako blok * / obsah: ""; / * pseudoprvok obsahu * / šírka: 100%; / * šírka prvku * /) .položka-16by9 (vypchávka: 56,25%; / * (9:16) * 100% * /). reagujúca na položku> .obsah (poloha: absolútna; / * absolútna poloha prvku * / / * poloha prvku * / hore: 0; vľavo: 0; vpravo: 0; dole: 0;) / * Ak je to potrebné (pre bloky s týmito triedy) * / .položka -4by3 (vypchávka: 75%; / * (3: 4) * 100% * /) .položka-2by1 (čalúnenie: 50%; / * (1: 2) * 100 % * /) .položka -1by1 (vypchávka: 100%; / * (1: 1) * 100% * /)
Aplikácia vyššie uvedenej technológie na vytvorenie kolotoča Bootstrap
Ak nie ste oboznámení s nástrojom Bootstrap a chcete vedieť, čo to je, môžete si pozrieť náš úvod do programu Bootstrap.
Pozrime sa na príklad, kde vyššie uvedená štruktúra HTML a kód CSS budú použité na zobrazenie posuvných snímok 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);
Obrázky nastavíme ako pozadie. To umožní v kolotoči Bootstrap 3 použiť obrázky s rôznym pomerom strán.
HTML značenie kolotoča:
Carousel CSS code:
Reagujúce na položky (poloha: relatívna; / * relatívne umiestnenie * /). Položky reagujúce na položku: pred (zobrazenie: blok; / * vykreslenie prvku ako bloku * / obsah: ""; / * obsah pseudoprvku * / šírka: 100 %; / * šírka prvku * /) .položka-16by9 (vypchávka hore: 56,25%; / * (9:16) * 100% * /). responzívna na položku> .obsah (poloha: absolútna; / * absolútna poloha prvku * / / * poloha prvku * / hore: 0; vľavo: 0; vpravo: 0; dole: 0; veľkosť pozadia: obal! dôležité;)
Štandardne sa pre prvky bloku používa automatická šírka. To znamená, že prvok sa natiahne horizontálne presne o toľko, koľko je voľného miesta. Predvolená výška prvkov bloku sa nastavuje automaticky, t.j. prehliadač vertikálne roztiahne oblasť obsahu, aby zobrazil všetok obsah. Ak chcete nastaviť vlastné rozmery pre oblasť obsahu prvku, môžete použiť vlastnosti šírka a výška.
Vlastnosť width CSS vám umožňuje nastaviť šírku oblasti obsahu prvku a vlastnosť height vám umožňuje nastaviť výšku oblasti obsahu:
Vlastnosti šírky a výšky určujú iba veľkosť oblasti obsahu; na výpočet celkovej šírky prvku bloku pridajte šírku oblasti obsahu, ľavé a pravé vypchávky a šírku ľavého a pravého okraja. To isté platí pre celkovú výšku prvku, iba všetky hodnoty sa počítajú vertikálne:
V tomto odseku nastavíme iba šírku a výšku.
Tento odsek obsahuje okrem šírky a výšky aj vypchávky, orámovanie a vypchávky.
Skús "Príklad jasne ukazuje, že druhý prvok zaberá viac miesta ako prvý. Ak počítate podľa nášho vzorca, potom rozmery prvého odseku sú 150 x 100 pixlov a rozmery druhého odseku sú:
| Celková výška: | 5 pixelov | + | 10 pixlov | + | 100 pixlov | + | 10 pixlov | + | 5 pixelov | = 130 pixelov |
| horná rám | horná zarážka | výška | nižšie zarážka | dno rám |
to znamená 180 x 130 pixelov.
Pretečenie prvkov
Potom, čo ste pre prvok definovali šírku a výšku, stojí za to venovať pozornosť jednému dôležitému bodu - obsah umiestnený vo vnútri prvku môže presiahnuť uvedenú veľkosť bloku. V takom prípade časť obsahu presiahne hranice prvku, aby ste sa vyhli tomuto nepríjemnému momentu, môžete použiť vlastnosť pretečenia CSS. Vlastnosť pretečenia hovorí prehliadaču, čo má robiť, ak obsah bloku prekročí jeho veľkosť. Táto vlastnosť môže mať jednu zo štyroch hodnôt:
- visible je predvolená hodnota, ktorú používa prehliadač. Nastavenie tejto hodnoty bude mať rovnaký účinok ako nenastavenie vlastnosti pretečenia.
- posúvať - pridáva k prvku zvislé a vodorovné posúvače.
- auto - podľa potreby pridá posuvníky.
- skrytý - skryje časť obsahu, ktorý presahuje hranice prvku bloku.
Popis
Nastavuje výšku bloku alebo vymeniteľných prvkov (napríklad značky) ). Výška nezahŕňa hrúbku okrajov okolo prvku, vypchávky a okrajov.
Ak obsah bloku prekročí uvedenú výšku, výška prvku zostane nezmenená a obsah sa zobrazí nad ním. Táto funkcia môže spôsobiť, že sa obsah prvkov prekrýva, keď sú prvky v kóde HTML sekvenčné. Aby ste tomu zabránili, pridajte do štýlu prvku overflow: auto.
Syntax
výška: hodnota | záujem | auto | dediť
Hodnoty
Akékoľvek jednotky dĺžky akceptované v CSS sú akceptované ako hodnoty- napríklad pixely (px), palce (palce), body (pt) atď. Pri použití percentuálneho zápisu sa výška prvku vypočíta v závislosti od výšky rodičovský prvok. Ak rodič nie je výslovne zadaný, použije sa ako nadradené okno prehliadača. automaticky nastaví výšku na základe obsahu prvku
HTML5 CSS2.1 IE Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. 1.
Ryža. 1. Použitie vlastnosti height
Objektový model
document.getElementById ("elementID"). štýl. výška
Prehliadače
Internet Explorer 6 nesprávne definuje výšku ako minimálnu výšku.
V podivnom režime Internet Explorer až do verzie 8.0 vrátane nesprávne vypočíta výšku prvku bez toho, aby k nemu pridal hodnoty výplne, okraja a okraja.
Internet Explorer až do verzie 7.0 vrátane túto hodnotu dedičnosti nepodporuje.
The výška Vlastnosť CSS určuje výšku prvku. Štandardne vlastnosť definuje výšku oblasti obsahu. Ak je však veľkosť poľa nastavená na border-box, určuje namiesto toho výšku hraničnej oblasti.
Zdroj pre tento interaktívny príklad 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 minimálnej a maximálnej výšky prepíšu výšku.
Syntax
/ * Hodnota kľúčového slova * / výška: auto; / *Hodnoty
Dátový typ CSS predstavuje hodnotu vzdialenosti. Dĺžky je možné použiť v mnohých vlastnostiach CSS, ako je šírka, výška, okraj, výplň, šírka orámovania, veľkosť písma a textový tieň. ">Formálna syntax
Príklad
Html
CSS
div (šírka: 250 pixelov; spodný okraj: 5 px ; šírka: 75%;)Výsledok
Obavy o prístupnosť
Uistite sa, že prvky nastavené s výškou nie sú skrátené a / alebo nezakrývajú iný obsah, keď je stránka priblížená, aby sa zväčšila veľkosť textu.
technické údaje
| Špecifikácia | Postavenie | Komentovať |
|---|---|---|
| Modul vnútornej a vonkajšej dimenzie CSS úrovne 4 |
Návrh redaktora | |
| Modul vnútornej a vonkajšej dimenzie CSS úrovne 3 Definícia „výšky“ v tejto špecifikácii. |
Pracovný návrh | Pridané kľúčové slová pre maximálny, minimálny a vhodný obsah. |
| Prechody CSS Definícia „výšky“ v tejto špecifikácii. |
Pracovný návrh | Výška zoznamov je animovateľná. |
| CSS úroveň 2 (revízia 1) Definícia „výšky“ v tejto špecifikácii. |
Odporúčanie | Pridáva podporu pre dátový typ CSS predstavuje hodnotu vzdialenosti. Dĺžky je možné použiť v mnohých vlastnostiach CSS, ako sú šírka, výška, okraj, výplň, šírka orámovania, veľkosť písma a textový tieň. "> |
| 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 tabuliek a skupín stĺpcov |
| Dedičná | č |
| Percentá | Percentuálny podiel sa vypočíta s ohľadom na výšku bloku obsahujúceho vygenerovaný box. Ak nie je výška obsahu bloku výslovne stanovená (tj. Závisí od výšky obsahu) a tento prvok nie je úplne umiestnený, hodnota sa vypočíta na auto. Percentuálna výška v koreňovom prvku je relatívna k počiatočnému obsahujúcemu bloku. |
| Médiá | vizuálne |
| Vypočítaná hodnota | percento alebo auto alebo absolútna dĺžka |
| 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 skutočné čísla s pohyblivou rádovou čiarkou."> percento alebo calc (); |
| Kanonický poriadok | jedinečný nejednoznačný poriadok definovaný formálnou gramatikou |
Kompatibilita s prehliadačom
Tabuľka kompatibility na tejto stránke je generovaná zo štruktúrovaných údajov. Ak by ste chceli prispieť k údajom, navštívte stránku https://github.com/mdn/browser-compat-data a pošlite nám žiadosť o stiahnutie.
Aktualizujte údaje o kompatibilite na GitHub
| Pracovná plocha | Mobilné | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Hrana | Firefox | internet Explorer | Opera | Safari | Webview v systéme Android | Chrome pre Android | Firefox pre Android | Opera pre Android | Safari v systéme iOS | Internet Samsung | |
| výška | Plná podpora prehliadača Chrome 1 | Úplná podpora Edge 12 | Plná podpora Firefoxu 1 | IE Plná podpora 4 | Opera Plná podpora 7 | Plná podpora Safari 1 | WebView Android Plná podpora 1 | Chrome Android Plná podpora 18 | Firefox Android Plná podpora 4 | Opera Android Plná podpora 10.1 | Safari iOS Plná podpora 1 | Samsung Internet Android Plná podpora 1.0 |
| fit-content | Plná podpora prehliadača Chrome 46 | Edge Žiadna podpora Nie | Firefox Žiadna podpora Nie | IE Žiadna podpora č | Opera Plná podpora 33 | Plná podpora Safari 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 dodávateľa: -webkit- | ||||
| maximálny obsah | Plná podpora prehliadača Chrome 46 | Edge Žiadna podpora Nie | Predpona Predpona | IE Žiadna podpora č | Opera Plná podpora 44 | Plná podpora Safari 11 | WebView Android Plná podpora 46 | Chrome Android Plná podpora 46 | Predpona Predpona Implementované s predponou dodávateľa: -moz- | Samsung Internet Android Plná podpora 5.0 | ||
| min. obsah | Plná podpora prehliadača Chrome 46 | Edge Žiadna podpora Nie | Plná podpora Firefoxu 66 Plná podpora 66 Plná podpora 3 Predpona Predpona Implementované s predponou dodávateľa: -moz- | IE Žiadna podpora č | Opera Plná podpora 44 | Plná podpora Safari 11 | WebView Android Plná podpora 46 | Chrome Android Plná podpora 46 | Firefox Android Plná podpora 66 Plná podpora 66 Plná podpora 4 Predpona Predpona Implementované s predponou dodávateľa: -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 | Edge Žiadna podpora Nie | Firefox Žiadna podpora Nie | IE Žiadna podpora č | 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 Android Plná podpora 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 Android Plná podpora 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 Bez podpory 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 |
