Výška, šírka a pretečenie sú pravidlá CSS na popis oblasti obsahu v blokovom rozložení. Ovládanie pretečenia prvkov bloku

Popis

Nastavuje šírku bloku alebo vymeniteľných prvkov (medzi ne patrí napríklad značka ). Šírka nezahŕňa hrúbku okrajov okolo prvku, hodnotu výplne a okrajov.

Prehliadače pracujú rôzne so šírkou, výsledok zobrazenia závisí od použitého. V tabuľke. 1 sú dané možné možnosti a výsledná šírka.

Syntax

šírka: hodnota | úrok | auto | dediť

hodnoty

Hodnoty akceptujú akúkoľvek jednotku dĺžky CSS, ako sú pixely (px), palce (in), body (pt) atď. Pri použití percentuálneho zápisu sa šírka prvku vypočíta na základe šírky nadradeného prvku. Ak rodič nie je explicitne zadaný, okno prehliadača sa chová ako rodič.

Auto Nastaví šírku podľa typu a obsahu prvku. zdediť Zdedí hodnotu rodiča.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tento príklad, ako je zobrazené v prehliadači Safari je znázornené na obr. jeden.

Ryža. 1. Šírka bloku

Objektový model

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

Prehliadače

Internet Explorer 6 správne nedefinuje šírku ako minimálnu šírku . V režime quirk Internet Explorer až do verzie 8.0 vrátane nesprávne vypočíta šírku prvku bez toho, aby k nemu pridal výplň, okraje a okraje.

Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.

V predvolenom nastavení prvky bloku používajú automatickú šírku. To znamená, že prvok bude horizontálne natiahnutý presne tak, ako je. voľné miesto. Výška blokových prvkov je štandardne nastavená automaticky, t.j. prehliadač roztiahne oblasť obsahu vo vertikálnom smere tak, aby sa zobrazil celý obsah. Ak chcete nastaviť vlastné veľkosti 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 definujú iba veľkosť oblasti obsahu. Ak chcete vypočítať celkovú šírku prvku na úrovni bloku, musíte pridať šírku oblasti obsahu, ľavú a pravú výplň a šírku ľavý a pravý okraj. To isté platí pre celkovú výšku prvku, iba všetky hodnoty sa počítajú vertikálne:

Pre tento odsek nastavte iba šírku a výšku.

Tento odsek obsahuje okrem šírky a výšky aj zarážku, orámovanie a odsadenie.

Príklad jasne ukazuje, že druhý prvok zaberá viac miesta ako prvý. Ak počítame podľa nášho vzorca, potom rozmery prvého odseku sú 150 x 100 pixelov a rozmery druhého odseku sú:

t.j. 180 x 130 pixelov.

pretečeniu prvku

Po definovaní šírky a výšky prvku by ste mali venovať pozornosť jednému dôležitému bodu - obsah umiestnený vo vnútri prvku môže presiahnuť špecifikovanú 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 informuje prehliadač, čo má robiť, ak obsah bloku presiahne jeho veľkosť. Táto vlastnosť môže nadobúdať jednu zo štyroch hodnôt:

• viditeľný je predvolená hodnota používaná prehliadačom. Zadanie tejto hodnoty bude mať rovnaký účinok, ako keby ste nenastavili vlastnosť overflow.
• scroll – Pridá zvislé a vodorovné posúvače k ​​prvku.
• auto – v prípade potreby pridá posuvníky.
• skrytý - skryje časť obsahu, ktorý presahuje hranice prvku bloku.

Dobrý deň, milí čitatelia blogu. Dnes si povieme, ako môžete nastaviť rozmery pre oblasť obsahu pomocou výšky a šírky a ako prispôsobiť zobrazenie tohto obsahu v prípade, že je ho viac, ako sa zmestí do priestoru preňho vyhradeného (pravidlo pretečenia css s hodnoty skryté, posúvanie, automatické).

Text prvého odseku

Druhý text

Pretože šírka a výška pre tieto odseky nie sú nastavené, potom ich štandardne vypočítava samotný prehliadač na základe vlastného chápania hodnoty Auto. V dôsledku toho odseky zaberajú všetok priestor, ktorý majú k dispozícii, na šírku a na výšku zodpovedajú výške obsahu, ktorý je v nich uzavretý.

Urobme teraz prvú zmenu a pevne zakódujme šírku prvého odseku (šírka: 50px):

Text prvého

Druhý text

Vo všeobecnosti sa stalo očakávané - horizontálna veľkosť sa zmenšila na hodnotu špecifikovanú v width: 50px, no, výška odseku sa stále tvorí vďaka height: auto (predvolená hodnota). Výsledkom bolo, že sa do nej zmestil celý text.

Ale teraz obmedzme výšku kontajnera aj s height:15px.

Výsledkom bolo, že text v našom malom kontajneri odsekov sa už nezmestí, a preto bezpečne prešiel do oblasti svojho suseda. Slúži práve na kontrolu správania obsahu v takýchto situáciách pravidlo pretečenia.

Pretečenie znamená "pretečenie" alebo inými slovami "pretečenie obsahu". Hovorí, čo sa má stať s obsahom, ak sa nezmestí do oblasti (kontajnera), ktorá mu bola pridelená.

Pretečenie má niekoľko platných hodnôt, ale predvolená hodnota je viditeľné (zobraziť):

Preto v našom poslednom príklade text horného odseku prebehol do spodného (štandardne sa použilo overflow:visible - na zobrazenie obsahu, ktorý sa nezmestí do kontajnera). Mohli by sme použiť druhý extrém - pretečenie:skryté. Potom by sa na webovej stránke nezobrazilo všetko, čo sa nezmestilo do kontajnera:

Ďalšie dve hodnoty tejto vlastnosti CSS vám umožňujú posúvať obsah, ktorý sa nezmestí do kontajnera (niečo podobné sme už pozorovali, keď sme študovali). Posúvanie teda zobrazí zvislé a vodorovné posúvače, aj keď sa obsah bezpečne zmestí do kontajnera, ktorý je preň pridelený:

Ale oveľa logickejšie by bolo použiť hodnotu Auto pre Overflow, ak potrebujete vytvoriť posuvníky. V tomto prípade prehliadač sám vypočíta, kedy ich má zobraziť a na ktorých osiach.

Napríklad v prípade použitia overflow:auto sa budeme môcť posúvať iba pozdĺž osi, kde sa obsah nezmestí do hraníc kontajnera:

Text prvého

Druhý text

Ak to zhrnieme, môžeme povedať, že Overflow celkom umožňuje flexibilne prispôsobiť možnosti zobrazenia obsahu v prípade, že vylezie zo svojej nádoby. Budete mať možnosť zobraziť obsah, ktorý odišiel (viditeľný), nezobraziť (orezať - skryté), alebo vykonať povinné rolovanie (scroll) alebo rolovanie podľa potreby (auto).

Existujú aj ďalšie možnosti na písanie tohto pravidla súvisiace s CSS3, ktoré však podporujú všetky prehliadače, čo znamená, že ich možno bezpečne používať. Hovorím o možnostiach overflow-x a overflow-y, ktoré umožňujú nastaviť alebo nenastaviť rolovanie po jednotlivých osiach (x je horizontálne, y je vertikálne).

Ak sa napríklad potrebujete uistiť, že horizontálne posúvanie sa nikdy nezobrazí a vertikálne posúvanie sa objaví iba v prípade potreby (ak sa obsah nezmestí), potom pre prvok Html budete musieť napísať overflow-x: hidden a overflow- y: auto . Všetko, úloha bude vyriešená, pretože túto fintu podporujú všetky prehliadače.

Výška a šírka v percentách – prečo potrebujeme doctype

Teraz si povedzme, z čoho sa vypočíta percentuálna šírka. Pamätajte, že na začiatku článku som sľúbil, že na to zameriam našu pozornosť. V skutočnosti šírka pravidla CSS tu nie je výnimkou a rovnako ako výplň a okraj sa počíta ako percento horizontálnej veľkosti kontajnera obsahu.

Trochu neprehľadnejšia situácia je s výškou oblasti obsahu udávanou v percentách. Bolo by logické predpokladať, že podobne - z výšky kontajnera. Ale tu sa vy a ja začíname stretávať s dualizmom (dva modely správania) – ako to robili predtým a ako to robia teraz podľa prijatých noriem. V tejto súvislosti by sme sa mali opäť dotknúť témy režimov zobrazenia, o ktorej sme už hovorili.

