Valorile înălțimii. CSS Lățime și setări de înălțime pentru setarea dimensiunilor paginilor HTML. Creând un bloc cu o înălțime care are un anumit procent din lățimea sa

Este de 1000 * 0,75 \u003d 750 pixeli. Dacă utilizatorul modifică dimensiunea ferestrei browserului, lățimea elementului corpului și, în consecință, lățimea blocului Embedded DIV se va schimba, de asemenea.

Valorile procentuale pentru lucrările de bunuri de înălțime În mod similar cu proprietatea lățimii, numai acum înălțimea este calculată în înălțimea elementului de container.

De exemplu:

În același timp, dimensiunile reale ale elementului pot fi în cele din urmă difere de cele instalate în proprietățile lățimii și înălțimii. De exemplu:

Așa cum se poate observa în captura de ecran, în realitate, valoarea proprietății lățimii - 200px - determină numai lățimea conținutului intern al elementului și spațiul al cărui lățimea este egală cu lățimea conținutului intern ( Lățimea proprietății) + Indicații interne (proprietăți de umplere) + Lățimea frontierei (proprietatea la lățimea de frontieră) + Indedere externă (proprietate marjă). Adică elementul va avea o lățime de 230 pixeli, iar lățimea blocului elementului, ținând cont de liniile externe, va fi de 250 de pixeli.

Trebuie luate în considerare calcule similare la determinarea dimensiunii elementelor.

Prin intermediul set suplimentar Proprietățile pot fi instalate dimensiuni minime și maxime:

min-lățime: lățime minimă

max-lățime: lățimea maximă

min-Înălțime: Înălțimea minimă

max-înălțime: Înălțimea maximă

Min-lățime: 200px; Lățime: 50%; Max-lățime: 300px;

În acest caz, lățimea elementului este de 50% din lățimea elementului-recipientului, dar nu poate fi mai mică de 200 de pixeli și mai mult de 300 de pixeli.

Suprascrierea lățimii blocului

Proprietatea de dimensionare a cutiei vă permite să înlocuiți dimensiunile instalate ale elementelor. Poate lua una dintre următoarele valori:

content-casetă: valoarea implicită a proprietății în care browserul pentru a determina lățimea reală și înălțimea elementelor adaugă valorile valorilor proprietăților de lățime și înălțime și a liniilor interne

box de padding: Indică browserul web că lățimea și înălțimea elementului trebuie să includă linii interne ca parte a valorii sale. De exemplu, să avem următorul stil:

Lățime: 200px; Înălțime: 100px; Marja: 10px; Padding: 10px; Frontieră: 5px solid #CCC; Culoare de fundal: #Eee; Dimensionarea casetei: cutie de padure;

Aici, lățimea reală a conținutului intern al blocului va fi egală cu 200px (lățime) - 10px (padding-stânga) - 10px (padding-dreapta) \u003d 180px.

Este demn de remarcat faptul că majoritatea browserelor moderne nu acceptă această proprietate.

cutie de frontieră: Specifică browserul web că lățimea și înălțimea elementului ar trebui să includă linii și limitele interne ca parte a valorii sale. De exemplu, să avem următorul stil:

Lățime: 200px; Înălțime: 100px; Marja: 10px; Padding: 10px; Frontieră: 5px solid #CCC; Culoare de fundal: #Eee; Dimensionarea casetei: Border-cutie;

Aici, lățimea reală a conținutului intern al blocului va fi egală cu 200px (lățime) - 10px (padding-stânga) - 10px (padding-dreapta) - 5px (lățime de margine-stânga) - 5px (lățimea dreaptă de margine ) \u003d 170px.

De exemplu, definim două blocuri care diferă numai cu valoarea proprietății de dimensionare a cutiei:

În primul caz, atunci când se determină dimensiunea blocului la proprietățile lățimii și înălțimii, se va adăuga grosimea marginii, precum și liniuțele interne și externe, astfel încât primul bloc va avea dimensiuni mari.

Înălțimea și lățimea elementului sunt valori calculate. Fiecare element al paginii web formează o zonă dreptunghiulară, care la rândul său este formată din mai multe zone - zona de conținut (conținut), zone de liniuță, zona cadrului. și domenii de teren element.

Între conținutul elementului și cadrul acestuia sunt localizate deputații Umplutură, dincolo de element - camp Margine. Zona de conținut există în fiecare element, zonele rămase sunt opționale.

