Elementi bloka privzeto uporabljajo samodejno širino. To pomeni, da bo element vodoravno raztegnjen točno toliko, kot je prosti prostor. Privzeta višina elementov bloka se nastavi samodejno, tj. Brskalnik raztegne področje vsebine navpično, tako da je prikazana vsa vsebina. Če želite nastaviti dimenzije po meri za področje vsebine elementa, lahko uporabite lastnosti širine in višine.

Lastnost širine CSS omogoča nastavitev širine območja vsebine elementa, lastnost višine pa omogoča nastavitev višine področja vsebine:

Upoštevajte, da lastnosti širine in višine določata samo velikost območja vsebine; za izračun skupne širine elementa bloka morate dodati širino območja vsebine, levo in desno oblazinjenje ter širino levega in desna meja. Enako velja za celotno višino elementa, le da so vse vrednosti izračunane navpično:

Za ta odstavek bomo nastavili samo širino in višino.

Ta odstavek vsebuje poleg širine in višine še notranjo oblogo, obrobo in zunanjo oblogo.

Poskusite »

Primer jasno kaže, da drugi element zavzame več prostora kot prvi. Če izračunamo po naši formuli, so dimenzije prvega odstavka 150 x 100 slikovnih pik, dimenzije drugega odstavka pa:

Skupna višina:	5px	+	10 slikovnih pik	+	100 slikovnih pik	+	10 slikovnih pik	+	5px	= 130 slikovnih pik
	zgornji okvir		zgornji vdolbina		višina		nižje vdolbina		nižje okvir

torej 180x130 slikovnih pik.

Prelivanje elementa

Ko ste določili širino in višino elementa, bodite pozorni na eno pomembno točko - vsebina znotraj elementa lahko presega določeno velikost bloka. V tem primeru bo del vsebine presegel meje elementa.Da bi se izognili temu neprijetnemu trenutku, lahko uporabite lastnost prelivanja CSS. Lastnost overflow pove brskalniku, kaj naj naredi, če vsebina bloka presega njegovo velikost. Ta lastnost ima lahko eno od štirih vrednosti:

• visible - privzeta vrednost, ki jo uporablja brskalnik. Nastavitev te vrednosti bo imela enak učinek, kot če ne nastavite lastnosti prelivanja.
• drsenje - elementu doda navpične in vodoravne drsne trakove.
• samodejno - po potrebi doda drsne trakove.
• skrito - skrije del vsebine, ki sega čez meje elementa bloka.

Vlad Merževič

Vsak blok element je sestavljen iz nabora lastnosti, kot so zeljni listi, ki so postavljeni drug na drugega. Osnova bloka je njegova vsebina (ta je lahko besedilo, slika itd.), katere širina je določena z lastnostjo width, višina pa z višino; okoli vsebine so oblazinjenja, ki ustvarjajo prazen prostor od vsebine do notranjega roba obrob; nato pridejo same obrobe (border) in blok se zaključi z robovi (margin), nevidnim praznim prostorom od zunanjega roba obrob. Širina bloka je kompleksna vrednost in je sestavljena iz več vrednosti lastnosti:

• širina - širina vsebine, tj. vsebina bloka;
• padding-left in padding-right - rob levo in desno od vsebine;
• border-left in border-right - debelina roba na levi in ​​desni strani;
• margin-left in margin-right - levi in ​​desni rob.

Nekatere lastnosti morda manjkajo, v tem primeru to ne vpliva na širino. Celotna širina je prikazana na sl. 1 kot črna pikčasta črta.

riž. 1. Širina bloka

Če širina ni podana, je privzeto nastavljena na samodejno. V tem primeru bo širina bloka zasedla celotno razpoložljivo širino, medtem ko bo ohranila vrednosti robov, obrob in oblazinjenja. V tem primeru razpoložljiva širina pomeni širino vsebine nadrejenega bloka, če nadrejenega ni, pa širino vsebine brskalnika.

Recimo, da je za plast napisan naslednji slog.

Širina: 300 slikovnih pik; /* Širina plasti */ rob: 7px; /* Vrednost oblazinjenja */ obroba: 4px polna črna; /* Možnosti obrobe */ padding: 10px; /* Robovi okoli besedila */

Širina sloja v skladu s tem vnosom bo enaka 342 slikovnim pikam, to vrednost dobimo tako, da seštejemo vrednost širine vsebine plus levo obrobo, levi rob in levi rob ter desni rob, desno obrobo in desno obrobo. Seštejmo vse številke.

