V predvolenom nastavení prvky bloku používajú automatickú šírku. To znamená, že prvok bude horizontálne natiahnutý presne tak, ako je voľné miesto. 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.

Vlad Merževič

Akýkoľvek blokový prvok pozostáva zo súboru vlastností, ako sú listy kapusty, ktoré sa navzájom prekrývajú. Základom bloku je jeho obsah (môže to byť text, obrázok a pod.), ktorého šírka je určená vlastnosťou width a výška pomocou height ; okolo obsahu sú vypchávky, ktoré vytvárajú prázdny priestor od obsahu po vnútorný okraj okrajov; potom prídu samotné okraje (border) a blok je doplnený okrajmi (margin), neviditeľným prázdnym priestorom z vonkajšieho okraja okrajov. Šírka bloku je komplexná hodnota a pozostáva z niekoľkých hodnôt vlastností:

• šírka - obsahová šírka, t.j. obsah bloku;
• padding-left a padding-right - okraj vľavo a vpravo od obsahu;
• border-left a border-right - hrúbka okraja vľavo a vpravo;
• margin-left a margin-right - ľavý a pravý okraj.

Niektoré vlastnosti môžu chýbať, v takom prípade to nemá vplyv na šírku. Celková šírka je znázornená na obr. 1 ako čierna bodkovaná čiara.

Ryža. 1. Šírka bloku

Ak šírka nie je špecifikovaná, predvolene sa použije auto . V tomto prípade bude šírka bloku zaberať celú dostupnú šírku pri zachovaní hodnôt okrajov, okrajov a výplne. Dostupnou šírkou sa v tomto prípade rozumie šírka obsahu nadradeného bloku, a ak žiadny rodič neexistuje, tak šírka obsahu prehliadača.

Povedzme, že nasledujúci štýl je napísaný pre vrstvu.

Šírka: 300px; /* Šírka vrstvy */ margin: 7px; /* Hodnota výplne */ okraj: 4px plná čierna; /* Možnosti okrajov */ padding: 10px; /* Okraje okolo textu */

Šírka vrstvy podľa tohto zadania sa bude rovnať 342 pixelom, túto hodnotu získame sčítaním hodnoty šírky obsahu plus ľavý výplň, ľavý okraj a ľavý okraj plus pravý okraj, pravý okraj a pravý výplň. Zhrňme si všetky čísla.

Šírka = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Treba poznamenať, že blokový model s tvorbou šírky so sebou nesie veľa nepríjemností. Neustále musíte robiť výpočty, keď potrebujete nastaviť určitú šírku bloku. Problémy začínajú aj pri kombinovaní rôzne jednotky merania, najmä percentá a pixely. Predpokladajme, že šírka obsahu je nastavená na 90%, ak pridáme okraje a okraje špecifikované v pixeloch, potom nie je možné vypočítať celkovú šírku bloku, pretože percentá nie sú priamo prevedené na pixely. To môže viesť k tomu, že celková šírka bloku prekročí šírku webovej stránky, čo bude mať za následok vodorovný posuvník. Z tejto situácie existujú dva spôsoby - zmeniť algoritmus blokového modelu a použiť vnorené vrstvy.

Algoritmus blokového modelu

Ako už bolo spomenuté, šírka bloku je tvorená šírkou obsahu a hodnotami okrajov, okrajov a výplne. V prehliadači internet Explorer Algoritmus sa automaticky zmení a šírka celého bloku sa nastaví na šírku. Iné prehliadače nezmenia algoritmus tak ľahko a okrem toho viete, že režim kompatibility je zlý. CSS3 má skvelú vlastnosť veľkosti boxu, ktorá sa nám bude hodiť. Keď je nastavené na border-box, šírka začne zahŕňať okraje a okraje, ale nie výplň. Spojením veľkosti boxu s hodnotou border-box s naším štýlom teda môžeme nastaviť šírku v percentách a bezpečne určiť border a padding bez strachu, že sa zmení šírka bloku. Bohužiaľ, s touto vlastnosťou je malý problém, ako to už v prehliadačoch býva – nie všetky prehliadače jej rozumejú. Som rád, že prehliadače aspoň podporujú vlastnosti špecifické pre prehliadač. V tabuľke 1 ukazuje podporu prehliadača.

Tabuľka 1. Podpora prehliadača pre vlastnosť box-sizing