Smochin. 1. Element de model bloc

1. Element de înălțime

Proprietatea de înălțime stabilește înălțimea conținutului elementului bloc și nu are niciun efect asupra elementelor minuscule ale afișajului: Inline; . Înălțimea elementelor minuscule este egală cu înălțimea conținutului lor. Valorile negative nu sunt permise. Proprietatea nu este moștenită.

Sintaxă

P (înălțime: 100px;)

2. Lățimea elementului

Proprietatea lățimii stabilește lățimea conținutului elementului bloc și nu are niciun efect asupra elementelor minuscule ale afișajului: Inline; . Lățimea elementelor minuscule este egală cu lățimea conținutului lor. Valorile negative nu sunt permise. Proprietatea nu este moștenită.

Sintaxă

P (lățime: 100px;)

3. Înălțimea și lățimea elementului absolut poziționat

Setați lățimea și înălțimea unui element de poziționare absolut poziționat: absolut; Nu este întotdeauna necesar, deoarece în acest caz, înălțimea și lățimea sunt determinate implicit prin deplasarea elementului. Dacă elementul este setat de marginea frontierei și câmpul de margine, acestea reduc dimensiunea zonei de conținut la valorile corespunzătoare.

Div (fundal: # 6A7690; poziție absolută; sus: 0, partea de jos: 0; stânga: 50%; dreapta: 0;) / * În acest caz, înălțimea elementului este de 100%, lățimea este de 50% din Blocul părinte * /
Smochin. 2. Înălțimea și lățimea elementului absolut poziționat

4. Indents ale elementului

Folosind proprietatea de padding, puteți seta liniuțele simultan pentru mai multe laturi ale elementului în ordinea următoare :. Dacă elementul are un fundal, se va aplica la liniuțe, inclusiv. Valorile negative nu sunt permise. Proprietatea nu este moștenită.

Dacă sunt specificate trei valori, de exemplu, div (padding: 10px 20px 30px;), atunci vor fi distribuite în următoarea ordine: prima valoare este linia superioară, cea de-a doua este linia dreaptă și stângă, a treia este linia inferioară.
Dacă sunt specificate două valori, de exemplu, div (padding: 10px 20px;), atunci prima va încerca linia superioară și inferioară, cea de-a doua este dreapta și stânga.
O valoare, de exemplu, div (padding: 10px;), va instala aceeași liniuță pentru toate laturile elementului.

Sintaxă

P (padding: 5px 10px 15px 10px;)

4.1. Indică pe o parte a elementului

Pentru a seta un intign numai pe o parte a elementului, trebuie să utilizați una din proprietățile de padding-top, padding-dreapta, padding-fund, padding-stânga, de exemplu:

P (padding-stânga: 10px;)

5. Domenii de element

Cele mai multe elemente sunt separate una de alte câmpuri. Proprietatea Margin este o scurtă formă de intrare a câmpurilor de teren în ordinea următoare: top, dreapta, mai jos, stânga. Utilizat în cazul în care aveți nevoie pentru a seta câmpurile din mai multe laturi, dar nu neapărat din patru. Câmpurile verticale asociate ale elementelor bloc sunt prăbușite, iar câmpurile superioare și inferioare nu au niciun efect asupra elementelor minuscule. Valorile negative sunt permise. Proprietatea nu este moștenită.

Dacă sunt specificate trei valori, de exemplu, DIV (margine: 10px 20px 30px;), atunci vor fi distribuite în următoarea ordine: prima valoare este câmpul de sus, al doilea - câmpul drept și stânga, al treilea - câmpul inferior.
Dacă sunt specificate două valori, de exemplu, DIV (margine: 10px 20px; atunci primul va încerca câmpul superior și inferior, al doilea este dreapta și stânga.
O valoare, de exemplu, div (margine: 10px;), va seta aceleași câmpuri pentru toate laturile elementului.

(Marjă: 0 auto;) Va funcționa numai dacă lățimea elementului este specificată în mod clar.

Smochin. 3. Marja: Auto; Pentru un element absolut poziționat

Sintaxă

DIV (margine: 5px 10px 2px 5px;)

5.1. Câmpuri pe o parte a elementului

Margin-top, margine-dreapta, margine-fund, margine-stânga este controlată de câmpurile corespunzătoare din fiecare parte a elementului, de exemplu:

P (margine-stânga: 10px;)

6. Limita lățimii și înălțimii

CSS acceptă, de asemenea, mai multe proprietăți asociate cu înălțimea și lățimea elementelor veb-poziția: min-înălțime, min-lățime, înălțime maximă și lățimea maximă. Aceste proprietăți vă permit să setați valoarea minimă și maximă a lățimii sau înălțimii elementului, oferind elementului posibilitatea de a umple spațiul disponibil. Proprietățile sunt adesea folosite pentru proiectarea paginilor web adaptate. Este folosit pentru toate elementele, cu excepția articolelor mici și de masă. Veniți întotdeauna după regula principală, adică. După setarea elementului de înălțime sau lățime. Nu este moștenit.

Puteți seta dimensiuni convenționale utilizând o unitate de măsură și limitări ale dimensiunilor utilizând alte unități, de exemplu:

DIV (lățime: 400px, maximă: 50%;)

Elementul va avea o lățime de 400px numai dacă această valoare nu depășește 50% din lățimea recipientului, în caz contrar lățimea sa va fi redusă.

Cele mai multe elemente din HTML sunt de obicei atribuite o înălțime și o lățime definitivă. Setați acești parametri în CSS este destul de ușor și, ca rezultat - practic. Folosit pentru această înălțime și proprietăți de lățime deja cunoscute. Cu toate acestea, în această lecție vom vorbi în continuare despre lățimea fixă \u200b\u200bși înălțimea sau cauciucul, care este, în funcție de lățimea ferestrei însăși. Să continuăm)

lăţime

Această proprietate stabilește o lățime specifică HTML a elementului. Valoarea poate fi indicată în pixeli, procente (alte valori sunt utilizate mai rar).

Blocul meu (
Lățime: 400px; / * lățime 400 pixeli * /

}
Sau în procente:

Myblockpercent50 (
Lățime: 50%; / * lățimea de 50% din lățimea blocului sau ferestrei (dacă nu în interiorul blocului cu o lățime fixă) * /
Culoare: # F1F1F1; / * bloc gri deschis * /
}
În consecință, obținem un bloc care va fi întotdeauna jumătate de părinte.

Acum despre cele mai interesante. Lățimea are astfel de parametri care indică lățimea maximă sau minimă. Acestea sunt proprietățile min-lățime și maximă, respectiv. De asemenea, puteți specifica valori pentru ele în pixeli și în procente și în alte valori. Aceste proprietăți reprezintă baza pentru crearea de modele de cauciuc și adaptive ().

Un exemplu de design adaptiv. Uite, schimbând dimensiunile ferestrei Brazura:

Acest lucru, desigur, a alergat înainte. Dar trebuie să înțelegeți ce și de ce aveți nevoie. Da, și atingeți un rezultat frumos)

