Informații teoretice scurte. Lucruri de amintit

Descriere

Pentru a redimensiona o imagine folosind HTML, sunt furnizate atributele înălțime și lățime. Puteți utiliza valori în pixeli sau procente. Dacă este setată notația procentuală, atunci dimensiunile imaginii sunt calculate în raport cu elementul părinte - containerul în care se află eticheta . Dacă nu există niciun container părinte, fereastra browserului acționează ca container părinte. Cu alte cuvinte, width="100%" înseamnă că imaginea se va întinde pe toată lățimea paginii web. Adăugarea unui singur atribut de lățime sau înălțime păstrează raportul de aspect și raportul de aspect al imaginii. Browserul așteaptă apoi să se încarce complet imaginea pentru a determina înălțimea și lățimea inițială.

Asigurați-vă că dimensionați toate imaginile de pe pagina web. Acest lucru face ca pagina să se încarce puțin mai rapid, deoarece browserul nu trebuie să calculeze dimensiunea fiecărei imagini după ce este primită. Această afirmație este deosebit de importantă pentru imaginile plasate în interiorul unui tabel.

Lățimea și înălțimea imaginii pot fi modificate atât în ​​sus, cât și în jos. Cu toate acestea, acest lucru nu afectează în niciun fel viteza de descărcare a imaginii, deoarece dimensiunea fișierului rămâne neschimbată. Prin urmare, reduceți imaginea cu prudență, deoarece. acest lucru poate provoca confuzie în rândul cititorilor, de ce un desen atât de mic durează atât de mult să se încarce. Dar creșterea dimensiunii duce la efectul opus - dimensiunea imaginii este mare, dar fișierul este încărcat mai repede față de imaginea de aceeași dimensiune. Dar calitatea imaginii se deteriorează.

Sintaxă

HTML
XHTML

Valori

Orice număr întreg pozitiv în pixeli sau procente.

Valoare implicită

Lățimea originală a imaginii.

HTML5 IE Cr Op Sa Fx

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ă personalizați afișarea acestui conținut în cazul în care există mai mult decât poate încăpea în spațiul alocat pentru el (regula de depășire css cu valorile ascunse, scroll, auto).

Textul primului paragraf

Al doilea text

Deoarece lățimea și înălțimea pentru aceste paragrafe nu sunt setate, 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 cuprins în ele.

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

Textul primei

Al doilea text

În general, s-a întâmplat așteptatul - dimensiunea orizontală a scăzut la valoarea specificată în lățime: 50px, ei bine, înălțimea paragrafului este încă formată datorită înălțimii: auto (valoare implicită). Ca urmare, a devenit astfel încât să găzduiască întregul text.

Dar să limităm acum și înălțimea containerului cu înălțimea:15px.

Drept urmare, am înțeles că textul din containerul nostru mic de paragraf nu se mai potrivește și, prin urmare, a intrat în siguranță în zona vecinului său. Acesta servește tocmai 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”. Spune ce ar trebui să se întâmple cu conținutul dacă nu se încadrează în zona (containerul) care i-a fost atribuită.

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

