Po defaultu, blok elementi koriste automatsku širinu. To znači da će element biti horizontalno rastegnut tačno onoliko koliko jeste slobodan prostor. Zadana visina blok elemenata se postavlja automatski, tj. Pretraživač proteže područje sadržaja okomito tako da se sav sadržaj prikaže. Da biste postavili prilagođene dimenzije za područje sadržaja elementa, možete koristiti svojstva širine i visine.

Svojstvo širine CSS-a vam omogućava da postavite širinu područja sadržaja elementa, a svojstvo visina vam omogućava da postavite visinu 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, morate dodati širinu područja sadržaja, lijevi i desni padding, te širinu lijevog i desna granica. Isto vrijedi i za ukupnu visinu elementa, samo se sve vrijednosti izračunavaju okomito:

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

Ovaj paragraf sadrži, pored širine i visine, unutrašnji padding, ivicu i spoljašnji padding.

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 pasusa 150x100 piksela, a dimenzije drugog pasusa su:

Ukupna visina:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	top okvir		gornji udubljenje		visina		niže udubljenje		niže okvir

odnosno 180x130 piksela.

Element Overflow

Nakon što ste odredili širinu i visinu elementa, obratite pažnju na jednu važnu točku - sadržaj unutar elementa može premašiti navedenu veličinu bloka. U ovom slučaju, dio sadržaja će izaći izvan granica elementa.Da biste izbjegli ovaj neugodan trenutak, možete koristiti svojstvo CSS overflow. Svojstvo overflow govori pretraživaču šta da radi ako sadržaj bloka premašuje njegovu veličinu. Ovo svojstvo može imati jednu od četiri vrijednosti:

• vidljivo - zadana vrijednost koju koristi pretraživač. Postavljanje ove vrijednosti imat će isti učinak kao i nepostavljanje svojstva prelijevanja.
• pomicanje - dodaje vertikalne i horizontalne trake za pomicanje elementu.
• auto - dodaje trake za pomicanje ako je potrebno.
• skriveno - sakriva 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 koji se naslanjaju 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 visina; postoje padding oko sadržaja, oni stvaraju prazan prostor od sadržaja do unutrašnje ivice ivica; zatim dolaze same ivice (border) i blok se završava marginama (margina), nevidljivim praznim prostorom sa vanjske ivice ivica. Širina bloka je kompleksna 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 ivice lijevo i desno;
• margin-left i margin-right - lijeva i desna margina.

Neka svojstva mogu nedostajati, a u tom slučaju ne utiče na širinu. Ukupna širina je prikazana na Sl. 1 kao crna tačkasta linija.

Rice. 1. Širina bloka

Ako širina nije navedena, podrazumevano je automatski. U ovom slučaju, širina bloka će zauzeti cijelu dostupnu širinu uz zadržavanje vrijednosti margina, ivica i paddinga. U ovom slučaju, dostupna širina znači širinu sadržaja roditeljskog bloka, a ako nema roditelja, onda širinu sadržaja pretraživača.

Recimo da je sljedeći stil napisan za sloj.

Širina: 300px; /* Širina sloja */ margina: 7px; /* Vrijednost dopune */ granica: 4px puna crna; /* Opcije ivice */ padding: 10px; /* Margine oko teksta */

Širina sloja prema ovom unosu će biti jednaka 342 piksela, ova vrijednost se dobija dodavanjem vrijednosti širine sadržaja plus lijeva ivica, lijeva ivica i lijeva margina, plus desna margina, desna ivica i desni padding. Hajde da saberemo sve brojeve.

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

Treba napomenuti da blok model sa formiranjem širine nosi sa sobom mnogo neugodnosti. Konstantno morate raditi proračune kada trebate postaviti određenu širinu bloka. Problemi počinju i pri kombinovanju različite jedinice mjerenja, posebno postotaka i piksela. Pretpostavimo da je širina sadržaja postavljena na 90%, ako dodamo margine i ivice navedene u pikselima, onda je nemoguće izračunati ukupnu širinu bloka, jer se procenti ne prevode direktno u piksele. To može dovesti do toga da ukupna širina bloka premašuje širinu web stranice, što rezultira horizontalnom trakom za pomicanje. Postoje dva izlaza iz ove situacije - promijeniti algoritam blok modela i koristiti ugniježđene slojeve.

Algoritam modela blokova

Kao što je spomenuto, širina bloka se formira od širine sadržaja i vrijednosti margina, rubova i paddinga. U pretraživaču Internet Explorer Algoritam se automatski mijenja i širina cijelog bloka je jednaka širini. Drugi pretraživači ne mijenjaju algoritam tako lako, a osim toga, znate da je način kompatibilnosti zao. CSS3 ima divno svojstvo veličine kutije koje će nam dobro doći. Kada se postavi na okvir za okvir, širina počinje da uključuje margine i ivice, ali ne i padding. Dakle, povezivanjem veličine okvira sa vrijednošću okvira okvira sa našim stilom, možemo postaviti širinu kao postotak i sigurno odrediti ivicu i padding bez straha da će se širina bloka promijeniti. Nažalost, postoji mali problem sa ovim svojstvom, kao što je obično slučaj sa pretraživačima - ne razumiju ga svi pretraživači. Drago mi je da pretraživači barem podržavaju svojstva specifična za pretraživač. U tabeli 1 prikazuje podršku pretraživača.