Širina = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Treba je opozoriti, da model blokov s tvorbo širine nosi s seboj veliko neprijetnosti. Ko morate nastaviti določeno širino bloka, morate nenehno delati izračune. Težave se začnejo tudi pri kombiniranju različne enote meritve, zlasti odstotke in slikovne pike. Predpostavimo, da je širina vsebine nastavljena na 90 %, če dodamo robove in obrobe, določene v slikovnih pikah, potem ni mogoče izračunati skupne širine bloka, saj odstotki niso neposredno prevedeni v slikovne pike. Zaradi tega lahko skupna širina bloka preseže širino spletne strani, kar povzroči vodoravni drsni trak. Obstajata dva izhoda iz te situacije - spremenite algoritem blokovnega modela in uporabite ugnezdene plasti.

Algoritem blokovnega modela

Kot že omenjeno, se širina bloka oblikuje iz širine vsebine in vrednosti robov, obrob in oblazinjenja. V brskalniku internet Explorer Algoritem se samodejno spremeni in širina celotnega bloka je enaka širini. Drugi brskalniki ne spremenijo algoritma tako zlahka, poleg tega pa veste, da je način združljivosti zloben. CSS3 ima čudovito lastnost velikosti škatle, ki nam bo prišla prav. Ko je nastavljeno na border-box, začne širina vključevati robove in obrobe, ne pa tudi oblazinjenja. Tako lahko s povezovanjem velikosti polja z vrednostjo obrobnega polja z našim slogom nastavimo širino v odstotkih in varno določimo obrobo in oblazinjenje, ne da bi se bali, da se bo širina bloka spremenila. Na žalost obstaja majhna težava s to lastnostjo, kot je običajno pri brskalnikih - vsi brskalniki je ne razumejo. Veseli me, da brskalniki podpirajo vsaj lastnosti, specifične za brskalnik. V tabeli 1 prikazuje podporo brskalnika.

Tabela 1. Podpora brskalnika za lastnost box-sizing

Brskalnik	internet Explorer	Chrome	Opera	Safari	Firefox
Različica	8.0+	2.0+	7.0+	3.0+	1.0+
Lastnina	velikost škatle	-webkit-box-sizing	velikost škatle	-webkit-box-sizing	-moz-box-sizing

Kot je razvidno iz tabele, prihaja do zmede in nihanja pri lastnostih, zato boste morali narediti hibrid in navesti vse tri lastnosti (primer 1).

Primer 1: Širina bloka

HTML5 CSS3 IE Cr Op Sa Fx

Ta primer bo deloval v vseh brskalnikih, navedenih v tabeli. 1, vendar ni veljaven v CSS3 zaradi uporabe nestandardnih lastnosti, ki se začnejo z -moz in -webkit. Širina bloka je 100 %, vključno z vrednostmi oblazinjenja. Brez lastnosti box-sizing se bo v brskalniku prikazal vodoravni drsni trak.

Ugnezdeni sloji

Uporaba lastnosti box-sizing je dobra za vse, le da ne deluje v starejših različicah IE. Če načrtujete spletno stran, ki temelji na IE7 in IE6, je za vas primerna stara preverjena metoda gnezdenja slojev. Ideja je preprosta - za element zunanjega bloka je nastavljena samo zahtevana širina, za ugnezdeni blok pa je nastavljeno vse ostalo - robovi, obrobe in oblazinjenje. Ker je privzeta širina bloka enaka razpoložljivi širini njegovega nadrejenega elementa, se bodo bloki na nek način prekrivali, vendar bo dejanska širina kombiniranega elementa jasno definirana. Primer 2 prikazuje uporabo ugnezdenih slojev.

Primer 2: Ugnezdeni sloji

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rezultat ta primer prikazano na sl. 2.

riž. 2. Širina bloka v odstotkih

Prednost ugnezdenih slojev je uporaba zamikov (box-sizing jih ne upošteva), vsestranskost metode in dejstvo, da lahko eni ali drugi plasti po želji dodamo ozadje. To se nekoliko spremeni videz elementov, to še posebej velja pri vključitvi slik ozadja. Med pomanjkljivostmi metode je mogoče opozoriti na vključitev dodatnega bloka, ki zaplete strukturo kode, zlasti če se metoda pogosto uporablja. Toda to se lahko šteje za malenkost v primerjavi s koristmi.

Opis

Nastavi širino elementov na ravni bloka ali zamenljivih elementov (na primer oznake ). Širina ne vključuje debeline robov okoli elementa, oblazinjenja ali vrednosti robov.

Brskalniki ne obravnavajo širin na enak način; rezultat prikaza je odvisen od uporabljenega brskalnika.. V tabeli 1 so podani možne možnosti in posledično širino.