Prehliadač	internet Explorer	Chrome	Opera	Safari	Firefox
Verzia	8.0+	2.0+	7.0+	3.0+	1.0+
Nehnuteľnosť	box-size	-rozmery webkit-boxu	box-size	-rozmery webkit-boxu	-moz-box-sizing

Ako vidíte z tabuľky, vo vlastnostiach je zmätok a kolísanie, takže budete musieť vytvoriť hybrid a označiť všetky tri vlastnosti (príklad 1).

Príklad 1: Šírka bloku

HTML5 CSS3 IE Cr Op Sa Fx

Tento príklad bude fungovať vo všetkých prehliadačoch uvedených v tabuľke. 1, nie je však platný v CSS3 kvôli použitiu neštandardných vlastností začínajúcich na -moz a -webkit. Šírka bloku je 100 % vrátane hodnôt výplne. Bez vlastnosti box-sizing sa v prehliadači zobrazí vodorovný posuvník.

Vnorené vrstvy

Použitie vlastnosti box-sizing je dobré pre každého, okrem toho, že nefunguje v starších verziách IE. Ak navrhujete webovú stránku založenú na IE7 a IE6, stará osvedčená metóda vkladania vrstiev je pre vás vhodná. Myšlienka je jednoduchá – pre prvok vonkajšieho bloku sa nastaví len požadovaná šírka a pre vnorený blok sa nastaví všetko ostatné – okraje, okraje a výplň. Keďže predvolená šírka bloku sa rovná dostupnej šírke jeho rodiča, bloky sa budú v určitom zmysle navzájom prekrývať, ale skutočná šírka kombinovaného prvku bude jasne definovaná. Príklad 2 ukazuje použitie vnorených vrstiev.

Príklad 2: Vnorené vrstvy

HTML5 CSS 2.1 IE Cr Op Sa Fx

Výsledok tento príklad znázornené na obr. 2.

Ryža. 2. Šírka bloku v percentách

Výhodou vnorených vrstiev je použitie zarážok (box-sizing ich nezohľadňuje), všestrannosť metódy a skutočnosť, že pozadie je možné v prípade potreby pridať do jednej alebo druhej vrstvy. Toto sa trochu mení vzhľad prvky, to platí najmä pri zahrnutí obrázkov na pozadí. Medzi nevýhody metódy možno zaznamenať zahrnutie ďalšieho bloku, ktorý komplikuje štruktúru kódu, najmä ak sa metóda často používa. Ale to možno považovať za maličkosť v porovnaní s výhodami.

Popis

Nastavuje šírku prvkov na úrovni bloku alebo vymeniteľných prvkov (napríklad značky ). Šírka nezahŕňa hrúbku okrajov okolo prvku, výplne alebo hodnoty okrajov.

Prehliadače nespracúvajú šírku rovnakým spôsobom; výsledok zobrazenia závisí od použitého prehliadača.. V tabuľke 1 sú dané možné možnosti a výsledná šírka.

Tabuľka 1. Akcia šírka v prehliadačoch

	internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Nešpecifikované (režim kompatibility)	Ak obsah presahuje určenú šírku, veľkosť bloku sa prispôsobí obsahu. V opačnom prípade sa šírka bloku rovná hodnote šírky.	Vo všetkých prípadoch prehliadač pracuje podľa špecifikácie CSS. Konkrétne, šírka bloku sa získa pridaním hodnôt width , padding , margin a border . Obsah bloku, ak sa nezmestí do zadaných rozmerov, sa zobrazí v hornej časti bloku.	Šírka sa rovná hodnote šírky.
Prechodné HTML
Prísne HTML	Šírka sa vytvorí sčítaním hodnôt šírky, výplne, okraja a okraja. Ak sa obsah bloku nezmestí do zadaných rozmerov, zobrazí sa navrchu.		Šírka sa rovná hodnote šírky plus výplň, okraj a okraj. Ak sa obsah bloku nezmestí do zadaných rozmerov, zobrazí sa navrchu.
HTML 5
XHTML

Syntax

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

hodnoty

Akékoľvek jednotky dĺžky akceptované v CSS sú akceptované ako hodnoty - napríklad pixely (px), palce (in), body (pt) atď. Pri použití percentuálneho zápisu sa šírka prvku vypočíta v závislosti od šírky rodičovský prvok. Ak rodič nie je explicitne zadaný, potom sa ním chová okno prehliadača.

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tohto príkladu, ako sa zobrazuje v prehliadači Safari, je znázornený na obr. 1.

