Prema zadanim postavkama blok elementi koriste automatsku širinu. To znači da će element biti razvučen horizontalno točno onoliko koliko jest slobodan prostor. Zadana visina blok elemenata postavlja se automatski, tj. Preglednik okomito rasteže područje sadržaja tako da je sav sadržaj prikazan. Za postavljanje prilagođenih dimenzija za područje sadržaja elementa, možete koristiti svojstva širine i visine.

CSS svojstvo širine omogućuje postavljanje širine područja sadržaja elementa, a svojstvo visine omogućuje postavljanje visine područja sadržaja:

Imajte na umu da svojstva širine i visine određuju samo veličinu područja sadržaja; da biste izračunali ukupnu širinu elementa bloka, trebate dodati širinu područja sadržaja, lijevo i desno ispunjavanje te širinu lijevog i desna granica. Isto vrijedi i za ukupnu visinu elementa, samo se sve vrijednosti izračunavaju okomito:

Za ovaj paragraf postavit ćemo samo širinu i visinu.

Ovaj odlomak sadrži, osim širine i visine, unutarnju podlogu, obrub i vanjsku podlogu.

Pokušajte »

Primjer jasno pokazuje da drugi element zauzima više prostora od prvog. Ako izračunamo pomoću naše formule, tada su dimenzije prvog odlomka 150x100 piksela, a dimenzije drugog odlomka su:

Ukupna visina:	5 px	+	10 px	+	100 px	+	10 px	+	5 px	= 130 px
	Gornji okvir		Gornji uvlačenje		visina		niži uvlačenje		niži okvir

odnosno 180x130 piksela.

Preljev elementa

Nakon što ste odredili širinu i visinu elementa, trebali biste obratiti pozornost na jednu važnu točku - sadržaj unutar elementa može premašiti navedenu veličinu bloka. U tom će slučaju dio sadržaja izaći izvan granica elementa. Da biste izbjegli ovaj neugodan trenutak, možete upotrijebiti svojstvo prelijevanja CSS-a. Svojstvo overflow govori pregledniku što treba učiniti ako sadržaj bloka premaši njegovu veličinu. Ovo svojstvo može imati jednu od četiri vrijednosti:

• vidljivo - zadana vrijednost koju koristi preglednik. Postavljanje ove vrijednosti imat će isti učinak kao nepostavljanje svojstva overflow.
• pomicanje - elementu dodaje okomite i vodoravne trake za pomicanje.
• auto - dodaje trake za pomicanje ako je potrebno.
• skriveno - skriva dio sadržaja koji se proteže izvan granica elementa bloka.

Vlad Merzhevich

Bilo koji blok element sastoji se od skupa svojstava, poput listova kupusa postavljenih jedno na drugo. Osnova bloka je njegov sadržaj (to može biti tekst, slika itd.), čija je širina određena svojstvom width, a visina visinom; postoje ispune oko sadržaja, stvaraju prazan prostor od sadržaja do unutarnjeg ruba obruba; zatim dolaze sami obrubi (border) i blok se upotpunjuje marginama (margin), nevidljivim praznim prostorom od vanjskog ruba obruba. Širina bloka je složena vrijednost i sastoji se od nekoliko vrijednosti svojstava:

• širina - širina sadržaja, tj. sadržaj bloka;
• padding-left i padding-right - margina lijevo i desno od sadržaja;
• border-left i border-right - debljina ruba lijevo i desno;
• margin-left i margin-right - lijeva i desna margina.

Neka svojstva mogu nedostajati, u kojem slučaju to ne utječe na širinu. Ukupna širina prikazana je na sl. 1 kao crna isprekidana linija.

Riža. 1. Širina bloka

Ako širina nije navedena, zadana je vrijednost auto. U tom će slučaju širina bloka zauzeti cijelu dostupnu širinu uz zadržavanje vrijednosti margina, obruba i ispune. U ovom slučaju dostupna širina označava širinu sadržaja nadređenog bloka, a ako roditelja nema, onda širinu sadržaja preglednika.

Recimo da je sljedeći stil napisan za sloj.

Širina: 300 px; /* Širina sloja */ margina: 7px; /* Vrijednost ispune */ obrub: 4px puna crna; /* Opcije obruba */ padding: 10px; /* Margine oko teksta */

Širina sloja prema ovom unosu bit će jednaka 342 piksela, ova vrijednost se dobiva dodavanjem vrijednosti širine sadržaja plus lijevog ispuna, lijevog obruba i lijeve margine, plus desne margine, desnog obruba i desnog ispuna. Zbrojimo sve brojke.

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