Historicky sa tak stalo, že po prijatí noriem stále existovalo veľké množstvo dokumentov tvorených podľa starých pravidiel čistého HTML jazyk a bolo treba s nimi niečo urobiť. Zároveň sa aj vyvíjal (vynikal značkovací jazyk štýlu a niektoré značky a atribúty boli zastarané), takže bolo potrebné prehliadaču nejako ukázať, podľa akých štandardov bude potrebovať tento kód analyzovať.

Aby bolo možné oddeliť dokumenty nové (ktoré zohľadňovali všetky vznikajúce štandardy) a staré dokumenty (často nezohľadňujúce nič iné ako čisté Html), Melkosoft navrhol použiť malú vlastnosť z jazyka XML, ktorý sa v tom čase práve objavil. Táto funkcia bola služba a teraz sa nazýva deklarácia doctype.

Môže to vyzerať inak (viac si o tom prečítajte v článku uvedenom vyššie), ale táto možnosť bude vždy fungovať:

Prehliadač teda dostal značku, aké štandardy by mal použiť na analýzu dokumentu. Ak je zadaná deklarácia doctype, potom prejde do štandardného režimu. Ak prehliadač nenájde doctype v kóde dokumentu na jeho prvom riadku (alebo bude napísaný nesprávne, čo je zhodné s jeho absenciou), tak prejde do tzv. trikový režim(režim vtipov).

Dokument, ktorý nemá doctype, sa v prehliadači zobrazí, ako keby bol veľmi starý (starožitný). Ak k tomu istému dokumentu pridáte vyhlásenie, prehliadač sa už zbaví svojej patiny staroveku a začne pracovať s kódom dokumentu podľa všetkých v súčasnosti uznávaných štandardov.

Pojem staroveku je však veľmi odlišný. Aký druh staroveku môže mať teraz napríklad populárny prehliadač? Google Chrome, ktorý sa objavil až v roku 2008? IE má, samozrejme, pomerne bohatú históriu. Preto všetky prehliadače akejkoľvek verzie zobrazia dokument bez deklarácie (v režime quirks alebo trikov) rovnakým spôsobom, ako by to urobil starý prehliadač, pretože táto verzia sa považuje za základnú.

Prečo som tak dlho hovoril o režimoch zobrazenia prehliadača? Ale pretože pre tieto dva režimy je nastavenie výšky (výšky) oblasti obsahu v percentách veľmi odlišné vo vzťahu k výpočtu práve tejto výšky.

Nastavenie výšky (v percentách) oblasti s obsahom v štandardnom režime (keď je na začiatku dokumentu napísaný správny doctype) nebude vôbec možné, pokiaľ nie je niekde nastavená výška pre kontajner, v ktorom je tento obsah priložené (zadané v percentách výšky budú ignorované).

Ak sa z kódu dokumentu odstráni deklarácia doctype, uvidíme nasledujúci obrázok:

Pre režim dodržiavania noriem (deklarácia sa píše na začiatku dokumentu) musíte najskôr nastaviť výšku kontajnera (v našom prípade bude tag Body slúžiť ako kontajner pre Div) a až potom prehliadač správne vypočíta výšku: 100%:

V dôsledku toho sme dostali dva úplne odlišné prístupy pri nastavovaní výšky obsahu v percentách, takže aby ste sa vyhli problémom, odporúčam vám bez problémov uveďte správnu deklaráciu doctype na začiatku všetkých vašich dokumentov (webových stránok). Existuje ďalší príklad, kde je rozdiel medzi štandardným režimom a trikovým režimom obrovský.

Ak nastavíte pre ľubovoľný prvok Html výšku a šírku pre oblasť obsahu a tiež určíte výplň a šírku rámca (orámovanie) pre túto značku, potom v režime quirks (bez písomnej deklarácie) v rôzne prehliadače toto všetko sa dá interpretovať rôznymi spôsobmi.

V starom prehliadači IE 5.5 sa výplň a šírka okraja počítajú dovnútra od veľkostí určených cez výšku a šírku. Tie. celková veľkosť prvku bude zodpovedať tomu, čo je uvedené v týchto CSS vlastnosti(toto je zastaraná schéma, ktorá sa už nepoužíva).

Vo zvyšku moderné prehliadače k rozmerom uvedeným na výšku a šírku sa pripočíta výplň a šírka okraja. Tie. v tomto prípade (režim triku bez doctype) sa pôvodne dané rozmery oblasti obsahu rozšíria o množstvo výplne a orámovania.

