Výška, šířka a přetečení – pravidla CSS pro popis oblasti obsahu v blokovém uspořádání. Ovládání přetečení blokového prvku

Popis

Nastavuje šířku prvků na úrovni bloku nebo vyměnitelných prvků (například značky ). Šířka nezahrnuje tloušťku okrajů kolem prvku, odsazení nebo okrajů.

Prohlížeče nezacházejí se šířkami stejně, výsledek zobrazení závisí na použitém prohlížeči.. V tabulce 1 jsou uvedeny možné možnosti a výsledná šířka.

Syntax

šířka: hodnota | zájem | auto | zdědit

Hodnoty

Jakékoli jednotky délky akceptované 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 šířka prvku vypočítá v závislosti na šířce rodičovský prvek. Pokud není nadřazený objekt výslovně zadán, chová se jako něj okno prohlížeče.

Auto Nastaví šířku podle typu prvku a obsahu. inherit Zdědí hodnotu rodiče.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledek tento příklad jak se zobrazuje v prohlížeči Safari je na obr. 1.

Rýže. 1. Šířka bloku

Objektový model

document.getElementById("elementID ").style.width

Prohlížeče

Internet Explorer 6 nesprávně definuje šířku jako minimální šířku. V režimu quirk Internet Explorer verze až do 8.0 včetně nesprávně vypočítají šířku prvku, aniž by k němu přidaly hodnoty odsazení, okraje nebo okraje.

Verze aplikace Internet Explorer do 7.0 včetně nepodporují dědičnou hodnotu.

Ve výchozím nastavení prvky bloku používají automatickou šířku. To znamená, že prvek bude vodorovně roztažen přesně tak, jak je volný prostor. Výchozí výška blokových prvků se nastavuje automaticky, tzn. Prohlížeč roztáhne oblast obsahu svisle tak, aby se zobrazil veškerý obsah. Chcete-li nastavit vlastní rozměry pro oblast obsahu prvku, můžete použít vlastnosti width a height.

Vlastnost CSS width umožňuje nastavit šířku oblasti obsahu prvku a vlastnost height umožňuje nastavit výšku oblasti obsahu:

Pamatujte, že vlastnosti width a height určují pouze velikost oblasti obsahu; pro výpočet celkové šířky prvku bloku je třeba přidat šířku oblasti obsahu, levé a pravé odsazení a šířku levého a pravá hranice. 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 vnitřní výplň, ohraničení a vnější výplň.

Příklad jasně ukazuje, že druhý prvek zabírá více místa než první. Pokud počítáme pomocí našeho vzorce, pak rozměry prvního odstavce jsou 150x100 pixelů a rozměry druhého odstavce jsou:

tedy 180x130 pixelů.

Přetečení prvku

Jakmile určíte šířku a výšku prvku, měli byste věnovat pozornost jednomu důležitému bodu – obsah umístěný uvnitř prvku může přesáhnout zadanou velikost bloku. V tomto případě bude část obsahu přesahovat hranice prvku. Chcete-li se tomuto nepříjemnému momentu vyhnout, můžete použít vlastnost CSS overflow. Vlastnost overflow ří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:

• viditelný – výchozí hodnota používaná prohlížečem. Nastavení této hodnoty bude mít stejný účinek jako nenastavíte vlastnost přetečení.
• posouvání – přidává k prvku svislé a vodorovné posuvníky.
• auto - v případě potřeby přidá posuvníky.
• skrytý - skryje část obsahu, která přesahuje hranice prvku bloku.

Dobrý den, milí čtenáři tohoto blogu. Dnes si povíme, jak můžete nastavit rozměry oblasti obsahu pomocí výšky a šířky a jak nakonfigurovat zobrazení tohoto obsahu v případě, že je ho více, než se vejde do prostoru pro něj vyhrazeného (pravidlo přetečení css s hodnoty skryté, rolování, auto).

Text prvního odstavce

Text druhého

Protože šířka a výška u těchto odstavců nejsou zadány, pak je ve výchozím nastavení vypočítá sám prohlížeč na základě vlastního pochopení hodnoty Auto. V důsledku toho odstavce zabírají na šířku veškerý prostor, který mají k dispozici, a na výšku odpovídají výšce obsahu v nich obsaženého.