Ryža. 1. Šírka bloku

Objektový model

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

Prehliadače

Internet Explorer 6 nesprávne definuje šírku ako minimálnu šírku . Vo zvláštnom režime Internet Explorer verzie až do 8.0 vrátane nesprávne vypočítajú šírku prvku bez toho, aby k nemu pridali hodnoty výplne, okraja alebo okraja.

Verzie programu Internet Explorer do 7.0 vrátane nepodporujú hodnotu zdedenia.

O výhodách rozloženia div oproti tabuľkovému asi nemusíš nikomu hovoriť.Všetci to už dávno pochopili a prešli na ne z tabuliek.No a kto neprešiel, čoskoro pochopí svoje chyby a urobí to.Ale ako v akákoľvek lekcia - tu Sú aj úskalia: divy sa nesprávajú tak, ako by sa mali, alebo nie je možné vyskladať nejakú konkrétnu štruktúru, existuje veľa prekážok, ale vždy je len jeden dizajnér dispozície...

Tento príspevok je určený skôr začiatočníkom, no možno si tu nájdu niečo zaujímavé aj profíci. Poďme teda na vec!

Toto sa vždy oplatí pripomenúť

Existuje jeden prístup k usporiadaniu, ktorý je potrebné dodržiavať čo najčastejšie a najpresnejšie. Ide o mineralizáciu stromu DOM. To má niekoľko opodstatnených výhod: zjednodušuje to samotný proces rozloženia, znižuje počet potenciálnych chýb na minimum a zlepšuje transparentnosť kódu. Na to musíme vždy pamätať a pri plánovaní stavby tomu venovať osobitnú pozornosť.

Základné princípy sú nasledovné: na odsadenie používame iba padding a margin (podľa potreby) - vôbec nie je potrebné robiť samostatný 20 pixelový div, vnorovanie obmedzíme na minimum, nepreháňame to s polohou : relatívne a následné blokové posuny (pri nesprávnom použití môže viesť k polhodinovej úprave celého kódu), aktívne využívame z-index na dosiahnutie požadovaného efektu.

FAQ

- Ako umiestniť divy jeden po druhom? A na to použijeme vlastnosť - float: left (alebo right, podľa potreby), aby ďalší div po takýchto striedavých stál pod nimi, nastavíme mu vlastnosť clear (napríklad clear: left).

- Ako vycentrovať div? Jedno riešenie vyzerá takto nasledujúcim spôsobom- nastavte margin-left a margin-right ako auto (alebo ešte jednoduchšie - margin:0 auto;)

- Ako umiestniť prvky v dive vertikálne? Závisí to od prvku, napríklad pre text stačí zadať vertical-align:middle, ale pre obrázok je potrebné zadať line-height:Npx.

- Odsadenie pomocou okraja alebo výplne? Okraj v podstate slúži na odsadenie medzi blokmi, je to „vonkajšie“ odsadenie, keďže odsadenie je „vnútorné“ odsadenie a najčastejšie sa používa napríklad na usporiadanie odsadenia okolo textu. Vyzerá to ako jednoduchá vec, ale niekedy môžete naraziť na také skvosty, ako je firebug, že mi to tu nedalo nespomenúť.

- Posunúť blok pomocou margin alebo position:relative v spojení s horizontálnym a vertikálnym posunom? Samozrejme, v týchto prípadoch musíte použiť maržu. Je pravda, že ako inde, všetko závisí od konkrétneho prípadu, ale vo všeobecnosti by ste mali stále používať maržu.

- Ako natiahnuť div, aby sa zmestil na obsah bloku? Ak to chcete urobiť, musíte zadať výšku: auto;

Ako natiahnuť prvok div do výšky jeho rodiča, ktorý sa zase natiahne do výšky obsahu prvku div umiestneného v ňom, vedľa prvého prvku div? Nastavte div obsahu na výšku: auto, ďalšie dva div na výšku: 100 % a zobrazenie: tabuľka;

- Ako urobiť div neviditeľným? Manipuláciou s vlastnosťou zobrazenia. Pre neviditeľnosť nastavte na žiadnu.

- Ako prinútiť posúvanie obsahu v prvku div so statickou výškou? Vo vlastnostiach nastavíme overflow:scroll.