Table 1. Podrška pretraživača za svojstvo veličine kutije

Pretraživač	Internet Explorer	Chrome	Opera	Safari	Firefox
Verzija	8.0+	2.0+	7.0+	3.0+	1.0+
Nekretnina	box-size	-webkit-box-sizing	box-size	-webkit-box-sizing	-moz-box-sizing

Kao što možete vidjeti iz tabele, postoji zbrka i kolebanja u svojstvima, tako da ćete morati napraviti hibrid i naznačiti sva tri svojstva (primjer 1).

Primjer 1: Širina bloka

HTML5 CSS3 IE Cr Op Sa Fx

Ovaj primjer će raditi u svim pretraživačima navedenim u tabeli. 1, međutim, nije važeća u CSS3 zbog upotrebe nestandardnih svojstava koja počinju sa -moz i -webkit. Širina bloka je 100% uključujući vrijednosti dopuna. Bez svojstva box-sizing, horizontalna traka za pomicanje će se pojaviti u pretraživaču.

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 zasnovanu na IE7 i IE6, stara dokazana metoda ugnježđivanja slojeva je prikladna za vas. Ideja je jednostavna - za element vanjskog bloka postavlja se samo potrebna širina, a za ugniježđeni blok sve ostalo - margine, ivice 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 pokazuje korištenje ugniježđenih slojeva.

Primjer 2: Ugniježđeni slojevi

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rezultat ovaj primjer prikazano na sl. 2.

Rice. 2. Širina bloka u procentima

Prednost ugniježđenih slojeva je upotreba uvlačenja (veličina kutije ih ne uzima u obzir), svestranost metode i činjenica da se pozadina može dodati jednom ili drugom sloju po želji. Ovo se donekle menja izgled elemenata, ovo je posebno istinito kada uključujete pozadinske slike. Među nedostacima metode može se primijetiti uključivanje dodatnog bloka, što komplicira strukturu koda, posebno ako se metoda često koristi. Ali ovo se može smatrati malom stvari u poređenju sa prednostima.

Opis

Postavlja širinu elemenata na nivou bloka ili zamjenjivih elemenata (na primjer, tag ). Širina ne uključuje debljinu ivica oko elementa, padding ili marginalne vrijednosti.

Pretraživači ne rukuju širinama na isti način; rezultat prikaza zavisi od pretraživača koji se koristi.. U tabeli 1 je dato moguće opcije i rezultirajuća širina.

Table 1. Radnja širine u pretraživačima

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Nije navedeno (način kompatibilnosti)	Ako sadržaj premašuje navedenu širinu, blok mijenja veličinu kako bi odgovarao sadržaju. Inače, širina bloka je jednaka vrijednosti širine.	U svim slučajevima, pretraživač radi u skladu sa CSS specifikacijom. Naime, širina bloka se dobija dodavanjem vrijednosti širina, padding, margina i granica. Sadržaj bloka, ako se ne uklapa u navedene dimenzije, prikazuje se na vrhu bloka.	Širina je jednaka vrijednosti širine.
Prijelazni HTML
Strogi HTML	Širina se formira dodavanjem vrijednosti width, padding, margin i border. Ako se sadržaj bloka ne uklapa u navedene dimenzije, on se prikazuje na vrhu.		Širina je jednaka vrijednosti širine plus padding, margina i granica. Ako se sadržaj bloka ne uklapa u navedene dimenzije, on se prikazuje na vrhu.
HTML 5
XHTML

Sintaksa

širina: vrijednost | interes | auto | nasljediti

Vrijednosti

Sve jedinice dužine prihvaćene u CSS-u prihvataju se kao vrijednosti - na primjer, pikseli (px), inči (in), tačke (pt) itd. Kada se koristi procentualna notacija, širina elementa se izračunava ovisno o širini roditeljski element. Ako roditelj nije eksplicitno specificiran, prozor pretraživača djeluje kao on.

Automatski Postavlja širinu na osnovu tipa i sadržaja elementa. inherit Nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera, kako se pojavljuje u Safari pretraživaču, prikazan je na Sl. 1.

Rice. 1. Širina bloka

Objektni model

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

Pregledači

Internet Explorer 6 pogrešno definiše širinu kao min-width. U quirk modu, verzije Internet Explorera do i uključujući 8.0 pogrešno izračunavaju širinu elementa bez dodavanja vrijednosti odstupanja, margine ili ivice.

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

Vjerovatno ne treba nikome pricati o prednostima div rasporeda u odnosu na tabelarni.To su svi odavno shvatili i prešli na njih sa tabela.Pa oni koji nisu prešli uskoro će shvatiti svoje greške i to učiniti.Ali kao u bilo koja lekcija - ovdje postoje i zamke: dive se ne ponašaju kako bi trebalo, ili je nemoguće postaviti bilo koju konkretnu strukturu, ima mnogo prepreka, ali uvijek postoji samo jedan dizajner izgleda...