Tabela 1. Dejanje širine v brskalnikih

	internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Ni določeno (način združljivosti)	Če vsebina presega podano širino, se blok spremeni v velikost, da se prilega vsebini. V nasprotnem primeru je širina bloka enaka vrednosti širine.	V vseh primerih brskalnik deluje v skladu s specifikacijo CSS. Namreč, širino bloka dobimo tako, da seštejemo vrednosti width, padding, margin in border. Če se vsebina bloka ne prilega podanim dimenzijam, se prikaže na vrhu bloka.	Širina je enaka vrednosti širine.
Prehodni HTML
Strogi HTML	Širina se oblikuje z dodajanjem vrednosti širine, oblazinjenja, roba in obrobe. Če se vsebina bloka ne prilega podanim dimenzijam, se prikaže na vrhu.		Širina je enaka vrednosti širine plus oblazinjenje, rob in obroba. Če se vsebina bloka ne prilega podanim dimenzijam, se prikaže na vrhu.
HTML 5
XHTML

Sintaksa

širina: vrednost | obresti | avto | dedovati

Vrednote

Vse enote dolžine, sprejete v CSS, so sprejete kot vrednosti - na primer slikovne pike (px), palci (in), točke (pt) itd. Pri uporabi odstotnega zapisa se širina elementa izračuna glede na širino nadrejeni element. Če nadrejeni element ni izrecno naveden, potem okno brskalnika deluje kot to.

Samodejno Nastavi širino glede na vrsto in vsebino elementa. inherit Podeduje vrednost nadrejenega.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat tega primera, kot je prikazan v brskalniku Safari, je prikazan na sliki. 1.

riž. 1. Širina bloka

Objektni model

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

Brskalniki

Internet Explorer 6 nepravilno definira širino kot najmanjšo širino. V načinu quirk različice Internet Explorerja do vključno 8.0 nepravilno izračunajo širino elementa, ne da bi mu dodale vrednosti oblazinjenja, robov ali robov.

Različice Internet Explorerja do vključno 7.0 ne podpirajo podedovane vrednosti.

Verjetno vam ni treba nikomur povedati o prednostih postavitve div pred tabelarično postavitvijo. Vsi so to že dolgo razumeli in prešli nanje s tabel. No, tisti, ki niso preklopili, bodo kmalu razumeli svoje napake in to storili. Ampak kot v kakršna koli lekcija - tukaj so tudi pasti: dive se ne obnašajo, kot bi se morale, ali pa je nemogoče postaviti kakšno posebno strukturo, ovir je veliko, vendar je vedno samo en načrtovalec ...

Ta objava je namenjena bolj začetnikom, morda pa bodo tudi profesionalci tukaj našli kaj zanimivega. Pa se lotimo posla!

To si velja vedno zapomniti

Obstaja en pristop k postavitvi, ki ga je treba čim bolj pogosto in natančno upoštevati. To je mineralizacija drevesa DOM. To ima več dobro utemeljenih prednosti: poenostavi sam proces postavitve, zmanjša število morebitnih napak na minimum in izboljša preglednost kode. Tega se moramo vedno zavedati in temu posvetiti posebno pozornost pri načrtovanju strukture.

Osnovna načela so naslednja: za zamik uporabljamo le padding in margin (odvisno od potrebe) - sploh ni treba narediti ločenega 20 pixel diva, gnezdenje omejimo na minimum, ne pretiravamo s položajem : relativni in kasnejši blokovni odmiki (če se nepravilno uporablja, lahko povzroči polurno urejanje celotne kode), aktivno uporabljamo z-index, da dosežemo želeni učinek.

pogosta vprašanja

- Kako postaviti dive enega za drugim? In za to uporabimo lastnost - float: levo (ali desno, odvisno od potrebe), tako da naslednji div za takimi nadomestnimi stoji pod njimi, nastavimo lastnost clear (na primer clear: left).

- Kako centrirati div? Ena rešitev izgleda na naslednji način- nastavite margin-left in margin-right kot samodejno (ali še preprosteje - margin:0 auto;)

- Kako postaviti elemente v div navpično? Odvisno je od elementa, na primer za besedilo je dovolj, da samo določite vertical-align:middle, za sliko pa morate določiti line-height:Npx.

- Zamik z uporabo roba ali odmika? V bistvu rob služi za zamik med bloki; gre za zamik "navzven", saj je oblazinjenje zamik "navznoter" in se najpogosteje uporablja za organizacijo zamika okoli besedila, na primer. Zdi se kot preprosta stvar, a včasih lahko naletite na takšne bisere, kot je požarni hrošč, da si nisem mogel kaj, da ga ne bi omenil tukaj.

- Premik bloka z uporabo margine ali position:relative v povezavi z vodoravnimi in navpičnimi odmiki? Seveda morate v teh primerih uporabiti maržo. Res je, kot drugje, je vse odvisno od konkretnega primera, vendar na splošno vseeno uporabite maržo.