De aceea, în ultimul nostru exemplu, textul paragrafului de sus a intrat în cel de jos (în mod implicit, overflow:visible a fost folosit - pentru a afișa 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 încadrează î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 alocat pentru el:

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, în cazul utilizării overflow:auto, vom putea derula doar de-a lungul axei în care conținutul nu se încadrează în limitele containerului:

Textul primei

Al doilea text

Rezumând, putem spune că Overflow permite destul de personalizați în mod flexibil opțiunile de afișare a conținutuluiîn cazul în care iese din containerul său. Veți avea ocazia să afișați conținutul care a rămas (vizibil), să nu arătați (decupat - ascuns), sau să faceți o derulare obligatorie (scroll) sau derulare după cum este necesar (auto).

Există și alte opțiuni pentru scrierea acestei reguli legate de CSS3, dar care sunt acceptate de toate browserele, ceea ce înseamnă că pot fi utilizate în siguranță. Vorbesc despre opțiunile overflow-x și overflow-y, care vă permit să setați sau nu să setați derularea de-a lungul axelor individuale (x este 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ă scrieți overflow-x: hidden and overflow- y: auto . Totul, sarcina va fi rezolvată, deoarece această simulare este acceptată de toate browserele.

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

Acum să vorbim despre ce se calculează lățimea procentuală. Amintiți-vă, la începutul articolului, am promis să ne concentrez atenția asupra acestui lucru. Ei bine, de fapt, lățimea regulii 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 puțin mai confuză cu înălțimea zonei de conținut dată ca procent. Ar fi logic să presupunem că în mod similar - de la înălțimea containerului. Dar aici tu și cu mine începem să întâlnim dualismul (două modele de comportament) - așa cum făceau înainte și așa cum fac acum, conform standardelor acceptate. În acest sens, ar trebui să atingem încă o dată subiectul modurilor de afișare și discutat mai devreme.

Din punct de vedere istoric, s-a întâmplat ca după adoptarea standardelor să mai existe un număr mare de documente formate conform vechilor reguli ale limbajului pur HTML și trebuia făcut ceva cu ele. În același timp, era și în curs de dezvoltare (limbajul de marcare a stilului ieșea în evidență și unele etichete și atribute erau depășite), 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 țineau cont de toate standardele emergente) și documentele vechi (luând adesea în considerare nimic altceva decât Html pur), Melkosoft și-a propus să folosească o mică caracteristică din limbajul XML care tocmai apăruse la acel moment. Această caracteristică era serviciu și acum se numește declarație 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 dată o declarație doctype, atunci aceasta intră în modul standard. Dacă browserul nu găsește doctype în codul de document pe prima linie (sau va fi scris incorect, ceea ce este identic cu absența sa), atunci intră în așa-numitul modul truc(modul ciudatelor).

Un document care nu are un doctype va fi afișat î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 deja patina de vechime și va începe să lucreze cu codul documentului conform tuturor standardelor acceptate în prezent.

Dar conceptul de antichitate este foarte diferit. Ce fel de antichitate, de exemplu, poate avea acum un browser popular? 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 și vechea, deoarece această versiune este considerată cea de bază.

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

Setarea înălțimii (în procente) a unei zone cu conținut în modul standard (când tipul de document corect este scris la începutul documentului) nu va fi deloc posibilă, cu excepția cazului în care înălțimea este setată undeva pentru containerul în care se află acest conținut. închis (specificat de dumneavoastră în procent de înălțime va fi ignorat).

Dacă declarația doctype este eliminată din codul documentului, atunci vom vedea următoarea imagine:

Pentru modul de urmărire a standardelor (declarația este scrisă la începutul documentului), trebuie mai întâi să setați înălțimea containerului (în cazul nostru, eticheta Body va servi ca container pentru Div) și abia apoi browserul va calcula corect înălțimea: 100%:

Drept urmare, am primit două abordări complet diferite atunci când setăm înălțimea zonei de conținut ca procent, așa că, pentru a evita probleme, vă sfătuiesc fără greș specificați declarația doctype corectă la începutul tuturor documentelor dumneavoastră (pagini web). Există un alt exemplu în care diferența dintre modul standard și modul truc este uriașă.

Dacă setați pentru orice element Html înălțimea și lățimea pentru zona de conținut și, de asemenea, specificați umplutura și lățimea cadrului (chenar) pentru această etichetă, atunci în modul Quirks (fără o declarație scrisă) în browsere diferite toate acestea pot fi interpretate în moduri diferite.

În vechiul browser IE 5.5, umplutura și lățimea chenarului vor conta în interior de la dimensiunile specificate până la înălțime și lățime. Acestea. dimensiunea totală a elementului se va potrivi cu ceea ce este specificat în acestea Proprietăți CSS(aceasta este o schemă învechită care nu mai este utilizată).

În restul browsere moderne la dimensiunile date în înălțime și lățime se vor adăuga căptușeala și lățimea chenarului. Acestea. în acest caz (mod gimmick fără doctype) dimensiunile date inițial ale zonei de conținut vor fi extinse cu cantitatea de umplutură și chenar.

Ei bine, dacă în document este scrisă o directivă, atunci în absolut toate browserele moderne și vechi aceste probleme cu dualitatea abordării pot fi deja evitate cu ușurință. În acest caz, și în IE 5.5, cantitatea de umplutură și lățimea chenarului va fi adăugată la dimensiunea zonei de conținut, așa cum este cerut de standardele CSS moderne. Prin urmare, pentru a evita scrie întotdeauna doctype.

Multă baftă! Ne vedem curând pe site-ul paginilor blogului

S-ar putea să fiți interesat

Poziție (absolută, relativă și fixă) - moduri 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 - am stabilit în CSS căptușeli interioare și exterioare, precum și chenare pentru toate părțile (sus, jos, stânga, dreapta)
Poziționarea cu 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ă document htmlși sintaxa de bază a acestui limbaj
Selectori de etichetă, clasă, ID și universal, precum și selectori de atribute în CSS modern Design diferit pentru interior și linkuri externe prin CSS
Prioritățile în Css și creșterea lor datorită Important, combinarea și gruparea de selectoare, stiluri de utilizator și autor
Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe o pagină web
Unități de dimensiune (Pixeli, Em și Ex) și moștenirea regulilor în CSS

Buna ziua, draga cititorule.

Aceasta este a unsprezecea lecție învăţarea CSS. În această lecție, vom lua în considerare doar două proprietăți simple, dar importante. Aceste proprietăți sunt responsabile pentru înălțimea și lățimea blocului.

Înainte de a studia această lecție, parcurgeți lecțiile anterioare:

Teorie și practică

În ultima lecție, ne-am uitat la ce este un model de cutie, indentări interne și externe. În aceasta vom lua în considerare doar două proprietăți: înălțimea și lățimea blocului. Înălțimea în CSS este stabilită de proprietate înălţime , și proprietatea width lăţime . Să aruncăm o privire în cod pe un exemplu real (să luăm un exemplu din ultima lecție):

Și în CSS pentru fiecare bloc