Koja će biti zadana širina div. Načini horizontalnog postavljanja blokova

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 kakvu 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 kasniji blok offsets (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 od rješenja izgleda ovako: 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

Ukupna veličina bilo kojeg bloka je zbir nekoliko vrijednosti svojstva. Što se može vidjeti na dijagramu:

• Veličina glavnog bloka (sadrži glavni sadržaj bloka - sliku, video, tekst ili sve odjednom) postavlja se pomoću css svojstava širina I visina (visina bloka)
• Dalje oko glavnog bloka nalaze se polja ( padding) pomoću njih postavljamo uvlačenje glavnog sadržaja od ivica okvira
• Sljedeći sloj - granica Nije teško pogoditi za šta je odgovorna ova nekretnina
• Posljednji sloj koji čini ukupnu veličinu bloka je vanjska margina koristeći ovo CSS svojstvo možete postaviti uvlačenje između blokova

Podešavanje veličina blokova

Tako smo saznali da ukupne dimenzije nisu ništa drugo do zbroj vrijednosti svih gore navedenih svojstava. A svim ovim svojstvima možemo lako manipulisati.

Možemo odrediti vrijednosti visine i širine koristeći konstante s jedinicama kao što su px, itd. Također možete specificirati koristeći procente i kalkulacije.

Ako širina bloka nije specificirana, tada će prema zadanim postavkama blok zauzimati cijelu širinu roditeljskog bloka, minus vrijednosti paddinga i granice.

svojstvo veličine kutije

Ako imate površinu od 800 px, i želite da u nju postavite 2 elementa, dijeleći ovo područje jednako, onda CSS pravila

Neće vam to dozvoliti iz jednog jednostavnog razloga, jer... Ukupna veličina bloka uključuje sve uvlake i ivicu, te stoga neće biti dovoljno prostora za drugi blok.

Ovo možemo riješiti jednostavnim izračunavanjem koliko nam je prostora potrebno za ivicu i padding i oduzimanjem od svojstva širine. Ali postoji još jedan način: u ovom slučaju možete koristiti imovinu box-sizing:border-box

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

Ako primijenimo box-sizing:border-box pravilo na css blok, onda ne trebamo izračunavati unutrašnje paddinge i obrub, jer u ovom slučaju, oni će biti uključeni u vrijednost širine i možemo bezbedno urediti unutrašnje padding i ivice po potrebi, bez straha da se blokovi neće uklopiti. Ali imovina se ne uklapa u ovo pravilo margina. Stoga, ako trebate dodati vanjski padding između elemenata, onda izračunajte koliko ćete morati oduzeti od svojstva širine;

Napomena: Ako ovo svojstvo ne radi za vas u pregledniku Chrome, dodajte ovo pravilo posebno za njega

Webkit-box-sizing:border-box;

Po defaultu, blok elementi koriste automatsku širinu. To znači da će element biti horizontalno rastegnut tačno onoliko koliko ima slobodnog prostora. 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.

zdravo, dragi čitaoče.

Ovo je jedanaesta lekcija u učenju CSS-a. U ovoj lekciji ćemo pogledati samo dva jednostavna, ali važna svojstva. Ova svojstva kontroliraju visinu i širinu bloka.

Prije proučavanja ove lekcije, prođite kroz prethodne lekcije:

Teorija i praksa

U prošloj lekciji pogledali smo šta je blok model, unutrašnje i vanjske margine. U ovom slučaju ćemo pogledati samo dva svojstva: visinu i širinu bloka. Visinu u CSS-u postavlja svojstvo visina , a širina je svojstvo širina . Pogledajmo kod koristeći pravi primjer (uzmimo primjer iz prošle lekcije):

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

<html > <glava > <naslov > Dom</naslov> <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <tijelo > <div id = "sadržaj" > <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> </tijelo> </html>

I u CSS-u za svaki blok