Udělejme nyní první změnu a pevně zakódujme šířku prvního odstavce (width:50px):

Text prvního

Text druhého

Obecně se stalo očekávané - horizontální velikost se zmenšila na hodnotu uvedenou v width:50px a výška odstavce se stále tvoří díky height:auto (výchozí hodnota). V důsledku toho se stal takovým, že mohl obsahovat celý text.

Pojďme ale nyní omezit výšku kontejneru pomocí height:15px.

V důsledku toho jsme se dostali k tomu, že text se již nevejde do našeho malého kontejneru odstavců, a proto bezpečně naběhl do oblasti svého souseda. To je přesně to, co slouží ke kontrole chování obsahu v takových situacích. pravidlo přetečení.

Přetečení znamená "přetečení" nebo jinými slovy "přetečení obsahu". Hovoří o tom, co by se mělo stát s obsahem, pokud se nevejde do oblasti (kontejneru), která mu byla přidělena.

Přetečení má několik platných hodnot, ale výchozí je viditelný (zobrazit):

To je důvod, proč v našem posledním příkladu text horního odstavce překrýval spodní (implicitně bylo použito overflow:visible - zobrazit obsah, který se nevejde do kontejneru). Mohli bychom použít druhý extrém - přetečení:skryté. Pak by se na webové stránce nezobrazovalo vše, co se nevejde do kontejneru:

Další dvě hodnoty této vlastnosti CSS umožňují posouvat obsah, který se nevejde do kontejneru (něco podobného jsme již pozorovali, když jsme studovali ). Posouvání tedy zobrazí svislé a vodorovné posuvníky, i když se obsah bezpečně vejde do určeného kontejneru:

Ale mnohem logičtější by bylo použít hodnotu Auto pro Overflow, pokud potřebujete vytvořit posuvníky. V takovém případě si prohlížeč sám spočítá, kdy je má zobrazit a na kterých osách.

Pokud například použijeme overflow:auto, budeme moci rolovat pouze podél osy, kde se obsah nevejde do hranic kontejneru:

Text prvního

Text druhého

Abychom to shrnuli, můžeme říci, že Overflow docela umožňuje flexibilně konfigurovat možnosti zobrazení obsahu v případě, že vyleze z nádoby. Budete mít možnost zobrazit obsah, který odešel (viditelný), neukázat ho (odříznout - skrytý), nebo nastavit povinné posouvání (posouvání) nebo posouvání podle potřeby (automaticky).

Existují také varianty zápisu tohoto pravidla související s CSS3, které však podporují všechny prohlížeče, což znamená, že je lze bezpečně používat. Mluvím o možnostech overflow-x a overflow-y, které umožňují nastavit či nenastavit rolování na jednotlivých osách (x - horizontální, y - vertikální).

Pokud se například potřebujete ujistit, že se horizontální posouvání nikdy nezobrazí a svislé posouvání se objeví pouze v případě potřeby (pokud se obsah nevejde), pak pro prvek Html budete muset zadat overflow-x:hidden a overflow- y:auto . To je vše, problém bude vyřešen, protože tento trik s ušima podporují všechny prohlížeče.

Výška a šířka v procentech – proč potřebujete doctype?

Nyní si povíme, z čeho se počítá šířka zadaná v procentech. Pamatujte, že na začátku článku jsem slíbil, že na to zaměřím naši pozornost. Ve skutečnosti zde pravidlo šířky CSS není výjimkou a stejně jako odsazení a okraj se vypočítává jako procento vodorovné velikosti kontejneru obsahu.

Poněkud nepřehlednější je situace s výškou oblasti obsahu zadanou v procentech. Bylo by logické předpokládat, že totéž platí pro výšku kontejneru. Zde se ale začínáme setkávat s dualismem (dva modely chování) – jak to dělali dříve a jak to dělají nyní podle přijatých standardů. V tomto ohledu bychom se měli ještě jednou dotknout tématu režimů zobrazení, o kterém jsme hovořili dříve.