- Kako raztegniti div, da bo ustrezal vsebini bloka?Če želite to narediti, morate določiti višino: auto;

Kako raztegniti div do višine njegovega nadrejenega elementa, ki se nato raztegne do višine vsebine diva, ki se nahaja znotraj njega, poleg prvega diva? Nastavite div vsebine na višino: samodejno, druga dva diva na višino: 100 % in prikaz: tabela;

- Kako narediti div neviden? Z manipulacijo lastnosti prikaza. Za nevidnost nastavite na nič.

- Kako omogočiti drsenje vsebine v divu s statično višino? V lastnostih nastavimo overflow:scroll.

- Kako prikazati (na primer) oznako "a" kot div (blok)? V lastnostih nastavite višino in širino ter nastavite display:block;

To je vse, kar morate vedeti, da neboleče tipkate dive. Pravzaprav. No, če se pojavi še kakšno vprašanje, se bodo odgovori takoj pojavili tukaj! Na splošno pa se ni treba bati - pol ure treninga in že Ste že profesionalec. Zato odložite te zastarele tabele – in pojdite na novo stopnjo evolucije!

Oznake: pogosta vprašanja, div, postavitev, vadnica

Pri postavitvi naslednjega projekta (ali samo oblikovanju mreže postavitve) so se mnogi soočili z dilemo - uporabiti fiksno širino postavitve ali "gumijasto" mrežo, ki se prilagaja velikosti okna brskalnika.

Vsaka od teh rešitev ima svoje prednosti in slabosti, jaz pa se želim osredotočiti na minuse, saj je običajno ravno pri odražanju minusov teh odločitev treba izbirati med dvema zli.

Fiksna širina mreže postavitve

Postavitev je prisiljena v vodoravno dimenzijo 960–980 slikovnih pik (tako da je vse vključeno na večini naprav v večini ločljivosti), kar z velikimi vodoravnimi velikostmi oken izgleda nekako hladno – tanek navpični trak uporabne vsebine strani in ogromna neuporabna polja neizkoriščen prostor ob straneh.

“Gumirana” postavitev mreže po širini okna

Spet pri velikih vodoravnih velikostih oken obstaja še ena težava: vrstice besedila postanejo zelo dolge in njihovo branje sploh ne postane tako udobno, kot bi si želeli.
Druga pogosta težava pri tej rešitvi je, da stranski robovi pri velikih vodoravnih velikostih oken niso več vizualno skladni z vodoravnimi dimenzijami elementov, kar prav tako ne prispeva k udobju pri pogledu na postavitev.

Rad bi predlagal preprosto rešitev - omejite najmanjšo vodoravno velikost na fiksno vrednost v slikovnih pikah in nastavite največjo relativno kot odstotek širine okna. To je zelo trivialna rešitev s preprostimi sredstviŠe 2 različici specifikacije CSS.

Nadgradnja: Rad bi rekel, da ne govorimo o klasičnem gumijastem učinku in prilagajanju absolutno vsem ločljivostim, temveč le o določenem razumnem obsegu ločljivosti, za katerega je postavitev zasnovana. V spodnjih primerih je to klasični razpon ločljivosti namizja z velikostjo vodoravne ločljivosti 1024 slikovnih pik.

Naj še enkrat poudarim: Objava ne govori o rešitvi za vse vrste naprav in vse razpone ločljivosti. Tega problema načeloma ni mogoče rešiti v okviru ene postavitve., da bi jo tako ali drugače rešili, bo potrebnih več postavitev. Muhe posebej, kotleti posebej.

Ustvarite vsebnik postavitve:
...
Okrasimo ga s preprosto stilsko kodo:
div.page-container ( najmanjša širina: 960 slikovnih pik; največja širina: 75 %; rob: 0 samodejno; oblazinjenje: 0; )
Vendar pa se lahko komu ta rešitev zdi nezadostna, ker se pri zelo velikih vodoravnih velikostih oken spet pojavijo težave z dolžinami črt. To je mogoče rešiti z enako preprosto dodatno tehniko: ustvarjanje dodatnega zunanjega vsebnika znotraj že opisanega in omejitev njegove največje širine na fiksno vrednost (subjektivno se mi zdi, da so vrednosti v območju 1400-1600 slikovnih pik najbolj primeren). Spet uporabljamo samo orodja CSS 2.0. Ta rešitev bo namesto preprostega dodajanja širine v odstotkih za prvotni vsebnik, kot je predlagano v prvem komentarju, delovala tudi v IE, ki do različice 9 ne razume hkratnega prikazovanja vrednosti.

Dodajanje HTML:
...

In malo spremenite 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 samodejno; oblazinjenje: 0; )
Kot lahko vidite, je rešitev izjemno preprosta in precej univerzalna, lahko jo uporabite za vse blokovne elemente.