Výška a šířka prvku jsou vypočítané hodnoty. Každý prvek webové stránky tvoří obdélníkovou oblast, která se zase skládá z několika oblastí - oblast obsahu (obsah), polstrované oblasti, rámové oblasti a polní oblastiživel.
Mezi obsahem prvku a jeho ohraničením jsou odsazení polstrování, mimo hranici prvku - pole okraj. Každý prvek má oblast obsahu, ostatní oblasti jsou volitelné.
Rýže. 1. Blokový model prvku 1. Výška prvku
Vlastnost height nastavuje výšku obsahu prvku bloku a nemá žádný vliv na zobrazení vložených prvků: inline; ... Výška vložených prvků se rovná výšce jejich obsahu. Záporné hodnoty nejsou povoleny. Majetek není zděděn.
Syntax
P (výška: 100px;)
2. Šířka položky
Vlastnost width nastavuje šířku obsahu prvku bloku a nemá žádný vliv na zobrazení vložených prvků: inline; ... Vložené prvky mají stejnou šířku jako jejich obsah. Záporné hodnoty nejsou povoleny. Majetek není zděděn.
Syntax
P (šířka: 100px;)
3. Výška a šířka absolutně umístěného prvku
Nastavte šířku a výšku absolutně umístěné polohy prvku: absolutní; není vždy nutné, protože v tomto případě je výška a šířka implicitně určena posunem prvku. Pokud jsou pro prvek zadány ohraničení a okraje, zmenší velikost oblasti obsahu o příslušné hodnoty.
Div (pozadí: # 6A7690; poloha: absolutní; nahoře: 0; dole: 0; vlevo: 50%; vpravo: 0;) / * v tomto případě je výška prvku 100%, šířka je 50%rodičovského bloku * / 
Rýže. 2. Výška a šířka absolutně umístěného prvku
4. Odsazení prvků
Pomocí vlastnosti padding můžete nastavit odsazení pro více stran prvku současně v následujícím pořadí :. Pokud má prvek pozadí, rozšíří se i na vycpávky. Záporné hodnoty nejsou povoleny. Majetek není zděděn.
Pokud jsou zadány tři hodnoty, například div (výplň: 10 pixelů 20 pixelů 30 pixelů;), budou distribuovány v následujícím pořadí: první hodnota je horní výplň, druhá je pravá a levá výplň a třetí je spodní polstrování.
Pokud jsou zadány dvě hodnoty, například div (padding: 10px 20px;), pak první nastaví horní a spodní odsazení, druhé nastaví pravé a levé.
Jedna hodnota, například div (padding: 10px;), nastaví stejné odsazení na všech stranách prvku.
Syntax
P (polstrování: 5px 10px 15px 10px;)
4.1. Odsazení jedné strany prvku
Chcete-li nastavit odsazení pouze na jedné straně prvku, musíte použít jednu z vlastností padding-top, padding-right, padding-bottom, padding-left, například:
P (polstrování vlevo: 10 pixelů;)
5. Pole prvků
Většina prvků je od sebe oddělena okraji. Vlastnost margin je zkrácená forma pro zápis okrajů prvku v následujícím pořadí: nahoře, vpravo, dole, vlevo... Používá se, když potřebujete zadat okraje z několika stran, ale ne nutně ze čtyř stran. Svisle sousedící okraje blokových prvků se sbalí a horní a dolní okraje nemají žádný vliv na vložené prvky. Záporné hodnoty jsou povoleny. Majetek není zděděn.
Pokud jsou zadány tři hodnoty, například div (okraj: 10px 20px 30px;), budou rozděleny v následujícím pořadí: první hodnota je horní okraj, druhá je pravý a levý okraj a třetí je spodní okraj.
Pokud jsou zadány dvě hodnoty, například div (okraj: 10px 20px;), pak první nastaví horní a dolní okraj, druhý nastaví pravý a levý.
Jedna hodnota jako div (margin: 10px;) nastaví stejné okraje na všech stranách prvku.
(margin: 0 auto;) bude fungovat pouze v případě, že je šířka prvku explicitně nastavena.
Rýže. 3. okraj: auto; pro absolutně umístěný prvek Syntax
Div (okraj: 5px 10px 2px 5px;)
5.1. Okraje na jedné straně prvku
Vlastnosti margin-top, margin-right, margin-bottom, margin-left ovládají odpovídající okraje na každé straně prvku, například:
P (margin-left: 10px;)
6. Omezení šířky a výšky
CSS také podporuje několik dalších vlastností souvisejících s nastavením výšky a šířky prvků webové stránky: min-height, min-width, max-height a max-width. Tyto vlastnosti vám umožňují nastavit minimální a maximální hodnoty pro šířku nebo výšku prvku, což prvku dává možnost vyplnit dostupný prostor. Vlastnosti se často používají pro responzivní design webových stránek. Platí pro všechny prvky kromě vložených a tabulkových prvků. Vždy se řídí hlavním pravidlem, tj. poté, co prvku dáte výšku nebo šířku. Není zděděno.
Pravidelné kóty můžete nastavit pomocí některých měrných jednotek a omezení velikosti pomocí jiných jednotek, například:
Div (šířka: 400 pixelů; maximální šířka: 50%;)
Prvek bude široký 400 pixelů, pouze pokud tato hodnota nepřesáhne 50% šířky bloku kontejneru, jinak se jeho šířka zmenší.
V tomto článku se podíváme na to, jak lze v CSS nastavit výšku bloku jako procento jeho šířky. Podívejme se na aplikaci této technologie na příkladu vytvoření kolotoče (posuvníku) Bootstrap z obrázků různých velikostí.
Vytvoření bloku s výškou, která má určité procento své šířky
- Vytvořte strukturu HTML ze 2 bloků:
První blok má 2 třídy. Pomocí třídy reagující na položku nastavíme relativní umístění bloku. To musí být provedeno tak, aby byl 2 blok (který bude mít absolutní umístění) umístěn relativně k němu. Kromě toho se tato třída používá také k přidání pseudoprvku: before před obsah odpovídajících prvků (reagující na položku). Tento prvek nastaví požadovanou výšku boxu vzhledem k jeho šířce pomocí vlastnosti CSS padding-top. Trik této metody spočívá v tom, že pokud je vlastnost padding nastavena na ne v pixelech, ale v procentech, pak to vypočítá prohlížeč vzhledem k jeho šířce... Je tedy možné získat blok s požadovanou výškou. Dalším krokem je dát bloku 2 absolutní polohu a zarovnat ho s prvním blokem.
- Přidejte na stránku následující CSS: .položka reagující na položku (pozice: relativní; / * relativní poloha * /). / * pseudoelement obsahu * / šířka: 100%; / * šířka prvku * /) .položka-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /). reakce na položku> .content (poloha: absolutní; / * absolutní poloha prvku * / / * poloha prvku * / nahoře: 0; vlevo: 0; vpravo: 0; dole: 0;) / * Pokud je to nutné (pro bloky s těmito třídy) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100 % * /) .položka -1by1 (padding -top: 100%; / * (1: 1) * 100% * /)
Použití výše uvedené technologie k vytvoření kolotoče Bootstrap
Pokud Bootstrap neznáte a chcete vědět, co to je, můžete se podívat na náš Úvod do Bootstrapu.
Podívejme se na příklad, kde výše uvedená struktura HTML a kód CSS budou použity k zobrazení posuvných snímků Bootstrap.
Jako obrázky použijeme následující soubory:
- carousel_1.jpg (šířka = 736px, výška = 552px, poměr stran (výška k šířce) = 1,33);
- carousel_2.jpg (šířka = 1155px, výška = 1280px, poměr stran (výška k šířce) = 0,9);
- carousel_3.jpg (šířka = 1846px, výška = 1028px, poměr stran (výška k šířce) = 1,8);
- carousel_4.jpg (šířka = 1140px, výška = 550px, poměr stran (výška k šířce) = 2,07);
- carousel_5.jpg (šířka = 800 pixelů, výška = 600 pixelů, poměr stran (výška k šířce) = 1,33);
Obrázky nastavíme jako pozadí. To umožní použít v karuselu Bootstrap 3 obrázky s různými poměry stran.
HTML značení kolotoče:
Carousel CSS kód:
Položka reagující (pozice: relativní; / * relativní poloha * /). Reagující na položku: před (zobrazení: blok; / * vykreslení prvku jako blok * / obsah: ""; / * obsah pseudoprvku * / šířka: 100 %; / * šířka prvku * /) .položka-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /). reakce na položku> .obsah (pozice: absolutní; / * absolutní pozice prvku * / / * poloha prvku * / nahoře: 0; vlevo: 0; vpravo: 0; dole: 0; velikost pozadí: obal! důležité;)
Ve výchozím nastavení se pro prvky bloku používá automatická šířka. To znamená, že prvek bude vodorovně natažen přesně o tolik, kolik je volného místa. Výchozí výška blokových prvků se nastavuje automaticky, tj. prohlížeč vertikálně roztáhne oblast obsahu, aby zobrazil veškerý obsah. Chcete -li nastavit vlastní rozměry pro oblast obsahu prvku, můžete použít vlastnosti width a height.
Vlastnost width CSS vám umožňuje nastavit šířku oblasti obsahu prvku a vlastnost height vám umožňuje nastavit výšku oblasti obsahu:
Vlastnosti šířky a výšky určují pouze velikost oblasti obsahu; pro výpočet celkové šířky prvku bloku přidejte šířku oblasti obsahu, levé a pravé odsazení a šířku levého a pravého okraje. Totéž platí pro celkovou výšku prvku, pouze všechny hodnoty se počítají svisle:
U tohoto odstavce nastavíme pouze šířku a výšku.
Tento odstavec obsahuje kromě šířky a výšky také vycpávky, ohraničení a vycpávky.
Snaž se "Příklad jasně ukazuje, že druhý prvek zabírá více místa než první. Pokud počítáte podle našeho vzorce, pak rozměry prvního odstavce jsou 150 x 100 pixelů a rozměry druhého odstavce jsou:
| Celková výška: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130 pixelů |
| horní rám | horní Odrážka | výška | dolní Odrážka | dno rám |
tedy 180 x 130 pixelů.
Přetečení prvků
Poté, co jste definovali šířku a výšku prvku, stojí za to věnovat pozornost jednomu důležitému bodu - obsah umístěný uvnitř prvku může překročit zadanou velikost bloku. V takovém případě část obsahu přesáhne hranice prvku, abyste se vyhnuli tomuto nepříjemnému okamžiku, můžete použít vlastnost přetečení CSS. Vlastnost přetečení říká prohlížeči, co má dělat, pokud obsah bloku překročí jeho velikost. Tato vlastnost může nabývat jedné ze čtyř hodnot:
- visible je výchozí hodnota používaná prohlížečem. Nastavení této hodnoty bude mít stejný účinek jako nenastavení vlastnosti přetečení.
- posouvat - přidá k prvku svislé a vodorovné posuvníky.
- auto - přidá posuvníky podle potřeby.
- skrytý - skryje část obsahu, který překračuje hranice prvku bloku.
Popis
Nastavuje výšku bloku nebo vyměnitelných prvků (například tagu) ). Výška nezahrnuje tloušťku okrajů kolem prvku, hodnotu polstrování a okraje.
Pokud obsah bloku překročí uvedenou výšku, výška prvku zůstane nezměněna a obsah se zobrazí nad ním. Tato funkce může způsobit, že se obsah prvků překrývá, když jsou prvky v kódu HTML sekvenční. Abyste tomu zabránili, přidejte do stylu prvku overflow: auto.
Syntax
výška: hodnota | úrok | auto | zdědit
Hodnoty
Libovolné jednotky délky přijaté v CSS jsou přijímány jako hodnoty- například pixely (px), palce (in), body (pt) atd. Při použití procentuálního zápisu se výška prvku vypočítá v závislosti na výšce nadřazený prvek. Pokud nadřazený prvek není výslovně zadán, použije se jako nadřazené okno prohlížeče. auto nastaví výšku na základě obsahu prvku
HTML5 CSS2.1 IE Cr Op Sa Fx
Výsledek tohoto příkladu je znázorněn na obr. 1.
Rýže. 1. Použití vlastnosti height
Objektový model
document.getElementById ("elementID") .style.height
Prohlížeče
Internet Explorer 6 nesprávně definuje výšku jako minimální výšku.
V režimu výstřednosti Internet Explorer až do verze 8.0 včetně nesprávně vypočítá výšku prvku, aniž by do něj přidal hodnoty odsazení, okraje a ohraničení.
Internet Explorer až do verze 7.0 včetně tuto dědičnou hodnotu nepodporuje.
The výška Vlastnost CSS určuje výšku prvku. Ve výchozím nastavení vlastnost definuje výšku oblasti obsahu. Pokud je však velikost pole nastavena na border-box, místo toho určuje výšku oblasti ohraničení.
Zdroj pro tento interaktivní příklad je uložen v úložišti GitHub. Pokud chcete přispět do projektu interaktivních příkladů, naklonujte https://github.com/mdn/interactive-examples a pošlete nám žádost o stažení.
Vlastnosti min-height a max-height mají přednost před výškou.
Syntax
/ * Hodnota klíčového slova * / výška: auto; / *Hodnoty
Datový typ CSS představuje hodnotu vzdálenosti. Délky lze použít v mnoha vlastnostech CSS, jako je šířka, výška, okraj, odsazení, šířka okraje, velikost písma a stín textu. ">Formální syntaxe
Příklad
Html
CSS
div (šířka: 250 pixelů; spodní okraj: 5 pixelů; ohraničení: 2 pixely plná modrá;) #vyšší (výška: 50 pixelů;) #kratší (výška: 25 pixelů;) #rodič (výška: 100 pixelů;) #dítě (výška: 50% ; šířka: 75%;)Výsledek
Problémy s přístupností
Zajistěte, aby prvky nastavené s výškou nebyly zkráceny a / nebo nezakrývaly jiný obsah, pokud je stránka zvětšena, aby se zvětšila velikost textu.
Specifikace
| Specifikace | Postavení | Komentář |
|---|---|---|
| Modul CSS pro vnitřní a vnější dimenzování úrovně 4 |
Návrh redaktora | |
| Modul CSS pro vnitřní a vnější dimenzování úrovně 3 Definice „výšky“ v této specifikaci. |
Pracovní předloha | Přidána klíčová slova max-content, min-content, fit-content. |
| CSS přechody Definice „výšky“ v této specifikaci. |
Pracovní předloha | Výšku uvádí jako animovatelnou. |
| CSS úroveň 2 (revize 1) Definice „výšky“ v této specifikaci. |
Doporučení | Přidá podporu pro datový typ CSS představuje hodnotu vzdálenosti. Délky lze použít v mnoha vlastnostech CSS, jako je šířka, výška, okraj, odsazení, šířka okraje, velikost písma a stín textu. "> |
| CSS Úroveň 1 Definice „výšky“ v této specifikaci. |
Doporučení | Počáteční definice. |
| Počáteční hodnota | auto |
|---|---|
| Platí pro | všechny prvky kromě nenahrazených vložených prvků, sloupců tabulky a skupin sloupců |
| Zděděno | Ne |
| Procenta | Procento se vypočítá s ohledem na výšku bloku obsahujícího vygenerovaný box. Pokud není výška bloku obsahujícího výslovně uvedena (tj. Závisí na výšce obsahu) a tento prvek není absolutně umístěn, hodnota se vypočítá na auto. Procentní výška v kořenovém prvku je relativní k počátečnímu bloku. |
| Média | vizuální |
| Vypočítaná hodnota | procento nebo auto nebo absolutní délka |
| Typ animace | datový typ CSS je interpolován jako reálná čísla s plovoucí desetinnou čárkou. "> délka, datový typ CSS jsou interpolovány jako reálná čísla s plovoucí desetinnou čárkou."> procenta nebo calc (); |
| Kanonická objednávka | jedinečný nejednoznačný řád definovaný formální gramatikou |
Kompatibilita prohlížeče
Tabulka kompatibility na této stránce je generována ze strukturovaných dat. Pokud chcete k datům přispět, podívejte se prosím na https://github.com/mdn/browser-compat-data a pošlete nám žádost o stažení.
Aktualizujte údaje o kompatibilitě na GitHubu
| plocha počítače | mobilní, pohybliví | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Okraj | Firefox | internet Explorer | Opera | Safari | Webové zobrazení Android | Chrome pro Android | Firefox pro Android | Opera pro Android | Safari na iOS | Internet Samsung | |
| výška | Plná podpora prohlížeče 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 prohlížeče Chrome 46 | Edge No support No | Firefox Žádná podpora Ne | IE Žádná podpora Č | Opera Plná podpora 33 | Plná podpora Safari 11 Plná podpora 11 Plná podpora 9 Předpona Předpona | Opera Android? | Safari iOS Plná podpora 11 Plná podpora 11 Plná podpora 9 Předpona Předpona Implementováno s předponou dodavatele: -webkit- | ||||
| maximální obsah | Plná podpora prohlížeče Chrome 46 | Edge No support No | Předpona Předpona | IE Žádná podpora Č | Opera Plná podpora 44 | Plná podpora Safari 11 | WebView Android Plná podpora 46 | Chrome Android Plná podpora 46 | Předpona Předpona Implementováno s předponou dodavatele: -moz- | Samsung Internet Android Plná podpora 5.0 | ||
| min. obsah | Plná podpora prohlížeče Chrome 46 | Edge No support No | Plná podpora Firefoxu 66 Plná podpora 66 Plná podpora 3 Předpona Předpona Implementováno s předponou dodavatele: -moz- | IE Žádná 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 Předpona Předpona Implementováno s předponou dodavatele: -moz- | Opera Android Plná podpora 43 | Safari iOS Plná podpora 11 | Samsung Internet Android Plná podpora 5.0 |
| protáhnout se | Plná podpora prohlížeče Chrome 28 Webkit-fill-available"> Alternativní název Plná podpora 28Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název | Edge No support No | Firefox Žádná podpora Ne | IE Žádná podpora Č | Opera Plná podpora 15 Webkit-fill-available"> Alternativní název Plná podpora 15Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název Používá nestandardní název: -webkit-fill-available | Plná podpora Safari 9 Webkit-fill-available"> Alternativní název Plná podpora 9Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název Používá nestandardní název: -webkit-fill-available | WebView Android Plná podpora 4.4 Webkit-fill-available"> Alternativní název Plná podpora 4.4Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název Používá nestandardní název: -webkit-fill-available | Chrome Android Plná podpora 28 Webkit-fill-available"> Alternativní název Plná podpora 28Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název Používá nestandardní název: -webkit-fill-available | Firefox Android Bez podpory Ne | Opera Android? | Safari iOS Plná podpora 9 Webkit-fill-available"> Alternativní název Plná podpora 9Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název Používá nestandardní název: -webkit-fill-available | Samsung Internet Android Plná podpora 5.0 Webkit-fill-available"> Alternativní název Plná podpora 5.0Webkit-fill-available"> Alternativní název Webkit-fill-available"> Alternativní název Používá nestandardní název: -webkit-fill-available |