Historicky to po přijetí norem zůstalo stejné velký počet dokumenty tvořené podle starých pravidel čistého jazyk HTML a muselo se s nimi něco udělat. Zároveň se také vyvíjel (vznikl stylový značkovací jazyk a některé tagy a atributy zastaraly), takže bylo potřeba prohlížeči nějak ukázat, podle jakých standardů bude potřebovat tento kód analyzovat.

Aby bylo možné oddělit nové dokumenty (které zohledňovaly všechny vznikající standardy) a staré (které často nezohledňovaly nic jiného než čisté Html), navrhl Melkosoft použít malou funkci z jazyka XML, který se v té době právě objevil . Tato funkce byla funkcí služby a nyní se nazývá deklarace doctype.

Může to vypadat jinak (více se o tom dočtete v článku uvedeném výše), ale tato možnost bude vždy fungovat:

Prohlížeč tak obdržel značku, jaké standardy by měl použít k analýze dokumentu. Pokud je přítomna deklarace doctype, přejde do standardního režimu. Pokud prohlížeč nenajde doctype na prvním řádku kódu dokumentu (nebo je napsán špatně, což je shodné s jeho absencí), přejde na tzv. trikový režim(režim quirks).

Dokument, který postrádá doctype, se v prohlížeči zobrazí, jako by byl velmi starý (starožitný). Pokud ke stejnému dokumentu přidáte prohlášení, prohlížeč se zbaví své starobylosti a začne pracovat s kódem dokumentu podle všech aktuálně přijímaných standardů.

Ale pojetí starověku je velmi odlišné. Jaký druh starověku může mít například dnes populární fejetonista? Google Chrome, který se objevil teprve v roce 2008? IE má samozřejmě poměrně bohatou historii. Proto všechny prohlížeče jakékoli verze zobrazí dokument bez deklarace (v režimu quirks nebo triků) stejným způsobem, jako by to dělal starý prohlížeč, protože toto je verze, která je považována za základní.

Proč jsem tak dlouho mluvil o režimech zobrazení prohlížeče? Ale protože pro tyto dva režimy je určení výšky oblasti obsahu v procentech velmi odlišné ve vztahu k výpočtu právě této výšky.

Nastavení výšky (v procentech) oblasti s obsahem v režimu standardů (když je na začátku dokumentu uveden správný typ dokumentu) nebude vůbec možné, pokud nebude výška pro kontejner, ve kterém je tento obsah uzavřen (určena ty v procentech výšky budou ignorovány).

Pokud z kódu dokumentu odstraníme deklaraci doctype, uvidíme následující obrázek:

Pro režim následujících standardů (deklarace se píše na začátku dokumentu) musíte nejprve nastavit výšku kontejneru (v našem případě u Div bude kontejnerem tag Body) a teprve poté prohlížeč správně zvládne výšku:100%:

Výsledkem bylo, že jsme se dostali ke dvěma zcela odlišným přístupům při nastavování výšky obsahové oblasti v procentech, takže abyste se vyhnuli problémům, rozhodně vám doporučuji zadejte správnou deklaraci doctype na začátku všech vašich dokumentů (webových stránek). Existuje další příklad, kdy rozdíl mezi režimem dodržování standardů a režimem triků bude kolosální.

Pokud nastavíte výšku a šířku oblasti obsahu pro jakýkoli prvek Html a také určíte šířku odsazení a okraje pro tento tag, pak v režimu quirks (bez písemné deklarace) v různé prohlížeče to vše lze interpretovat různými způsoby.

Ve starém prohlížeči IE 5.5 se výplň a šířka rámečku budou počítat dovnitř od rozměrů zadaných přes výšku a šířku. Tito. celková velikost prvku bude odpovídat tomu, co je uvedeno v těchto Vlastnosti CSS(toto je zastaralé schéma, které se již nepoužívá).

Ve zbytku moderní prohlížeče vycpávka a šířka okraje budou přidány k rozměrům uvedeným ve výšce a šířce. Tito. v tomto případě (trikový režim bez doctype) se původně zadané rozměry oblasti obsahu rozšíří o množství vnitřního odsazení a ohraničení.

