Unele browsere interpretează conceptul de lățime destul de vag, deși specificația CSS afirmă clar că lățimea este suma următorilor parametri: lățimea blocului propriu-zis (lățimea), marginile (marja), câmpurile (padding) și chenarele (chenarul) . Exemplul 2 arată cum să creați un strat care conține toate aceste componente.

Exemplul 2: Lățimea stratului

Ca rezultat al acestui exemplu, vom obține un strat cu o lățime de 342 pixeli. În fig. 1 arată din ce este alcătuită lățimea stratului.

Figura 1. Lățimea elementului bloc

În cazul cândnu este specificat în cod, browserul Internet Explorer ia valoarea proprietății width ca lățime a întregului bloc.

Să ne uităm la un alt exemplu legat de lățime. În mod implicit, lățimea stratului este setată la automat, acest lucru permite stratului să se potrivească în fereastra browserului fără a ține cont de valorile câmpurilor setate. Dacă modificați lățimea la 100%, o bară de defilare orizontală va apărea inevitabil atunci când adăugați valori de umplutură, marjă sau chenar.

Există mai multe abordări pentru a obține un rezultat universal. Exemplul 3 demonstrează crearea a trei straturi, a căror lățime este determinată ca procent.

Exemplul 3. Lățimea stratului în procente

Rezultatul exemplului este prezentat în Fig. 2.

Orez. 2. Afișați lățimile straturilor în browser

Lățimea primului strat din acest exemplu (layer1) este setată la 100%, ceea ce duce la afișarea unei bare de defilare orizontale. Pentru al doilea strat (layer2), lățimea este, de asemenea, setată la 100%, dar marginile sunt definite pentru paragraful interior (etichetă

). Din acest motiv, lățimea stratului va fi aceeași în toate browserele. Al treilea strat (layer3) nu are deloc aplicată proprietatea width, deci este definit implicit - auto. În acest caz, stratul va ocupa întreaga lățime a ferestrei browserului fără dungi orizontale.

Modul în care setați lățimea depinde de aspectul utilizat și de alegerea dezvoltatorului, dar, în orice caz, trebuie să țineți cont de caracteristicile elementelor bloc și să creați cod universal.

Înălţime

Situația cu înălțimea elementelor bloc este similară cu lățimea. Browserul ia valoarea proprietății înălțime ca înălțime a stratului și îi adaugă valorile marginii, umpluturii și chenarului. Dacă înălțimea stratului nu este setată în mod explicit, aceasta este calculată automat pe baza volumului conținutului.

Să presupunem că un strat este setat la o înălțime de pixeli, iar conținutul stratului este în mod clar mai mare decât înălțimea specificată (Exemplul 4).

Exemplul 4: Înălțimea stratului

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Blocați înălțimea în diferite browsere

Se poate observa că browserul lasă înălțimea neschimbată, din cauza căreia textul nu se încadrează în bloc și se suprapune deasupra stratului.

Culoare de fundal

Cel mai simplu mod de a seta culoarea de fundal a unui element este prin proprietatea generică de fundal. În acest caz, zona determinată de valorile lățimii, înălțimii și umpluturii este umplută cu fundal (Fig. 4).

Opțiuni de blocare în CSS

Zona unui strat care este umplută cu culoarea de fundal

Astfel, marginea nu participă la formarea zonei colorate.

Frontiere

Datorită diferenței de abordare a browserului la formarea elementelor bloc, există și o diferență în afișarea marginilor. Browserul Internet Explorer 7 desenează cadrul în interiorul blocului, iar Firefox desenează cadrul în exterior. Dar dacă folosim o umplere de fundal, vom vedea o imagine complet opusă (Fig. 5). Și totul pentru că Firefox (Opera) setează culoarea de fundal de-a lungul marginii exterioare a graniței, iar Internet Explorer o setează de-a lungul marginii interioare. Începând cu versiunea 8.0, Internet Explorer a schimbat stilul de afișare a cadrului; acesta este desenat în interiorul unui bloc, la fel ca în Firefox.

A. Internet Explorer 7

b. Firefox, Internet Explorer 8+

Orez. 5. Afișarea cadrului în browsere

Exemplul 5 arată cum să creați cod pentru a obține o astfel de graniță.

Exemplul 5: cadru punctat

Diferențele în modul în care browserele desenează chenarele sunt vizibile doar pe fundaluri colorate și linii punctate. Pentru un cadru solid, aspectul stratului în browsere va fi aproape același.

rezumat

Elementele bloc acționează ca material de construcție principal atunci când amenajează pagini web. Astfel de elemente se caracterizează prin faptul că încep întotdeauna pe o linie nouă și ocupă întreaga lățime disponibilă a zonei în care se află.

Specificația CSS definește că înălțimea și lățimea unui element sunt determinate nu numai de valorile înălțimii și lățimii, ci și de valorile marginilor, umpluturii și marginilor. Browserele în acest sens sunt împărțite în două părți: unele susțin specificația în această chestiune, în timp ce altele o ignoră și acționează în felul lor. Acest lucru creează dificultăți pentru dezvoltatorii care doresc să creeze pagini web universale. Vă putem sfătui să folosiți proprietățile de lățime și înălțime doar într-o măsură limitată, deoarece în mod implicit browserul folosește argumentul auto, care forțează ca dimensiunile elementului să fie ajustate automat.

În ce tipuri de elemente sunt împărțite?

Cert este că nu toate fragmentele dintr-o pagină web sunt blocuri. Elementele sunt în general împărțite în bloc și elemente inline. Acestea din urmă pot fi scrise cu ușurință pe o singură linie și nu trebuie să scrieți nimic suplimentar. Un exemplu simplu de element inline este un link. Pot exista oricâte link-uri doriți pe o singură linie, atâta timp cât se potrivesc pe ea.

Elementele bloc au un comportament complet diferit. Fără manipulări suplimentare, ei nu vor putea sta într-un rând. Un exemplu de astfel de bloc este un paragraf, care este specificat de eticheta p. Deci, de ce vă spun toate astea? Acest lucru este spus pentru a înțelege că dimensiunea trebuie setată doar pentru elementele bloc, ceea ce vom face în acest articol.

Orez. 1. Proprietăți de bază care ajută la setarea dimensiunii

Proprietăți simple pentru dimensiuni

Cele mai simple proprietăți care pot fi utilizate pentru înregistrarea dimensiunilor sunt lățimea și înălțimea. Ele înseamnă lățimea și, respectiv, înălțimea. De asemenea, le puteți adăuga prefixele min- și max-. În acest caz, se vor seta lățimea sau înălțimea minimă, respectiv maximă.

Valorile pot fi scrise în pixeli sau procente. Uneori se folosește și unitatea relativă em (înălțimea fontului), dar de obicei este folosită pentru a determina dimensiunea textului. În mod implicit, toate grilele (componentele principale ale unui șablon) în care dimensiunile sunt definite în procente se numesc cauciuc. De asemenea, notația procentuală ajută la adaptarea cu ușurință a șablonului, ceea ce este, de asemenea, foarte important.

Dimensiunea în pixeli

Așa-numitele valori absolute sunt înregistrate în pixeli. De exemplu, întregul site ar trebui să fie conținut într-un container lățime de 1000 de pixeli. Acest bloc este creat și lățimea este scrisă în el.

#container( lățime: 1000px; )

Dacă este scrisă astfel, atunci lățimea containerului nu se va schimba în nicio circumstanță. Când schimbați scara sau reduceți fereastra, aceasta va rămâne aceeași. Dimensiunea site-ului nu va scădea și, dacă este necesar, va apărea o bară de defilare orizontală.

Acestea sunt așa-numitele șabloane fixe. Astăzi, multe site-uri încă funcționează astfel. De exemplu, rețeaua socială Vkontakte. Încercați să reduceți dimensiunea ferestrei de pe computer și veți vedea că șablonul nu se schimbă deloc. Desigur, VKontakte are versiuni separate pentru tablete și smartphone-uri, așa că au decis să lase un șablon fix.

Și totuși, capacitatea grilei site-ului de a se adapta la noile ecrane este de mare importanță astăzi, deoarece traficul mobil este în creștere. În acest sens, în ultimii ani, containerul principal pentru cadrul șantierului a primit din ce în ce mai mult o lățime nerigidă. De exemplu, așa:

#container( latime maxima: 1320px; )

Si ce inseamna asta? Și faptul că, la nevoie, blocul va fi redus. Dacă micșorați fereastra, se va micșora și ea. În același timp, dacă rezoluția ecranului o permite, lățimea va fi de exact 1320 pixeli. Prin reducerea ferestrei, nu veți vedea derulare orizontală.

Cu toate acestea, puteți seta și lățimea minimă aici. Dacă această proprietate este scrisă într-un bloc, nu va deveni mai îngustă decât valoarea specificată. De exemplu:

#container( min-lățime: 600px; )

Dacă lățimea ferestrei devine mai mică de 600 de pixeli, blocul nu se va mai micșora și va apărea aceeași bară de defilare orizontală.

Dimensiunea în procente

Setarea valorii ca procent devine din ce în ce mai populară. Când este utilizat corect, acest lucru poate duce la afișarea excelentă a site-ului pe diferite dispozitive.

De exemplu, ați dorit să faceți o coloană laterală pe site-ul dvs. în stânga și o zonă cu conținutul principal în dreapta, unde vor fi afișate informațiile principale ale textului. De exemplu, un articol, un catalog de produse sau un subiect de forum. Mai întâi trebuie să determinați ce dimensiuni doriți să dați aproximativ acestor containere.

#sidebar( float: stânga; lățime: 28%; ) #conținut( float: dreapta; lățime: 62%; )

Drept urmare, bara laterală va primi 28% din lățimea elementului părinte (și în cazul nostru acesta este containerul general), iar blocul principal - 62%. Lățimea lor totală va fi de 90%. Vom lăsa restul de 10 pentru diverse margini externe și interne, rame etc.

Orez. 2. Blocurile de cauciuc își schimbă dimensiunea atunci când fereastra browserului este redusă

Cum afectează umplutura dimensiunile blocurilor?

Când setați lățimea unui bloc folosind proprietatea width, este posibil să nu fie valoarea finală. Cert este că astfel determinăm lățimea doar a părții care conține direct conținut. Trebuie să rețineți că în css padding mărește dimensiunea blocului, la fel ca și chenarul.

Să luăm o coloană laterală. I-am dat 28% din toată lățimea containerului. Dar pentru a preveni lipirea conținutului din bara laterală de margini, trebuie să i se ofere o umplutură. De asemenea, este posibil să doriți să adăugați un chenar la coloana laterală.

#sidebar( umplutură: 10px 20px; chenar: 2px negru solid; )

Bună ziua, dragi cititori ai site-ului blogului. Astăzi vom vorbi despre cum puteți seta dimensiunile pentru zona de conținut folosind înălțimea și lățimea și despre cum să configurați afișarea acestui conținut în cazul în care există mai mult decât poate încăpea în spațiul alocat pentru acesta (regula de depășire a css cu valori ascunse, scroll, auto).

Textul primului paragraf

Textul celui de-al doilea

Deoarece lățimea și înălțimea pentru aceste paragrafe nu sunt specificate, apoi browserul însuși le calculează în mod implicit pe baza propriei înțelegeri a valorii Auto. Drept urmare, paragrafele ocupă tot spațiul disponibil în lățime, iar în înălțime corespunde înălțimii conținutului conținut în ele.

Să facem acum prima modificare și să codificăm greu lățimea primului paragraf (width:50px):

Textul primei

Textul celui de-al doilea

În general, s-a întâmplat ceea ce s-a așteptat - dimensiunea orizontală a scăzut la valoarea specificată în width:50px, iar înălțimea paragrafului este încă formată datorită height:auto (valoarea implicită). Ca urmare, a devenit astfel încât să poată conține întregul text.

Dar acum să limităm înălțimea containerului folosind height:15px.

Drept urmare, am înțeles că textul nu mai încape în micul nostru container de paragraf și, prin urmare, a intrat în siguranță în zona vecinului său. Acesta este exact ceea ce servește pentru a controla comportamentul conținutului în astfel de situații. regula de preaplin.

Overflow înseamnă „overflow” sau, cu alte cuvinte, „overflow de conținut”. Se vorbește despre ce ar trebui să se întâmple cu conținutul dacă acesta nu se încadrează în zona (container) care i-a fost alocat.

Overflow are mai multe valori valide, dar implicit este vizibil (arata):

Acesta este motivul pentru care, în ultimul nostru exemplu, textul paragrafului de sus s-a suprapus pe cel de jos (overflow:visible a fost folosit în mod implicit - arată conținut care nu se încadrează în container). Am putea folosi cealaltă extremă - overflow:ascuns. Apoi, tot ceea ce nu se potrivește în interiorul containerului nu va fi afișat pe pagina web:

Celelalte două valori ale acestei proprietăți CSS vă permit să defilați conținut care nu se potrivește în container (am observat deja ceva similar când am studiat). Deci, scroll va afișa bare de defilare verticale și orizontale chiar dacă conținutul se încadrează în siguranță în containerul desemnat:

Dar ar fi mult mai logic să folosești valoarea Auto pentru Overflow dacă trebuie să faceți bare de defilare. În acest caz, browserul însuși va calcula când să le afișeze și pe ce axe.

De exemplu, dacă folosim overflow:auto, vom putea derula doar de-a lungul axei în care conținutul nu se încadrează în limitele containerului:

Textul primei

Textul celui de-al doilea

Pentru a rezuma, putem spune că Overflow permite destul de configurați în mod flexibil opțiunile de afișare a conținutuluiîn cazul în care iese din recipientul său. Veți avea ocazia să afișați conținutul care a rămas (vizibil), să nu îl afișați (decupat - ascuns), sau să faceți obligatoriu derularea (scrollul) sau derularea după cum este necesar (auto).

Există și variante de scriere a acestei reguli legate de CSS3, dar care sunt acceptate de toate browserele, ceea ce înseamnă că pot fi folosite în siguranță. Vorbesc despre opțiunile overflow-x și overflow-y, care vă permit să setați sau nu setați derularea pe axe individuale (x - orizontală, y - verticală).

Dacă, de exemplu, trebuie să vă asigurați că defilarea orizontală nu apare niciodată, iar defilarea verticală apare numai atunci când este necesar (dacă conținutul nu se potrivește), atunci pentru elementul HTML va trebui să specificați overflow-x:hidden și overflow- y:auto . Gata, problema se va rezolva, deoarece acest truc cu ureche este acceptat de toate browserele.

Înălțime și lățime ca procent - de ce aveți nevoie de un doctype?

Acum să vorbim despre ce se calculează lățimea specificată ca procent. Amintiți-vă, la începutul articolului am promis să ne concentrez atenția asupra acestui lucru. Ei bine, de fapt, regula lățimii CSS nu face excepție aici și, la fel ca umplutura și marginea, este calculată ca procent din dimensiunea orizontală a containerului de conținut.

Situația este ceva mai confuză cu înălțimea zonei de conținut specificată ca procent. Ar fi logic să presupunem că același lucru este valabil și pentru înălțimea containerului. Dar aici începem să întâlnim dualismul (două modele de comportament) - așa cum au făcut înainte și așa cum fac acum, conform standardelor acceptate. În acest sens, ar trebui să abordăm încă o dată subiectul modurilor de afișare, despre care am discutat mai devreme.

Din punct de vedere istoric, după adoptarea standardelor, mai existau un număr mare de documente generate după vechile reguli ale limbajului pur HTML și trebuia făcut ceva cu ele. În același timp, evolua și (a apărut un limbaj de marcare de stil și unele etichete și atribute au devenit învechite), așa că a fost necesar să se arate cumva browserului după ce standarde ar avea nevoie pentru a analiza acest cod.

Pentru a separa documentele noi (care au luat în considerare toate standardele emergente) și cele vechi (care de multe ori nu țineau cont de nimic altceva decât Html pur), Melkosoft a sugerat să folosească o mică caracteristică din limbajul XML care tocmai apăruse la acel moment. . Această caracteristică a fost o caracteristică de serviciu și se numește acum declarația doctype.

Poate arăta diferit (citiți mai multe despre asta în articolul menționat mai sus), dar această opțiune va funcționa întotdeauna:

Astfel, browserul a primit un marcator al standardelor pe care ar trebui să le folosească pentru a analiza documentul. Dacă este prezentă declarația doctype, atunci aceasta intră în modul standard. Dacă browserul nu găsește doctype pe prima linie a codului documentului (sau este scris incorect, ceea ce este identic cu absența acestuia), atunci trece la așa-numitul modul truc(modul ciudatelor).

Un document care nu are un doctype va apărea în browser ca și cum ar fi foarte vechi (antic). Dacă adăugați o declarație la același document, atunci browserul își va pierde vechimea și începe să lucreze cu codul documentului conform tuturor standardelor acceptate în prezent.