- Ako zobraziť (napríklad) značku „a“ ako div (blok)? Vo vlastnostiach nastavte výšku a šírku a nastavte display:block;

To je všetko, čo potrebujete vedieť, aby ste mohli bezbolestne písať divs. V skutočnosti. No, ak prídu ďalšie otázky, odpovede sa tu okamžite objavia! Vo všeobecnosti sa však nie je čoho báť - pol hodiny tréningu a Už som profík Odložte tieto zastarané tabuľky – a prejdite na novú etapu vývoja!

Tagy: faq, div, layout, tutorial

Pri rozvrhnutí ďalšieho projektu (alebo len návrhu mriežky rozloženia) mnohí čelili dileme – použiť pevnú šírku rozloženia alebo „gumenú“ mriežku, ktorá sa prispôsobí veľkosti okna prehliadača.

Každé z týchto riešení má svoje klady a zápory, chcem sa zamerať na mínusy, pretože zvyčajne práve pri reflektovaní mínusov týchto rozhodnutí si treba vybrať medzi dvoma zlami.

Pevná šírka mriežky rozloženia

Rozloženie je vnútené do horizontálneho rozmeru 960-980 pixelov (takže všetko je zahrnuté na väčšine zariadení vo väčšine rozlíšení), čo pri veľkých horizontálnych veľkostiach okien pôsobí akosi mrazivo – tenký vertikálny pás užitočného obsahu stránky a obrovské zbytočné polia nevyužitý priestor po stranách.

„Gumová“ mriežka rozloženia po celej šírke okna

Pri veľkých horizontálnych veľkostiach okien je tu opäť ďalší problém: riadky textu sú veľmi dlhé a ich čítanie nie je vôbec také pohodlné, ako by sme chceli.
Ďalším častým problémom tohto riešenia je, že bočné okraje s veľkými horizontálnymi rozmermi okien už vizuálne nezodpovedajú horizontálnym rozmerom prvkov, čo tiež nepridáva komfort pri pohľade na rozloženie.

Chcel by som navrhnúť jednoduché riešenie - obmedziť minimálnu horizontálnu veľkosť na pevnú hodnotu v pixeloch a maximálnu relatívnu ako percento šírky okna. Toto je veľmi triviálne riešenie jednoduchými prostriedkami 2 ďalšie verzie špecifikácie CSS.

Aktualizácia: Dovolím si výhradu, že nehovoríme o klasickom gumovom efekte a prispôsobení sa absolútne všetkým rozlíšeniam, ale skôr len o určitom rozumnom rozsahu rozlíšení, pre ktorý je layout určený. V nižšie uvedených príkladoch ide o klasický rozsah rozlíšenia pracovnej plochy s veľkosťou horizontálneho rozlíšenia 1024 pixelov.

Ešte raz zdôrazním: Príspevok nehovorí o riešení pre všetky typy zariadení a všetky rozsahy rozlíšenia. Tento problém sa v zásade nedá vyriešiť v rámci jedného rozloženia., vyriešiť to tak či onak bude vyžadovať niekoľko rozložení. Muchy zvlášť, rezne zvlášť.

Vytvorte kontajner rozloženia:
...
Zdobíme ho jednoduchým štýlovým kódom:
div.page-container ( min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; )
Niekomu sa však toto riešenie môže zdať nedostatočné z dôvodu, že pri veľmi veľkých horizontálnych veľkostiach okien sa opäť objavujú problémy s dĺžkami čiar. Dá sa to vyriešiť rovnako jednoduchou dodatočnou technikou: vytvorením ďalšieho vonkajšieho kontajnera vo vnútri už opísaného a obmedzením jeho maximálnej šírky na pevnú hodnotu (subjektívne sa mi zdá, že hodnoty v rozsahu 1400-1600 pixelov sú najvhodnejšie). Opäť len používame CSS nástroje 2.0. Toto riešenie, namiesto jednoduchého pridania šírky v percentách pre pôvodný kontajner, ako je navrhnuté v prvom komentári, bude fungovať aj v IE, ktorý až do verzie 9 nerozumie simultánnemu uvádzaniu hodnôt.

Pridanie HTML:
...

A trochu zmeňte CSS:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner (min-width: 960px; max-width: 1600px; margin : 0 auto; výplň: 0; )
Ako vidíte, riešenie je mimoriadne jednoduché a celkom univerzálne, možno ho použiť pre akékoľvek blokové prvky.