Pokud do dokumentu napíšete směrnici, pak se v naprosto všech moderních a starých prohlížečích lze těmto problémům s dualitou přístupu snadno vyhnout. V tomto případě a v IE 5.5 se bude výplň a šířka okraje sčítat s rozměry oblasti obsahu, jak to vyžadují moderní standardy CSS. Proto se vyhnout vždy používejte doctype.

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás to zajímat

Poloha (absolutní, relativní a pevná) - metody polohování HTML prvky v CSS (pravidlo vlevo, vpravo, nahoře a dole)
Plovoucí a jasné v CSS - nástroje pro rozvržení bloků
Padding, Margin and Border - nastavení vnitřního a externího odsazení v CSS, stejně jako ohraničení pro všechny strany (nahoře, dole, vlevo, vpravo)
Umístění pomocí Z-indexu a pravidla kurzoru CSS pro změnu kurzoru myši
K čemu je CSS, jak napojit kaskádové styly HTML dokument a základní syntaxi tohoto jazyka
Tagy, class, Id a univerzální selektory, stejně jako selektory atributů v moderním CSS Různá provedení pro vnitřní a externí odkazy přes CSS
Priority v Css a jejich zvýšení z důvodu Důležité, kombinace a seskupení selektorů, uživatelských a autorských stylů
Display (block, none, inline) in CSS – nastavte typ zobrazení Html prvků na webové stránce
Jednotky dimenze (pixely, Em a Ex) a pravidla dědičnosti v CSS

Popis

Chcete-li změnit velikost obrázku pomocí HTML, jsou k dispozici atributy height a width. Můžete použít hodnoty v pixelech nebo procentech. Pokud je nastaven procentuální údaj, pak se rozměry obrázku počítají vzhledem k nadřazenému prvku – kontejneru, kde je umístěn tag . Pokud nadřazený kontejner neexistuje, chová se jako něj okno prohlížeče. Jinými slovy width="100%" znamená, že obrázek bude roztažen přes celou šířku webové stránky. Přidáním pouze jednoho atributu šířky nebo výšky zachováte proporce a poměr stran obrazu. Prohlížeč čeká, dokud se obrázek zcela nenačte, aby určil jeho původní výšku a šířku.

Nezapomeňte nastavit rozměry všech obrázků na webové stránce. Díky tomu je načítání stránky poněkud rychlejší, protože prohlížeč nemusí počítat velikost každého obrázku po jeho přijetí. Toto tvrzení je zvláště důležité pro obrázky umístěné uvnitř tabulky.

Šířku a výšku obrázku lze změnit buď menší nebo větší. To však nijak neovlivňuje rychlost načítání obrázku, protože velikost souboru zůstává nezměněna. Proto oddalujte opatrně, protože... To může mezi čtenáři způsobit zmatek, proč se tak malý obrázek načítá tak dlouho. Zvětšení velikosti však vede k opačnému efektu – velikost obrázku je velká, ale soubor se načítá rychleji než obrázek stejné velikosti. Ale kvalita kresby se zhoršuje.

Syntax

HTML
XHTML

Hodnoty

Jakékoli kladné celé číslo v pixelech nebo procentech.

Výchozí hodnota

Původní šířka obrázku.

HTML5 IE Cr Op Sa Fx

Ahoj, Vážení čtenáři.

Toto je jedenáctá lekce v učení CSS. V této lekci se podíváme pouze na dvě jednoduché, ale důležité vlastnosti. Tyto vlastnosti řídí výšku a šířku bloku.

Před prostudováním této lekce si projděte předchozí lekce:

Teorie a praxe

V minulé lekci jsme se podívali na to, co je to blokový model, vnitřní a vnější okraje. V tomto se podíváme pouze na dvě vlastnosti: výšku a šířku bloku. Výška v CSS je nastavena vlastností výška a šířka je vlastnost šířka . Podívejme se na kód na reálném příkladu (vezměme si příklad z minulé lekce):

A v CSS pro každý blok