Ovaj post je više namijenjen početnicima, ali možda će i profesionalci ovdje pronaći nešto zanimljivo. Dakle, pređimo na posao!

Ovo je uvijek vrijedno pamćenja

Postoji jedan pristup rasporedu koji treba slijediti što je moguće češće i preciznije. Ovo je mineralizacija DOM drveta. Ovo ima nekoliko dobro utemeljenih prednosti: pojednostavljuje sam proces izgleda, smanjuje broj potencijalnih grešaka na minimum i poboljšava transparentnost koda. Toga moramo uvijek zapamtiti i obratiti posebnu pažnju na to prilikom planiranja strukture.

Osnovni principi su sljedeći: za uvlačenje koristimo samo padding i marginu (ovisno o potrebi) - uopće nije potrebno napraviti poseban div od 20 piksela, ugniježđenje ograničavamo na minimum, ne pretjerujemo sa pozicijom : relativni i naknadni pomaci bloka (ako se koristi pogrešno može dovesti do pola sata uređivanja cijelog koda), aktivno koristimo z-indeks kako bismo postigli željeni efekat.

FAQ

- Kako postaviti divove jedan za drugim? I 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 (na primjer clear: lijevo).

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

- Kako postaviti elemente u div vertikalno? Zavisi od elementa, na primjer, za tekst, dovoljno je samo navesti vertical-align:middle, ali za sliku morate navesti line-height:Npx.

- Uvuci koristeći marginu ili padding? U osnovi, margina služi za uvlačenje između blokova; to je uvlačenje „napolje“, pošto je padding „unutrašnje“ uvlačenje i najčešće se koristi za organizovanje uvlačenja oko teksta, na primer. Čini se kao jednostavna stvar, ali ponekad možete naići na takve dragulje kao što je vatrena buba koju nisam mogao a da ne spomenem ovdje.

- Pomaknuti blok koristeći marginu ili poziciju:relativno u kombinaciji s horizontalnim i vertikalnim pomacima? Naravno, u ovim slučajevima morate koristiti marginu. Istina, kao i drugdje, sve ovisi o konkretnom slučaju, ali općenito bi 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 zauzvrat 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: tabela;

- Kako napraviti div nevidljivim? Manipuliranjem svojstvom prikaza. Za nevidljivost, postavite ga na ništa.

- Kako napraviti skrolovanje sadržaja u div 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 i postavite display:block;

To je sve što treba da znate da bezbolno otkucavate divs. Zapravo. Pa, ako se pojave još neka pitanja, odgovori će se odmah pojaviti ovde! Ali generalno, nema čega da se plašite - pola sata treninga i vi Već ste profesionalac. Zato ostavite po strani ove zastarjele tablice - i prijeđite na novu fazu evolucije!

Oznake: faq, div, izgled, tutorijal

Prilikom postavljanja narednog projekta (ili samo dizajniranja layout mreže), mnogi su se suočili sa dilemom - koristiti fiksnu širinu izgleda ili „gumenu“ mrežu koja se prilagođava veličini prozora pretraživača.

Svako od ovih rješenja ima svoje prednosti i nedostatke, želim se fokusirati na minuse, jer obično upravo u odražavanju minusa ovih odluka treba birati između dva zla.

Fiksna širina mreže rasporeda

Raspored je forsiran u 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 prohladno - tanka vertikalna traka korisnog sadržaja stranice i ogromna beskorisna polja neiskorišćen prostor sa strane.

“Gumena” mreža rasporeda po širini prozora

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

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

Ažuriranje: Rezervirao bih da se ne radi o klasičnom efektu gume i prilagođavanju apsolutno svim rezolucijama, već samo o određenom razumnom rasponu rezolucija za koji je raspored dizajniran. U primjerima ispod, ovo je klasičan raspon rezolucije radne površine s horizontalnom veličinom rezolucije od 1024 piksela.

Još jednom da naglasim: Post ne govori o rješenju za sve tipove uređaja i sve raspone rezolucije. Ovaj problem se u principu ne može riješiti u okviru jednog rasporeda., da biste to riješili na ovaj ili onaj način, potrebno je nekoliko rasporeda. Muhe odvojeno, kotleti posebno.

Kreirajte kontejner izgleda:
...
Mi ga ukrašavamo jednostavnim stilskim kodom:
div.page-container (minimalna širina: 960px; maksimalna širina: 75%; margina: 0 auto; padding: 0; )
Međutim, nekome se ovo rješenje može učiniti nedostatnim zbog činjenice da se kod vrlo velikih horizontalnih veličina prozora opet pojavljuju problemi s dužinama 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 procenta za originalni kontejner kao što je predloženo u prvom komentaru, radit će i u IE, koji do verzije 9 ne razumije istovremenu indikaciju vrijednosti.

Dodavanje HTML-a:
...

I malo promijenite 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; padding: 0; )
Kao što vidite, rješenje je izuzetno jednostavno i prilično univerzalno, može se koristiti za bilo koji blok element.