Dar conceptul de antichitate este foarte diferit. De exemplu, cât de vechi poate avea acum popularul browser Google Chrome, care a apărut abia în 2008? IE, desigur, are o istorie destul de bogată. Prin urmare, toate browserele de orice versiune vor afișa documentul fără o declarație (în modul Quirks sau trucuri) la fel ca un vechi, deoarece aceasta este versiunea care este considerată cea de bază.

De ce am vorbit atât de mult despre modurile de afișare a browserului? Dar pentru că pentru aceste două moduri, specificarea înălțimii zonei de conținut ca procent este foarte diferită în raport cu calcularea acestei înălțimi.

Setarea înălțimii (în procente) a zonei cu conținut în modul standard (atunci când tipul de document corect este specificat la începutul documentului) nu va fi deloc posibilă decât dacă înălțimea containerului în care este închis acest conținut (specificată de tu in inaltime procentuala vei fi ignorat).

Dacă eliminăm declarația doctype din codul documentului, vom vedea următoarea imagine:

Pentru modul de respectare a standardelor (o declarație este scrisă la începutul documentului), trebuie mai întâi să setați înălțimea containerului (în cazul nostru, pentru un Div, containerul va fi eticheta Body) și abia apoi browserul va gestiona corect înălțimea:100%:

Drept urmare, am ajuns să avem două abordări complet diferite atunci când setați înălțimea zonei de conținut ca procent, așa că pentru a evita problemele, vă sfătuiesc cu siguranță să specificați declarația doctype corectă la începutul tuturor documentelor dumneavoastră (pagini web). Există un alt exemplu în care diferența dintre modul de a urma standardele și modul de trucuri va fi colosală.

Dacă setați înălțimea și lățimea pentru zona de conținut pentru orice element HTML și, de asemenea, specificați umplutura și lățimea chenarului pentru această etichetă, atunci în modul Quirks (fără o declarație scrisă) în diferite browsere, totul poate fi interpretat în moduri diferite.

În vechiul browser IE 5.5, căptușeala și lățimea cadrului vor conta în interior de la dimensiunile specificate prin înălțime și lățime. Acestea. dimensiunea totală a elementului se va potrivi cu ceea ce este setat în aceste proprietăți CSS (aceasta este o schemă moștenită care nu mai este utilizată).

În alte browsere moderne, umplutura și lățimea chenarului vor fi adăugate la dimensiunile care au fost specificate în înălțime și lățime. Acestea. în acest caz (mod truc fără doctype), dimensiunile specificate inițial ale zonei de conținut vor fi extinse cu cantitatea de umplutură internă și chenar.

Ei bine, dacă scrieți o directivă în document, atunci în absolut toate browserele moderne și vechi aceste probleme cu dualitatea abordării pot fi ușor evitate. În acest caz, și în IE 5.5, umplutura și lățimea chenarului se vor adăuga la dimensiunile zonei de conținut, așa cum este cerut de standardele CSS moderne. Prin urmare, pentru a evita folosiți întotdeauna doctype.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Poziție (absolută, relativă și fixă) - modalități de a poziționa elementele HTML în CSS (reguli stânga, dreapta, sus și jos)
Float și clar în CSS - instrumente de aspect bloc
Padding, Margin and Border - setați umplutura internă și externă în CSS, precum și chenarele pentru toate părțile (sus, jos, stânga, dreapta)
Poziționarea folosind indexul Z și regula cursorului CSS pentru a schimba cursorul mouse-ului
Pentru ce este CSS, cum să conectați foile de stil în cascadă la un document HTML și sintaxa de bază a acestui limbaj
Selectoare de etichetă, clasă, Id și universale, precum și selectoare de atribute în CSS modern
Prioritățile în Css și creșterea lor datorită Important, combinarea și gruparea de selectoare, stiluri de utilizator și autor Stil diferit pentru link-urile interne și externe prin CSS
Unități de dimensiune (pixeli, Em și Ex) și reguli de moștenire în CSS
Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe pagina web

În mod implicit, elementele bloc utilizează lățimea automată. Aceasta înseamnă că elementul va fi întins pe orizontală exact atât cât există spațiu liber. Înălțimea implicită a elementelor blocului este setată automat, de exemplu. Browserul întinde zona de conținut pe verticală, astfel încât să fie afișat tot conținutul. Pentru a seta dimensiuni personalizate pentru zona de conținut a unui element, puteți utiliza proprietățile de lățime și înălțime.