Cum de a face blocuri css pentru a alinia principalele căi

Înainte de a ne uităm la tehnicile cele mai comune care ar dori să reamintească unele teorii. elemente ale paginii web sunt împărțite în nivel de bloc și inferior. Iar diferența dintre ele este foarte simplu - cazul inferior pot fi aranjate într-un rând, iar blocul - nr. Desigur, această distincție nu se încheie, dar este principala diferență. Deja în blocuri pot fi indentate de sus și de jos (în litere mici - nr), iar acestea pot fi aplicate mai multe proprietăți.

Principalele modalități de a construi în blocuri css într-un rând

Nu este nimic nu vom complica lucrurile, exista 3 moduri principale:

Conversia unități la elemente mai mici. În același bloc proprietăți sunt pierdute, astfel încât această opțiune este aproape niciodată folosit

Asigurați elementele necesare bloc-litere mici. Acesta este un tip special, în care elementul își păstrează proprietățile sale, dar în același timp, permițând altor unități din apropiere.

HTML5 și CSS3 practica de la zero la rezultatul!

Asigurați-elemente plutitoare folosind float de proprietate.

În aceste realizări, locui. Fleksboks, afișare tabelar, și alte ori nu vom lua în considerare. Deci, să avem 3 subtitrare.

Firește, toate css-proprietăți trebuie să se înregistreze ca un fișier separat (style.css), care trebuie să fie conectat la documentul HTML. În acest fișier, voi scrie un stil minimal, doar pentru a fi văzut, subtitrari noastre.

Aici ei sunt pe pagina:

Acolo se comportă ca blocuri. Kady situat pe linia sa, există umplutură între ele. Dacă se dorește, puteți specifica ce doriți-padding și, în general, face orice.

Transformarea în linie și se adaugă imediat umplutură. Pentru a face acest lucru, necesitatea selectorului h3 pentru a adăuga următoarele proprietăți:

HTML5 și CSS3 practica de la zero la rezultatul!

După cum puteți vedea, indentare nu se aplică în întregime corectă, este doar pentru că avem de-a face cu siruri de caractere. Dacă modificați afișajul pentru a bloca un șir de caractere, umplutură va fi adăugat în mod corect. Pentru a face acest lucru, trebuie doar să modificați valoarea proprietății:

Există 2 probleme principale care apar atunci când se utilizează această tehnică. În primul rând - aceasta este indentare minimă. Acesta este format din cauza faptului că codul are un singur spațiu, care formează distanța dintre blocuri. Dacă această problemă trebuie abordată, există 2 opțiuni principale:

Codul HTML necesar pentru a plasa blocuri într-o singură linie, fără goluri

Lipiți indentare externă negativă -4 pixeli dreapta. Este nevoie de atât de mult un singur spațiu.

A doua problemă - cu înălțimi diferite ale elementelor pot să apară probleme de afișare. În general, cea mai bună opțiune - unități plutitoare. În loc de display: inline-bloc a scrie acest lucru:

Și toate pozițiile noastre nivel trei vor fi presate la stânga. Prin urmare, este de asemenea posibil să le apăsați și spre stânga. Când se folosește această tehnică, problemele descrise mai sus nu apar inițial.

Numai pentru ceea ce trebuie să fiți atenți în acest caz - fluxul de anulare. Următorul bloc după ce plutitoare nevoie pentru a pune proprietatea clar: ambele, că el nu a încercat să-și încheie în jurul acestor blocuri, și situate în continuare, așa cum ar trebui să fie.

Blocuri în conformitate cu cadrul

Trebuie să spun că, dacă aveți de gând să utilizeze orice css-cadru normal (de exemplu, Bootstrap), există încă mult mai ușor. Toate css-cod responsabil pentru echilibrul elementelor, este deja scris, și va trebui doar să ceară claselor potrivite. Este suficient să se examineze sistemul de rețea, și va fi capabil de a face template-uri adaptive multi-coloană, fără mare dificultate. Cel puțin, acesta va fi mult mai ușor decât scris de la zero css.

O altă problemă cu scrierea de cod de la zero apare doar atunci când ai nevoie de un design receptiv. Desigur, acesta poate fi pus în aplicare în mod independent, care deține interogările media, dar va fi mult mai dificil, dacă aveți un model complicat.

transfer lin al temei în cadrul Bootstrap, încă o dată, observ că, dacă se confruntă cu provocarea de a impune un model complex de adaptare, un păcat să nu profite de rețea. Pentru a face acest lucru, nici măcar nu trebuie să conectați versiunea completă a cadrului - este posibil pentru a personaliza și opri acolo doar ceea ce ai nevoie.

HTML5 și CSS3 practica de la zero la rezultatul!

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram