Separarea paginilor în blocuri în css. model bloc

Deci, de la simplu la complex. Să vedem cum apar blocuri div implicit, fără stiluri care să le afecteze poziția. Pentru claritate, vom adăuga stiluri elementelor inline, prin atributul style.

Să adăugăm o valoare a lățimii pentru fiecare bloc:

Se poate observa că fiecare bloc, conform specificației, este situat pe o linie nouă. Acesta este comportamentul lor normal.

Acum se pune întrebarea cum să aranjezi blocuri div pe o singură linie, unul dupa altul?

Pentru a face acest lucru, există o proprietate care determină pe ce parte blocul va fi forțat să se alinieze. În același timp, de pe cealaltă margine, poate fi înfășurat de alte elemente.

Proprietatea float are următoarele valori:

• stânga - blocul este aliniat la stânga, înfășurându-se pe dreapta
• dreapta - blocul este aliniat la dreapta, înfășurându-se la stânga
• none - wrapping nu este setat, blocul se comportă implicit, ca în exemplele anterioare.

Să adăugăm un float:left la blocurile noastre, astfel încât blocurile să se alinieze la stânga:

Drept urmare, blocurile s-au aliniat pe o singură linie. Bine, să presupunem că vrem să adăugăm un alt div în partea de jos și putem face asta fără a specifica proprietatea float:

Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Unitatea 4

Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Unitatea 4

De ce s-a întâmplat? Pe scurt, acest lucru se întâmplă deoarece elementele cu flotoare cad din fluxul documentului. Cu toate acestea, acesta este un subiect pentru un articol separat. Aici ne vom familiariza cu o nouă proprietate care controlează comportamentul elementelor plutitoare:

• stânga - dezactivează împachetarea în partea stângă, toate elementele vor fi afișate pe o linie nouă (sub element)
• dreapta - previne înfășurarea elementului pe partea dreaptă
• ambele - dezactivează împachetarea elementului de pe ambele părți, se recomandă să-l folosești atunci când trebuie să arăți în mod explicit elementul dintr-o linie nouă sau nu se știe din ce parte este posibil să împachetezi alte elemente

Să adăugăm o proprietate clear:left la Blocul 4, care va împiedica acest element să se înfășoare în jurul altor elemente plutitoare din partea stângă.

Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Unitatea 4

Blocul 4 este plasat pe o linie nouă, după cum avem nevoie.

ÎN acest cazștim cum sunt situate alte blocuri, așa că în exemplu am indicat imediat clar: stânga. Sunt situații în care nu știm exact pe ce latură se va întâlni blocul plutitor, așa că în astfel de cazuri merită precizat clear:both, care anulează ambalarea pe ambele părți. Acum ne-am dat seama cum să aranjam blocurile div pe aceeași linie orizontal.

Trebuie amintit că blocurile valoare flotant situat pe aceeași linie, dacă lățimea permite element părinte. Dacă elementele bloc nu se potrivesc într-un rând, ele se vor încheia la o nouă linie. Dacă acest lucru este critic, de exemplu, atunci când așezați machete, trebuie să luați în considerare acest lucru, iar pentru blocurile cu float, asigurați-vă că setați lățimea - fixă ​​(px) sau cauciuc (%, rem etc.). Să aruncăm o privire asupra acestor situații.

Cum să afectăm blocurile dacă vrem să plasăm aceste blocuri în centru?

Soluția clasică ar fi adăugarea unui părinte la blocuri și utilizarea marjei: 0 auto proprietate;

De ce i-am dat părintelui însuși clasa .wrapper? „înveliș” în traducere înseamnă „înveliș”. Este o practică obișnuită să definiți un nume de clasă atunci când un element înfășoară alte blocuri și astfel le permite să fie manipulate/influențate prin schimbarea părintelui însuși.

Să luăm marcajul din exemplele anterioare și să o rafinăm.

Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Unitatea 4

Totul pare să fie simplu aici.

Și dacă nu ne place că textul se lipește aproape de marginea blocului părinte și dorim să adăugăm margini fără a face modificări la marcaj, doar cu css. Să adăugăm proprietatea padding la elemente:

Bloc 1. Lorem

Bloc 2. Lorem ipsum

Bloc 3. Lorem ipsum