După cum ați înțeles deja, utilizați aceste proprietăți, puteți să gestionați mai flexibil elementele de pe pagină, care nu distorsionează conținutul. Cum functioneaza? Luați în considerare codul.

Bloc (
Max-lățime: 800px;
Culoare de fundal: # F1F1F1; / * bloc gri deschis * /
Padding: 20px;
}
Un bloc cu date cu o lățime părinte de 200 de pixeli va lua o valoare corespunzătoare, dar dacă blocul părinte este mai mare, de exemplu, 1000 pixeli, acesta va lua deja lățimea maximă, adică 800 de pixeli. Aceasta este, va crește în timp ce lățimea blocului părinte nu va fi de 801 pixeli și mai mult. Apoi, blocul bloc va avea întotdeauna lățimea maximă permisă de 800 de pixeli.

Înălţime

Această proprietate este responsabilă pentru înălțimea elementului. Toate aceleași potrivite pentru CSS sunt utilizate ca cantitate. Cel mai adesea același interes și pixeli.

Info (
Înălțime: 200px; / * Înălțimea blocului va fi de 200 pixeli * /
Padding: 10px; / * Repetați despre liniuțele din interiorul blocului \u003d) * /
}
Este logic, la înălțime puteți specifica valorile minime și maxime de înălțime pentru elementul de proprietăți min-înălțime și înălțime maxime, respectiv.

Info (
Max-înălțime: 360px; / * Înălțimea maximă a blocului * /
Min-înălțime: 120px; / * Înălțimea minimă a blocului * /
}
După cum puteți vedea, proprietățile pot fi și adesea trebuie să fie utilizate într-o pereche.
Sau combină valori:

Conținut (
Înălțime: 100%; / * Înălțimea va fi întotdeauna 100% * /
Lățime: 760px; / * Dar lățimea este fixă \u200b\u200b760 pixeli * /
}
Dacă aveți întrebări, scrieți în comentarii!

Multumesc pentru atentie! Succese în cel mai rău!)

Pentru ca obiectul să fie setat o anumită lățime și înălțime, există două proprietăți în lățime și înălțime CSS (respectiv). Cu ajutorul lor, puteți seta dimensiunile fixe ale elementelor, fie bara laterală, imagine, tabel sau orice bloc.

Caracteristicile lățimii și înălțimii de calcul

Pentru a determina lățimea sau înălțimea obiectului, puteți utiliza orice unități de măsurare a lungimii în CSS. Cel mai simplu în înțelegerea pixelilor. Dacă utilizați o intrare procentuală, țineți cont de faptul că, în acest caz, lățimea obiectului va depinde de lățimea părintelui său. Dacă nu există nimeni, atunci lățimea elementului este calculată, pe baza lățimii ferestrei browserului (atunci când utilizatorul modifică lățimea ferestrei, valoarea lățimii va fi recalculată).

Ca valoare de lățime, puteți utiliza, de asemenea, o unitate EM, care este la fel ca dimensiunea textului textului, dar numai în unitățile convenționale. De exemplu, ați instalat dimensiunea pentru Font 24px. Apoi, 1EM pentru acest element va fi egal cu 24 de pixeli și dacă specificați lățimea: 2EM, atunci lățimea va fi 2 × 24px \u003d 48 pixeli. Dacă dimensiunea fontului nu este specificată, acesta va fi moștenit.

Înălțimea înălțimii specificată în procente se calculează în același mod ca și lățimea, dar calculul se bazează pe înălțimea elementului părinte și nu pe lățimea sa. Dacă părintele lipsește, înălțimea va depinde de înălțimea ferestrei browserului.

Lățimea procentuală și înălțimea elementului copil sunt calculate pe baza dimensiunii părintelui

Ceea ce este în lățime și înălțime

Imediat merită să ne amintim că proprietățile lățimii și înălțimii au o caracteristică - ele nu includ marginea, umplutura și granița. Valoarea pe care ați setat-o \u200b\u200bpentru lățime / înălțime va însemna numai lățimea / înălțimea zonei de conținut a elementului.

Astfel, pentru a calcula, de exemplu, lățimea reală a elementului (locul pe care îl ia pe ecran), veți avea nevoie de un pic de aritmetică. Lățimea reală este suma valorilor, cum ar fi lățimea, umplutura, granița și marginea. Amintiți-vă că anterior am considerat cum arată modelul blocului CSS.

Pentru a asigura cunoștințele, arată un exemplu. Să presupunem că aveți un element cu un astfel de stil:

Lățime: 200px; Margin-stânga: 15px; Marja-dreapta: 15px; Padding-stânga: 10px; Frontieră-stânga: 3px solid # 333;

Pentru a calcula lățimea elementului real, vom efectua adăugarea:

lățime + margine-stânga + margine-dreapta + padding-stânga + frontieră-stânga \u003d 200px + 15px + 15px + 10px + 3px \u003d 243px (lățimea reală)

Proprietatea de înălțime poate fi convenabilă dacă aveți nevoie să controlați cu precizie, de exemplu, o înălțime a imaginii. Cu toate acestea, dacă un container conține text sau orice alt conținut care poate varia în înălțime, este extrem de recomandat să setați o înălțime fixă \u200b\u200bpentru container, deoarece un astfel de aspect poate duce la un rezultat neașteptat - conținutul va fi afișat pe un alt conținut .

În loc de o înălțime fixă, utilizați înălțimea: Auto - Această înregistrare înseamnă că înălțimea obiectului va fi calculată automat, în funcție de conținutul pe care îl conține.

O altă modalitate de a evita ruperea aspectului este de a utiliza overflow: înregistrarea automată. În acest caz, dacă înălțimea conținutului depășește valoarea înălțimii containerului său, browserul va adăuga o bară de defilare în container.

În următoarea lecție, veți învăța cum să înlocuiți lățimea elementului folosind o proprietate interesantă și foarte utilă.