Aká bude predvolená šírka div. Spôsoby umiestnenia blokov vodorovne

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 len 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 z riešení vyzerá takto: 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

Celková veľkosť každého bloku je súčtom niekoľkých hodnôt vlastností. Čo je možné vidieť na diagrame:

• Veľkosť hlavného bloku (obsahuje hlavný obsah bloku - obrázok, video, text alebo všetko naraz) sa nastavuje pomocou vlastností css šírka A výška (výška bloku)
• Ďalej okolo hlavného bloku sú polia ( vypchávka) pomocou nich nastavíme odsadenie hlavného obsahu od okrajov rámu
• Ďalšia vrstva - hranica Nie je ťažké uhádnuť, za čo je táto nehnuteľnosť zodpovedná
• Posledná vrstva, ktorá tvorí celkovú veľkosť bloku je vonkajší okraj pomocou tejto vlastnosti CSS môžete nastaviť odsadenie medzi blokmi

Nastavenie veľkostí blokov

Tak sme sa dozvedeli, že celkové rozmery nie sú nič iné ako súčet hodnôt všetkých vyššie uvedených vlastností. A so všetkými týmito vlastnosťami môžeme ľahko manipulovať.

Hodnoty výšky a šírky môžeme určiť pomocou konštánt s jednotkami, ako sú px atď. Môžete tiež určiť pomocou percent a výpočtov.

Ak nie je špecifikovaná šírka bloku, potom bude blok predvolene zaberať celú šírku nadradeného bloku mínus hodnoty výplne a okraja.

vlastnosť veľkosti krabice

Ak máte oblasť 800 px a chceli by ste do nej umiestniť 2 prvky, pričom túto oblasť rovnomerne rozdelíte, potom pravidlá CSS

Nedovolia vám to urobiť z jednoduchého dôvodu, pretože... Celková veľkosť bloku zahŕňa všetky zarážky a orámovanie, a preto nebude dostatok miesta pre druhý blok.

Môžeme to vyriešiť tak, že jednoducho vypočítame, koľko miesta potrebujeme na okraj a výplň a odpočítame ich od vlastnosti width. Existuje však aj iný spôsob: v tomto prípade môžete nehnuteľnosť použiť box-sizing:border-box

Item( box-sizing:border-box; /**/ width:50%; padding:20px; border:1px; margin:0px; )

Ak aplikujeme pravidlo box-sizing:border-box na css blok, potom nemusíme počítať vnútorné výplne a ohraničenie, pretože v tomto prípade sa započítajú do hodnoty šírky a vnútorné polstrovanie a bordúru môžeme pokojne usporiadať podľa potreby, bez obáv, že tvárnice nebudú pasovať. Toto pravidlo však nezahŕňa vlastnosť marža. Preto, ak potrebujete pridať externú výplň medzi prvky, potom vypočítajte, koľko budete musieť odpočítať od vlastnosti width;

Poznámka: Ak vám táto vlastnosť v prehliadači Chrome nefunguje, pridajte pre ňu toto pravidlo samostatne

Webkit-box-sizing:border-box;

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

Ahoj, milý čitateľ.

Toto je jedenásta lekcia v učení CSS. V tejto lekcii sa pozrieme len na dve jednoduché, ale dôležité vlastnosti. Tieto vlastnosti riadia 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 blokový model, vnútorné a vonkajšie okraje. V tomto sa pozrieme len na dve vlastnosti: výšku a šírku bloku. Výška v CSS je nastavená vlastnosťou výška a šírka je vlastnosť šírka . Pozrime sa na kód pomocou skutočného príkladu (vezmime si príklad z poslednej lekcie):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <hlava > <názov > Domov</title> <meta http-equiv = "Typ obsahu" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <telo > <div id = "obsah" > <div class = "firstPar" > <p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p> <p> Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p> </div> <div class = "secondPar" > <p> Cras</p> <ul > <li > amet condimentum</li> <li > aliquam volutpat</li> <li > elementum interdum</li> </ul> </div> </div> </body> </html>

A v CSS pre každý blok