Bloc 4. Lorem

Și vedem că aspectul nostru s-a prăbușit! Blocul 3 a mers undeva. De ce s-a întâmplat? Răspunsul este simplu. Adăugând margini elementelor, am mărit lățimea acestora. Acum valorile sunt:

Blocul 1: 10 + 200 + 10 = 220px

Blocul 2: 10 + 150 + 10 = 170px

Blocul 3: 10 + 100 + 10 = 120px

Blocul 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Lățimea totală a celor trei blocuri este de 510, ele nu se încadrează în lățimea părintelui (450) și, prin urmare, se înfășoară la o nouă linie.

Cum să remediez? Puteți face următoarele:

1. Resetați valorile lățimii pentru fiecare bloc, luând în considerare marginile. Reducerea dimensiunilor blocurilor. Totul se va potrivi din nou într-o singură linie. De acord, e incomod? De fiecare dată să te urci în aspect și să editezi ceva.
2. Utilizați proprietatea box-sizing: border-box. Astfel încât calculul să fie luat din lățimea totală a blocului. Vă sfătuiesc să aflați care este modelul blocului css.

Folosim a doua opțiune, se dovedește astfel:

Bloc 1. Lorem

Bloc 2. Lorem ipsum

Bloc 3. Lorem ipsum

Bloc 4. Lorem

Acum să colectăm împreună toate informațiile primite și să încercăm să creăm un aspect simplu, tipic, cu trei coloane impunerea cauciucului, care se va întinde până la maximum 900px, după care întreg layout-ul va fi poziționat în centru.

Creați un marcaj de aspect:

Stiluri de scriere:

Corp (lățime maximă: 900 px; /* constrângere latime maxima*/marja: 0 auto; ) /* pentru toate blocurile din interiorul corpului, modificați algoritmul de calcul al lățimii blocului și adăugați marje de 10px la toate blocurile */ body div ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header ( fundal: #CCA69E; padding: 10px; ) .left-sidebar (lățime: 20%; fundal: #8ED9B6; float: stânga; ) .content (float) : stânga; lățime: 60%; ) .right-sidebar ( lățime: 20%; fundal: #FF9282; float: stânga; ) .footer ( fundal: #000; clar: ambele; /* dezactivează împachetarea pe ambele părți, blocul este afișat pe o linie nouă */ culoare: #ccc; )

Dacă ceva nu este clar, întrebați în comentarii.

Salutare dragi iubitori de IT. Astăzi, principala modalitate de a crea site-uri frumoase cu mai multe pagini se bazează pe aspectul blocului folosind eticheta div.

În caz de necunoaștere a subtilităților de bază ale lucrului cu acest instrument, vai și o, dar atractiv design adaptiv nu vei primi niciuna. Prin urmare, acest articol este dedicat subiectului „Cum se face un bloc în html”. Voi descrie în detaliu cum să creați obiecte bloc pe pagină de la zero, cum să proiectați fundalul și designul blocului și, cel mai important, vă voi spune cum să includeți o foaie de stil. Deci, să începem!

Caracteristicile elementelor bloc

Blocuri sunt elemente dreptunghiulare care ocupă toată lățimea disponibilă a paginii, încep întotdeauna pe o linie nouă și, implicit, calculează automat o înălțime pe baza conținutului.

Toate elementele blocului constau din 4 proprietăți care înconjoară conținutul obiectului ca niște cadre.

Șeful blocului este conţinut.

În jurul lui sunt câmpuri numite căptușeală. Marginile sunt responsabile pentru distanța dintre conținutul unui obiect și marginea sa interioară a granițelor.

După aceea vin granițele în sine, care se numesc cuvânt englezesc frontieră.

Și, în sfârșit, ultimul cadru din jurul tuturor celor de mai sus este marginea- umplutură de la marginea exterioară a chenarului până la marginile paginii sau alte elemente. Rețineți că aceste proprietăți sunt opționale.

De exemplu, să programăm 2 și să umplem elementele create cu text.

Pe acest momentîn acest cod vor fi afișate ca două propoziții normale. Pentru a proiecta blocuri, trebuie să conectați o foaie de stil și limbajul css setați anumite proprietăți.

Să aducem culori strălucitoare în viața de zi cu zi html

Pentru ca obiectele bloc să arate interesante și atractive, trebuie neapărat să includem o foaie de stil în cascadă.

Pentru a face acest lucru, în recipientul de cap după etichetă

Blocați în css - 2.

Blocați în css - 3.

Ca urmare:

Acum, în CSS, voi arăta câteva trucuri în care posibilitățile blocurilor HTML sunt extinse.

Chenarul blocului CSS

proprietate "FRONTIERĂ»
Folosesc adesea un cadru când creez pagini web. Cadrele mă ajută să văd unde începe blocul și unde se termină. Acest lucru îmi face munca mai ușoară. De asemenea, cadrul poate fi folosit pentru a proiecta blocuri.
Pentru a crea cadre pentru blocuri, notează regula pe care o știi deja „border”.

Sintaxă:

Chenar: border_thickness border_type border_color;

Blocați în css -1.

Blocați în css - 2.

Blocați în css - 3.

Dacă nu înțelegeți unde și unde am intrat în CSS, atunci acordați atenție liniilor de la 4 la 17. Și dacă mai aveți o astfel de întrebare, ce am făcut, atunci repetați lecția numărul 3 - „”.

Rezultat:

Acum puteți vedea marginile blocului, iar când marginile sunt vizibile, atunci este mai ușor să lucrați cu blocuri.

Umplutură cu blocuri CSS

proprietate "MARJA»
Pentru a seta distanța (indentarea) de la bloc, utilizați regula „marjă”.
Acordați atenție diagramei. Parametrii sunt setați din bloc:

Proprietăți:

• top- partea superioară
• dreapta- Partea dreapta
• fund- partea de jos
• stânga- partea stângă

margine-sus: 30px; /* partea de sus */ margin-right:70px; /* partea dreaptă */ margin-bottom:90px; /* partea de jos */ margin-left:120px; /* partea stângă */

Forma prescurtată

Puteți scrie tot ce am scris pentru indentare cu fiecare bloc separat într-o formă prescurtată:

Sintaxă:

Marja: partea de sus latura dreapta partea de jos partea stângă;

Marja: 30px 70px 90px 120px; /* notație scurtă */

Blocați în css -1.

Blocați în css - 2.

Blocați în css - 3.

Rezultat:

Dacă setați un parametru la regula „marjă” (linia nr. 22):

Marja: 100px /* notație scurtă */

atunci distanța față de bloc pe toate părțile va fi de 100 px.

Umplutură într-un bloc în CSS

proprietate "CAPTURĂ»
Pentru a seta distanța (indentarea) în interiorul blocului, utilizați regula " padding".
Acordați atenție diagramei:

Proprietăți:

• top- partea superioară
• dreapta- Partea dreapta
• fund- partea de jos
• stânga- partea stângă

padding-top: 30px; /* partea de sus */ padding-right:70px; /* partea dreaptă */ padding-bottom:90px; /* partea de jos */ padding-left:120px; /* partea stângă */

Forma prescurtată

Puteți nota tot ce am scris mai sus într-o formă prescurtată.

Sintaxă:

Căptușeală: partea de sus partea dreaptă partea de jos partea stângă;

Umplutură: 30px 70px 90px 120px; /* notație scurtă */

Scrieți în fișierul HTML astfel:

Blocați în css -1.

Blocați în css - 2.

Blocați în css - 3.

Rezultat:

Dacă setați un parametru la regula „padding” (linia #21):

umplutură: 50px; /* notație scurtă */

atunci distanța în interiorul blocului pe toate părțile va fi de 50 px.

Lățimea și înălțimea blocului în CSS

proprietate "LĂŢIME" Și "ÎNĂLŢIME»
Puteți crea o lățime și înălțime de bloc. Pentru a face acest lucru, utilizați regulile " lățime" - lățime și "înălțime" - înălțime.

Sintaxă:

• inaltime - inaltime bloc;
• lățime - lățime bloc;

Sens:
Valoarea este dată în px sau %.

Latime: 600px /* latime bloc */ inaltime: 250px; /* înălțimea blocului */

Cred că nu este nevoie să explic cum să inserați o regulă în CSS, în același timp, voi verifica cum ați stăpânit lecția #3 despre cum să includeți CSS.

Rezultat:

Blocul va avea o lățime și o înălțime fixe.

Dacă aveți nevoie de nereparat, și bloc de cauciuc(un bloc care se întinde pe lungimea monitorului), apoi în loc de px, trebuie să specificați %. Nu uitați: întregul monitor este 100%.

Latime: 90%; /* latimea blocului de cauciuc */

Blocați fundalul în CSS

proprietate "FUNDAL»
Știți deja regula „fondului”, așa că nu văd niciun motiv să mă repet.
Și cine nu știe, ești binevenit pe pagina cu.

Blocul 1.

Linia numărul 7 - cu regula " fundal"Am înlocuit fundalul cu verde

Rezultat:

Puteți umple fundalul nu numai cu culoare, ci și cu o imagine:

Imagine de fundal: url(bg.gif); /* Imagine de fundal */

Blocul 1.

Linia #7 - Cu regula „imagine de fundal”, am înlocuit fundalul cu o imagine de fundal.
bg.gif este imaginea de fundal.

Rezultat:

PLUS

Blocați transparența în CSS

Proprietatea OPACITATE
Un bloc poate fi făcut transparent folosind regula CSS „opacitate”.

Sintaxă:

Opacitate: valoare

Sens:
valorile sunt un număr în intervalul de la 0 la 1.

• Valoarea 0 - transparența totală a blocului.
• Valoarea 1 - opacitatea blocului (blocul va rămâne așa cum este).
• Valoarea în fracții (0,5) este transluciditatea blocului.

Blocul 1.

Rezultat:

Ascunde bloc în CSS

proprietate "AFIŞA»
Regula „afișează” va ajuta la ascunderea blocului paginii web. Adesea, această regulă este folosită într-un meniu derulant sau atunci când trebuie să ascundeți unele blocuri în versiunea mobilă a site-ului.

Bloc 1(afișare:niciuna;)

proprietate "OPACITATE»
Regula „opacității” va ajuta și la ascunderea blocului pe pagina web.

Bloc 1 (opacitate: 0;)

proprietate "VIZIBILITATE»
„vizibilitatea” este o altă regulă care va ajuta și la ascunderea unui bloc al unei pagini web. La regula „vizibilitate” Scrieți valoarea „ascuns”:

Bloc 1(vizibilitate: ascuns;)

proprietatea de debordare

Proprietate „OVERFLOW”.
Cu regula „depășire”, puteți defini ce se va face dacă conținutul unui element depășește dimensiunea acestuia. De exemplu, o imagine sau un text este mai mare decât blocul în sine.

Sintaxă:

debordare: valoare;

Sens:

• vizibil- indică faptul că atunci când elementul depășește conținut, acesta nu va fi tăiat, ci pur și simplu în afara limitelor (valoare implicită).
• Ascuns- indică faptul că conținutul care nu se încadrează în element va fi tăiat (partea tăiată va fi invizibilă).
• Sul- indică faptul că conținutul care nu se încadrează în element va fi tăiat, dar puteți folosi bara de derulare pentru a vizualiza partea tăiată.
• Auto- când elementul debordează de conținut, barele de defilare sunt adăugate automat.

Exemplu cu „Vizibil” (valoare implicită):

Blocul 1.

Rezultat:

Exemplu cu „Hidden»:

Bloc1 (înălțime: 200px; /* înălțime */ lățime: 250px; /* lățime */ chenar: 2px punctat #cc0000; /* chenar */ depășire: Ascuns; )

Rezultat:

Exemplu cu „Scroll»:

Blok1 (înălțime: 200px; /* înălțime */ lățime: 250px; /* lățime */ chenar: 2px punctat #cc0000; /* chenar */ depășire: derulați; )

Rezultat:

Exemplu cu „Automat”:

Blok1 (înălțime: 200px; /* înălțime */ lățime: 250px; /* lățime */ chenar: 2px punctat #cc0000; /* chenar */ overflow: automat; )

Rezultat:

Umbră casetă în CSS

Proprietatea „BOX-SHADOW”.
Puteți face o umbră din bloc. Regula cutie-umbră.

Sintaxă:

Blok1 ( înălțime: 200px; /* înălțime */ lățime: 250px; /* lățime */ chenar: 1px solid #ccc; /* chenar */ box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*blochează umbra*/ )

Rezultat:

Alinierea unui bloc la centru

Proprietate „MARGIN”.
Pentru a alinia blocul în centru, setați regula marginii la „0 auto”:

Marja: 0 auto;

Blok1 (înălțime: 100px; /* înălțime */ lățime: 100px; /* lățime */ chenar:1px solid #ccc; /* chenar */ margine: 0 auto; )

Asta e tot! Este timpul să termin această lecție, altfel a ieșit prea mare! Și aud deja sforăit în afara monitorului.
Mai mult și vom termina de învățat elementele de bază ale CSS.

Abonați-vă pentru actualizare!

Postarea anterioară
Postarea următoare

Anterior, pe Internet, era larg răspândit un tip de aspect tabelar, la care . Cu toate acestea, de-a lungul timpului, această abordare a creării structurii site-ului a devenit depășită și a fost înlocuită cu un aspect bloc.

Diferențele dintre aspectul bloc și tabel

Dacă aspectul tabelar implică faptul că conținutul paginii se află în interiorul etichetei

, atunci conceptul de aspect al blocurilor se bazează pe utilizarea activă a etichetelor universale

, în interiorul căruia este plasat conținutul, inclusiv alte etichete.

Aspectul blocului este lipsit de dezavantajele aspectului tabelar - este mai bine indexat de motoarele de căutare, codul său nu este atât de răspândit și blocurile

, pe care le place să le numească atât de mult „straturi”, au fost concepute inițial ca universale, adică „pentru orice”, în timp ce

este un tabel care ar trebui folosit pentru a afișa date tabelare și nimic mai mult.

Singurul dezavantaj tangibil al aspectului bloc este că site-urile create pe acesta pot fi afișate diferit în browsere. Pentru a evita acest lucru, trebuie să faceți aspectul „cross-browser”, adică afișat în mod egal de orice browser.

Esența aspectului blocului

Un aspect al site-ului este creat într-un editor grafic: este marcat unde va fi localizată ce zonă a paginii (antet, jos, bară laterală, conținut principal) și cât spațiu va ocupa, imaginile, fundalurile sunt pregătite.

Fiecare parte a paginii este plasată în propriul bloc

: partea de sus a site-ului - în primul, meniul - în al doilea, conținutul - în al treilea, etc. Fiecare bloc este umplut cu conținut folosind HTML, precum și poziționat și stilat folosind marcajul CSS.

Documentul HTML final este un set de blocuri

cu conținut în interior. Stilul este adesea într-un fișier CSS separat conectat la pagina cu eticheta , sau cel puțin într-un recipient

Scopul competiției este de a descoperi obiecte din lumea materială de o valoare colosală, aparținând unui organism biologic viu, denumit în continuare dragon, și exproprierea acestora.

Rezultat acest exemplu prezentată în fig. 2.

Orez. 2. Bloc cu colțuri rotunjite

Deși metoda sa dovedit a fi destul de universală, are o serie de limitări. Deci, nu puteți seta un gradient în interiorul blocului, deoarece linii orizontale simplu. De asemenea, pentru a modifica raza de rotunjire, trebuie să editați proprietățile stilului mai multor selectoare în același timp.

Iată un alt exemplu pentru crearea unui bloc cu o rază de rotunjire de trei pixeli. În multe cazuri, acesta este cel mai mult cea mai buna varianta, atât în ​​ceea ce privește designul, cât și compactitatea codului (exemplul 3).

Exemplul 3. Raza de rotunjire cu trei pixeli

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

La sfârșitul oportunității de a înțelege informațiile de mai sus, aveți o oportunitate obiectivă de a trimite cerere oficială principalul subordonator al universului virtual local.

Rezultatul acestui exemplu este prezentat în Fig. 3.

Top articole similare

Ce oprește Xiaomi să intre pe piața din SUA Ce dispozitive au aruncat în aer piața

Serviciu de roaming ușor și acces internațional mts Ce este roamingul internațional

„LL” (Low) este afișat atunci când valoarea parametrului măsurat este prea mică.

Categorii:

• Programe
• Siguranță
• Windows 10
• Fier
• Windows 8
• In contact cu
• Greșeli

© 2023 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.