Treba napomenuti da blok model s formiranjem širine nosi sa sobom puno neugodnosti. Stalno morate raditi izračune kada trebate postaviti određenu širinu bloka. Problemi počinju i kod kombiniranja različite jedinice mjerenja, posebno postotke i piksele. Pretpostavimo da je širina sadržaja postavljena na 90%, ako dodamo margine i obrube navedene u pikselima, tada je nemoguće izračunati ukupnu širinu bloka, budući da se postoci ne prevode izravno u piksele. To može dovesti do toga da ukupna širina bloka premaši širinu web stranice, što rezultira vodoravnom trakom za pomicanje. Postoje dva izlaza iz ove situacije - promijeniti algoritam blok modela i koristiti ugniježđene slojeve.

Algoritam blok modela

Kao što je spomenuto, širina bloka se formira od širine sadržaja i vrijednosti margina, obruba i ispune. U pregledniku Internet Explorer Algoritam se automatski mijenja i širina cijelog bloka se postavlja jednako širini. Drugi preglednici ne mijenjaju algoritam tako lako, a osim toga, znate da je način kompatibilnosti zao. CSS3 ima prekrasno svojstvo veličine okvira koje će nam dobro doći. Kada se postavi na border-box, širina počinje uključivati ​​margine i obrube, ali ne i ispunu. Stoga, povezivanjem veličine okvira s vrijednošću graničnog okvira s našim stilom, možemo postaviti širinu kao postotak i sigurno odrediti obrub i ispunu bez straha da će se širina bloka promijeniti. Nažalost, postoji mali problem s ovim svojstvom, kao što je obično slučaj s preglednicima - ne razumiju ga svi preglednici. Drago mi je da preglednici barem podržavaju svojstva specifična za preglednik. U tablici 1 prikazuje podršku preglednika.

Stol 1. Podrška preglednika za svojstvo box-sizing

preglednik	Internet Explorer	Krom	Opera	Safari	Firefox
Verzija	8.0+	2.0+	7.0+	3.0+	1.0+
Vlasništvo	dimenzioniranje kutije	-webkit-box-sizing	dimenzioniranje kutije	-webkit-box-sizing	-moz-box-dimenzioniranje

Kao što vidite iz tablice, u svojstvima postoji zbrka i kolebanje, pa ćete morati napraviti hibrid i navesti sva tri svojstva (primjer 1).

Primjer 1: Širina bloka

HTML5 CSS3 IE Cr Op Sa Fx

Ovaj će primjer raditi u svim preglednicima navedenim u tablici. 1, međutim nije važeća u CSS3 zbog upotrebe nestandardnih svojstava koja počinju s -moz i -webkit. Širina bloka je 100% uključujući vrijednosti ispune. Bez svojstva box-sizing, u pregledniku će se pojaviti vodoravna traka za pomicanje.

Ugniježđeni slojevi

Korištenje svojstva box-sizing je dobro za sve, osim što ne radi u starijim verzijama IE-a. Ako dizajnirate web stranicu temeljenu na IE7 i IE6, stara provjerena metoda ugniježđivanja slojeva je prikladna za vas. Ideja je jednostavna - za vanjski blok element postavlja se samo potrebna širina, a za ugniježđeni blok postavlja se sve ostalo - margine, obrubi i padding. Budući da je zadana širina bloka jednaka dostupnoj širini njegovog roditelja, blokovi će se na neki način preklapati, ali će stvarna širina kombiniranog elementa biti jasno definirana. Primjer 2 prikazuje korištenje ugniježđenih slojeva.

Primjer 2: Ugniježđeni slojevi

HTML5 CSS 2.1 IE Cr Op Sa Fx

Proizlaziti ovaj primjer prikazano na sl. 2.

Riža. 2. Širina bloka u postocima

Prednost ugniježđenih slojeva je korištenje uvlaka (određivanje veličine okvira ih ne uzima u obzir), svestranost metode i činjenica da se po želji može dodati pozadina jednom ili drugom sloju. Ovo se donekle mijenja izgled elemenata, to je osobito istinito kada uključujete pozadinske slike. Među nedostacima metode može se primijetiti uključivanje dodatnog bloka, što komplicira strukturu koda, osobito ako se metoda često koristi. Ali to se može smatrati sitnicom u usporedbi s prednostima.

Opis

Postavlja širinu elemenata na razini bloka ili zamjenjivih elemenata (na primjer, oznaka ). Širina ne uključuje debljinu obruba oko elementa, ispune ili vrijednosti margina.

Preglednici ne obrađuju širine na isti način; rezultat prikaza ovisi o korištenom pregledniku.. U tablici 1 su dani moguće opcije a rezultirajuća širina.

Stol 1. Radnja širine u preglednicima

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Nije navedeno (način kompatibilnosti)	Ako sadržaj premašuje navedenu širinu, blok se mijenja u veličinu kako bi odgovarao sadržaju. Inače, širina bloka jednaka je vrijednosti širine.	U svim slučajevima preglednik radi prema CSS specifikaciji. Naime, širina bloka se dobiva zbrajanjem vrijednosti width, padding, margin i border. Sadržaj bloka, ako ne stane u navedene dimenzije, prikazuje se na vrhu bloka.	Širina je jednaka vrijednosti širine.
Prijelazni HTML
Strogi HTML	Širina se formira dodavanjem vrijednosti širine, paddinga, margine i bordera. Ako sadržaj bloka ne stane u navedene dimenzije, prikazuje se na vrhu.		Širina je jednaka vrijednosti širine plus ispuna, margina i obrub. Ako sadržaj bloka ne stane u navedene dimenzije, prikazuje se na vrhu.
HTML 5
XHTML

Sintaksa

širina: vrijednost | kamata | auto | naslijediti

Vrijednosti

Sve jedinice duljine prihvaćene u CSS-u prihvaćaju se kao vrijednosti - na primjer, pikseli (px), inči (in), bodovi (pt) itd. Kada se koristi postotak, širina elementa izračunava se ovisno o širini roditeljski element. Ako roditelj nije eksplicitno naveden, tada se prozor preglednika ponaša kao njega.

Auto Postavlja širinu na temelju vrste i sadržaja elementa. inherit Nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera, kako se pojavljuje u pregledniku Safari, prikazan je na sl. 1.

Riža. 1. Širina bloka

Objektni model

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

Preglednici

Internet Explorer 6 netočno definira širinu kao minimalnu širinu. U neobičnom načinu rada, verzije Internet Explorera do i uključujući 8.0 netočno izračunavaju širinu elementa bez dodavanja vrijednosti ispune, margine ili obruba.

Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

Vjerojatno ne morate nikome govoriti o prednostima div izgleda u odnosu na tablični izgled. Svi su to odavno shvatili i prešli na njih s tablica. Pa, oni koji nisu prešli uskoro će shvatiti svoje pogreške i učiniti to. Ali kao u svaka lekcija - ovdje postoje i zamke: dive se ne ponašaju kako bi trebale, ili je nemoguće postaviti bilo koju specifičnu strukturu, postoje mnoge prepreke, ali uvijek postoji samo jedan dizajner izgleda...

Ovaj post je više namijenjen početnicima, ali možda i profesionalci ovdje pronađu nešto zanimljivo. Pa krenimo na posao!

Ovo uvijek vrijedi zapamtiti

Postoji jedan pristup rasporedu koji treba slijediti što je moguće češće i točnije. Ovo je mineralizacija DOM stabla. To ima nekoliko dobro utemeljenih prednosti: pojednostavljuje sam proces izgleda, smanjuje broj potencijalnih pogrešaka na minimum i poboljšava transparentnost koda. Toga se uvijek moramo sjetiti i obratiti posebnu pozornost na to pri planiranju građevine.

Osnovni principi su sljedeći: za uvlačenje koristimo samo padding i marginu (ovisno o potrebi) - uopće nije potrebno napraviti zaseban div od 20 piksela, ugniježđivanje ograničavamo na minimum, ne pretjerujemo s položajem : relativni i naknadni pomaci blokova (ako se neispravno koristi može dovesti do pola sata uređivanja cijelog koda), aktivno koristimo z-index kako bismo postigli željeni učinak.

Pitanja

- Kako postaviti divove jedan za drugim? A za to koristimo svojstvo - float: lijevo (ili desno, ovisno o potrebi), tako da sljedeći div nakon takvih alternativnih stoji ispod njih, postavljamo mu svojstvo clear (npr. jasno: lijevo).

- Kako centrirati div? Jedno rješenje izgleda na sljedeći način- postavite margin-left i margin-right kao auto (ili još jednostavnije - margin:0 auto;)

- Kako okomito postaviti elemente u div? Ovisi o elementu, na primjer, za tekst je dovoljno samo navesti vertical-align:middle, ali za sliku morate navesti line-height:Npx.

- Uvući pomoću margine ili ispune? U osnovi, margina služi za uvlačenje između blokova; to je uvlačenje "prema van", jer je padding uvlačenje "unutra" i najčešće se koristi za organiziranje uvlačenja oko teksta, na primjer. Čini se kao jednostavna stvar, ali ponekad možete naići na dragulje poput vatrene stjenice koju nisam mogao ne spomenuti ovdje.

- Pomaknuti blok pomoću margine ili position:relative u kombinaciji s vodoravnim i okomitim pomacima? Naravno, u tim slučajevima morate koristiti marginu. Istina, kao i drugdje, sve ovisi o konkretnom slučaju, ali općenito biste ipak trebali koristiti marginu.

- Kako rastegnuti div da stane u sadržaj bloka? Da biste to učinili, morate odrediti visinu: auto;

Kako rastegnuti div do visine njegovog roditelja, koji se pak proteže do visine sadržaja diva koji se nalazi unutar njega, pored prvog diva? Postavite div sadržaja na visinu: auto, druga dva diva na visinu: 100% i prikaz: tablica;

- Kako div učiniti nevidljivim? Manipuliranjem svojstva prikaza. Za nevidljivost, postavite je na ništa.

- Kako učiniti da se sadržaj pomiče u divu sa statičkom visinom? Postavili smo overflow:scroll u svojstvima.

- Kako prikazati (na primjer) oznaku "a" kao div (blok)? U svojstvima postavite visinu i širinu te postavite display:block;

To je sve što trebate znati da bezbolno upisujete divove. Zapravo. Pa, ako se pojave još neka pitanja, odgovori će se odmah pojaviti ovdje! Ali općenito, nemate se čega bojati - pola sata treninga i vi Već ste profesionalac, stoga ostavite ove zastarjele tablice - i prijeđite na novu fazu evolucije!

Oznake: često postavljana pitanja, div, izgled, poduka

Prilikom postavljanja sljedećeg projekta (ili samo dizajniranja rešetke izgleda), mnogi su bili suočeni s dilemom - koristiti fiksnu širinu izgleda ili "gumenu" rešetku koja se prilagođava veličini prozora preglednika.

Svako od ovih rješenja ima svoje prednosti i nedostatke; želim se usredotočiti na nedostatke, jer obično se upravo u odražavanju nedostataka ovih odluka mora birati između dva zla.

Fiksna širina rešetke izgleda

Raspored je prisiljen na horizontalnu dimenziju od 960-980 piksela (tako da je sve uključeno na većini uređaja u većini rezolucija), što s velikim horizontalnim veličinama prozora izgleda nekako hladno - tanka okomita traka korisnog sadržaja stranice i golema beskorisna polja neiskorišteni prostor sa strane.

“Gumena” rešetka rasporeda po širini prozora

Opet, s velikim vodoravnim veličinama prozora, postoji još jedan problem: redovi teksta postaju jako dugi, a njihovo čitanje uopće nije ugodno koliko bismo željeli.
Još jedan uobičajeni problem s ovim rješenjem je da bočne margine s velikim vodoravnim veličinama prozora više nisu vizualno u skladu s vodoravnim dimenzijama elemenata, što također ne doprinosi udobnosti pri gledanju izgleda.

Želio bih predložiti jednostavno rješenje - ograničiti minimalnu vodoravnu veličinu na fiksnu vrijednost u pikselima, a najveću relativnu postaviti kao postotak širine prozora. Ovo je vrlo trivijalno rješenje jednostavnim sredstvima Još 2 verzije CSS specifikacije.

Ažuriraj: Napominjem da ne govorimo o klasičnom efektu gume i prilagodbi apsolutno svim rezolucijama, već samo o određenom razumnom rasponu rezolucija za koje je izgled dizajniran. U primjerima ispod, ovo je klasični raspon razlučivosti radne površine s veličinom vodoravne razlučivosti od 1024 piksela.

Još jednom da naglasim: Post ne govori o rješenju za sve vrste uređaja i sve raspone razlučivosti. Ovaj problem se u načelu ne može riješiti u okviru jednog izgleda., za rješavanje na ovaj ili onaj način bit će potrebno nekoliko izgleda. Mušice posebno, kotleti posebno.

Napravite spremnik izgleda:
...
Ukrašavamo ga jednostavnim kodom stila:
div.page-container ( min-width: 960px; max-width: 75%; margina: 0 auto; padding: 0; )
Međutim, nekome se ovo rješenje može činiti nedostatnim zbog činjenice da se kod vrlo velikih vodoravnih veličina prozora opet pojavljuju problemi s duljinama linija. To se može riješiti jednako jednostavnom dodatnom tehnikom: stvaranjem dodatnog vanjskog spremnika unutar već opisanog i ograničavanjem njegove maksimalne širine na fiksnu vrijednost (subjektivno, čini mi se da su vrijednosti u rasponu od 1400-1600 piksela najbolje odgovara). Opet samo koristimo CSS alati 2.0. Ovo rješenje, umjesto jednostavnog dodavanja širine kao postotka za izvorni spremnik kao što je predloženo u prvom komentaru, također će raditi u IE-u, koji do verzije 9 ne razumije istovremenu indikaciju vrijednosti.

Dodavanje HTML-a:
...

I promijenite malo 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; margina : 0 automatski; ispuna: 0; )
Kao što možete vidjeti, rješenje je vrlo jednostavno i prilično univerzalno, može se koristiti za sve elemente bloka.