No, ak je v dokumente napísaná smernica, potom v absolútne všetkých moderných a starých prehliadačoch sa týmto problémom s dualitou prístupu už dá ľahko vyhnúť. V tomto prípade a v IE 5.5 sa k veľkosti oblasti obsahu pripočíta množstvo výplne a šírka okraja, ako to vyžadujú moderné štandardy CSS. Preto, aby sa zabránilo vždy píšte doctype.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

Poloha (absolútna, relatívna a pevná) - metódy polohovania Html prvky v CSS (pravidlá vľavo, vpravo, hore a dole)
Float and clear in CSS - block layout tools
Padding, Margin and Border - v CSS nastavujeme vnútorné a vonkajšie vypchávky, ako aj okraje pre všetky strany (hore, dole, vľavo, vpravo)
Umiestňovanie pomocou Z-indexu a pravidla kurzora CSS na zmenu kurzora myši
Na čo slúži CSS, ako k nemu pripojiť kaskádové štýly html dokument a základná syntax tohto jazyka
Selektory značiek, tried, Id a univerzálnych selektorov, ako aj selektory atribútov v modernom CSS Iný dizajn do interiéru a vonkajšie odkazy cez CSS
Priority v Css a ich zvýšenie z dôvodu Dôležité, kombinácie a zoskupenia selektorov, používateľských a autorských štýlov
Display (block, none, inline) in CSS – nastavenie typu zobrazenia Html prvkov na webovej stránke
Jednotky veľkosti (Pixely, Em a Ex) a dedičnosť pravidiel v CSS

Popis

Ak chcete zmeniť veľkosť obrázka pomocou HTML, sú poskytnuté atribúty height a width. Môžete použiť hodnoty v pixeloch alebo percentách. Ak je nastavený percentuálny zápis, potom sa rozmery obrázka vypočítajú vzhľadom na nadradený prvok – kontajner, v ktorom sa nachádza značka . Ak neexistuje žiadny nadradený kontajner, okno prehliadača funguje ako jeho nadradený kontajner. Inými slovami width="100%" znamená, že obrázok sa roztiahne na celú šírku webovej stránky. Pridaním iba jedného atribútu šírky alebo výšky sa zachová pomer strán a pomer strán obrázka. Prehliadač potom čaká, kým sa obrázok úplne načíta, aby určil jeho počiatočnú výšku a šírku.

Nezabudnite nastaviť veľkosť všetkých obrázkov na webovej stránke. Vďaka tomu je načítanie stránky o niečo rýchlejšie, pretože prehliadač nemusí počítať veľkosť každého obrázka po jeho prijatí. Toto tvrdenie je obzvlášť dôležité pre obrázky umiestnené vo vnútri tabuľky.

Šírka a výška obrazu sa dá meniť hore aj dole. To však žiadnym spôsobom neovplyvňuje rýchlosť sťahovania obrázka, pretože veľkosť súboru zostáva nezmenená. Zmenšujte preto obrázok opatrne, pretože. to môže spôsobiť zmätok medzi čitateľmi, prečo sa taká malá kresba načítava tak dlho. Zväčšenie veľkosti však vedie k opačnému efektu – veľkosť obrázka je veľká, ale súbor sa načítava rýchlejšie v porovnaní s obrázkom rovnakej veľkosti. Ale kvalita obrazu sa zhoršuje.

Syntax

HTML
XHTML

hodnoty

Akékoľvek kladné celé číslo v pixeloch alebo percentách.

Predvolená hodnota

Pôvodná šírka obrázka.

HTML5 IE Cr Op Sa Fx

Ahoj, milý čitateľ.

Toto je jedenásta lekcia CSS. V tejto lekcii zvážime iba dve jednoduché, ale dôležité vlastnosti. Tieto vlastnosti sú zodpovedné za výšku a šírku bloku.

Pred štúdiom tejto lekcie si prečítajte predchádzajúce lekcie:

Teória a prax

V minulej lekcii sme sa pozreli na to, čo je krabicový model, vnútorné a vonkajšie zarážky. V tomto budeme brať do úvahy iba dve vlastnosti: výšku a šírku bloku. Výška v CSS je nastavená vlastnosťou výška a vlastnosť width šírka . Pozrime sa v kóde na skutočný príklad (vezmime si príklad z poslednej lekcie):

A v CSS pre každý blok