.

Atributul de aliniere este destul de versatil și poate fi aplicat nu numai textului corpului, ci și titlurilor precum

... Exemplul 1 arată cum să setați alinierea într-un astfel de caz.

Exemplul 1. Alinierea textului

Cum să prinzi un leu?

Metoda forței brute

Împărțim deșertul într-un număr de secțiuni elementare, a căror dimensiune coincide cu dimensiunile per total leu, dar mai mică decât dimensiunea cuștii. Mai departe, prin simpla enumerare, determinăm zona în care se află leul, ceea ce duce automat la capturarea acestuia.

Metoda dihotomiei

Împărțim deșertul în două jumătăți. Într-o parte este un leu, în cealaltă nu este. Luați jumătatea leului și împărțiți-o din nou în jumătate. Repetăm ​​acest lucru până când leul este prins.

Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Aliniați textul la dreapta și la stânga

În acest exemplu, titlul este aliniat la centrul ferestrei browser, paragraful selectat este aliniat la dreapta, iar corpul textului este aliniat la stânga.

În programe precum, de exemplu, Microsoft Word probabil că ați văzut instrumente de aliniere orizontală a textului. Puteți alinia textul la stânga sau la dreapta, la centru sau la lățime. Același lucru este valabil și în CSS - alinierea textului se face folosind proprietăți de aliniere a textuluiși valorile corespunzătoare, care sunt prezentate în tabel:

Un exemplu de scriere a unui stil:

P (alinierea textului: stânga;)

Valori la stânga, la dreapta și la centru Textul aliniat la stânga arată aproape întotdeauna bine pe paginile web și este ușor de citit. Alinierea corectă în limbile europene este de obicei folosită rar, dar nu poate fi numită complet inutilă: acest stil este util pentru design frumos legendele la fotografii sau citate, alinierea conținutului celulelor tabelului sau mici fragmente de text. Centrul valoric este adesea folosit în același scop. Valoare justificare Textul justificativ din CSS poate fi aplicat versiuni tipărite pagini, dar nu este recomandat să vă lăsați purtat de acest stil pe paginile web create pentru vizualizare pe un monitor. De ce? La prima vedere, textul justificat arată frumos și uniform, ca o coloană dintr-un ziar. Dar pentru a întinde textul în acest fel, browserul trebuie să adauge spatiu suplimentarîntre cuvinte, în urma cărora se pot forma lacune urâte în text, făcându-l greu de citit. Se întâmplă mult mai mult în programele concepute pentru a pregăti datele pentru imprimare. reglaj fin spațiere în text și, de asemenea, utilizează adesea încadrarea în cuvinte, care nu este disponibilă în multe browsere. Prin urmare, trebuie să verificați cum arată textul justificat de lățime pe paginile web și, în primul rând, să vă puneți întrebarea: este ușor de citit? Acest lucru este valabil mai ales pentru blocurile înguste de text (incl. versiuni mobile pagini). Valorile de început și de sfârșit Valorile de început și de sfârșit pentru proprietatea text-align sunt încorporate în CSS3 și funcționează la fel ca la stânga și la dreapta, dar există o diferență. Aplicând valoarea de început textului care merge de la stânga la dreapta (LTR - de la stânga la dreapta), alinierea va fi aliniată la stânga (în consecință, pentru textul care merge de la dreapta la stânga (RTL - de la dreapta la stânga) ), alinierea va fi corectă)... În mod logic, valoarea finală funcționează în sens invers (adică justifică textul LTR la dreapta și textul RTL la stânga). Aceste două valori nu sunt acceptate de unele browsere, inclusiv Internet Explorer, prin urmare, dacă nu este nevoie urgentă de a le aplica, vă recomandăm să folosiți valorile stânga și dreapta.

Capturile de ecran arată exemple de utilizare sensuri diferite pentru proprietatea CSS text-align:

Captură de ecran 1: text LTR aliniat la stânga folosind valoarea de pornire. Un aspect similar poate fi obținut cu valoarea din stânga.
Captură de ecran 2: text LTR aliniat la dreapta folosind valoarea finală. Un aspect similar poate fi obținut cu valoarea corectă.
Captura de ecran 3: Alinierea textului în lățime. Cu tipărire mică și lățime mare a paginii/bloc, această opțiune pentru alinierea textului pe o pagină web pare acceptabilă.
Captură de ecran 4: mărimea fontului și lățimea blocului redusă în comparație cu exemplul anterior. După cum puteți vedea, în text au apărut lacune urâte (subliniate cu o linie roșie).
Captura de ecran 5: Două moduri de a alinia textul în versiunea mobilă a tutorialului nostru (stânga - text-align: left, right - text-align: justify). Încercați să citiți textul din ambele coloane pentru a determina care versiune este mai confortabil de citit.

Două instrumente principale sunt adesea folosite pentru aspectul paginii - poziționareși libera circulatie (plutitoare)... Poziționarea CSS vă permite să specificați unde apare caseta unui element, iar flotarea liberă mută elementele la marginea din stânga sau din dreapta a casetei care le conține, permițând restului conținutului să se „înfășoare” în jurul acestuia.

Poziționarea și mișcarea liberă a elementelor

1. Tipuri de poziţionare

Proprietatea poziție vă permite să setați cu precizie noua poziție a casetei în raport cu locul în care ar fi în fluxul normal al documentului. În mod implicit, toate elementele sunt aranjate secvenţial unul după altul în ordinea în care sunt definite în structura documentului HTML. Proprietatea nu este moștenită.

poziţie
Sens:
static	Valoarea implicită înseamnă nicio poziționare. Elementele sunt afișate succesiv unul după altul, în ordinea în care sunt definite în documentul HTML. Folosit pentru a șterge orice altă valoare de poziționare.
relativ	Elementul poziționat relativ este deplasat din poziția sa normală în directii diferite relativ la limitele containerului părinte, iar spațiul pe care îl ocupa nu dispare. Cu toate acestea, un astfel de element se poate suprapune cu alt conținut de pe pagină. Dacă pentru un element relativ poziționat setați simultan proprietățile de sus și de jos sau de la stânga și la dreapta, atunci în primul caz va funcționa numai sus, în al doilea - stânga. Poziționarea relativă vă permite să setați indexul z pentru un element, precum și să poziționați absolut copiii într-un bloc.
absolut	Un element poziționat absolut este eliminat complet din fluxul de documente și poziționat în raport cu limitele blocului său container (alt element sau fereastră de browser). Containerul bloc pentru un element poziționat absolut este cel mai apropiat element părinte a cărui valoare a proprietății de poziție nu este statică. Locația marginilor unui element este determinată folosind proprietățile offset. Spațiul pe care l-a ocupat un astfel de element se prăbușește ca și cum elementul nu ar exista pe pagină. Un element poziționat absolut se poate suprapune sau poate fi suprapus de alte elemente (prin proprietatea z-index). Orice element poziționat absolut generează un bloc, adică ia valoarea afișată: bloc; ...
fix	Blocează elementul în locația specificată pe pagină. Blocul-container al unui element fix este fereastra, adică elementul este întotdeauna fix în raport cu fereastra browserului și nu își schimbă poziția atunci când pagina este derulată. Elementul în sine este complet eliminat din fluxul de document principal și creat într-un flux de document nou.
iniţială	Setează valoarea proprietății la valoarea sa implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Orez. 1. Diferența dintre poziționarea statică, relativă și absolută

2. Proprietăți offset

Proprietățile descriu decalajul față de partea cea mai apropiată a blocului container. Setat pentru elementele pentru care valoarea proprietății de poziție nu este statică. Ele pot lua atât valori pozitive, cât și negative. Nu moștenit.

Pentru proprietatea de sus, valorile pozitive mută marginea superioară a elementului poziționat dedesubt, iar valorile negative se deplasează deasupra marginii superioare a blocului său container. Pentru proprietatea din stânga, valorile pozitive mută marginea elementului poziționat la dreapta, iar valorile negative mută marginea elementului poziționat la stânga. Adică, valorile pozitive mută elementul în interiorul blocului container, în timp ce valorile negative mută elementul în afara acestuia.

3. Poziţionarea în cadrul unui element

Pentru un bloc container al unui element poziționat absolut, proprietatea poziție: relativă este setată fără decalaje. Aceasta permite poziționarea elementelor într-un element container.

.wrap (padding: 10px; înălțime: 150px; poziție: relativ; fundal: # e7e6d4; text-align: right; chenar: 3px întrerupt # 645a4e;) .white (poziție: absolut; lățime: 200px; sus: 10px; stânga) : 10px; umplutură: 10px; fundal: #ffffff; chenar: 3px punctat # 312a22;)
Orez. 2. Absolut poziționare relativă

4. Probleme de poziţionare

1. Dacă lățimea sau înălțimea unui element poziționat absolut este setată la automat, atunci valoarea acestuia va fi determinată de lățimea sau înălțimea conținutului elementului. Dacă lățimea sau înălțimea este declarată în mod explicit, atunci această valoare va fi atribuită.
2. Dacă în interiorul blocului cu poziție: absolut există elemente pentru care float wrap, atunci înălțimea acestui element va fi egală cu înălțimea celui mai înalt dintre aceste elemente.
3. Pentru un element cu poziție: absolută sau poziție: fixă, nu puteți seta proprietatea float în același timp, dar pentru un element cu poziție: relativ puteți.
4. Dacă strămoșul elementului poziționat este un element bloc, atunci blocul-container este format din zona de conținut, delimitată de chenar (border). Dacă părintele este un element inline, containerul bloc este format de marginea exterioară a conținutului său. Dacă nu există niciun părinte, elementul corp este blocul container.

5. Libera circulatie a elementelor

În ordine normală, elementele bloc sunt afișate începând din partea de sus a ferestrei browserului, spre partea de jos. Proprietatea float permite oricărui element să plutească, aliniindu-l la stânga sau la dreapta paginii web sau a elementului container care îl conține. În acest caz, restul elementelor blocului îl vor ignora și elemente inline se va deplasa la dreapta sau la stânga, eliberând spațiu pentru el și curgând în jurul lui.

Orez. 3. Libera circulatie a elementelor

O cutie plutitoare își redimensionează conținutul cu umplutură și chenare. Superioare și inferioare umplutura marginii elementele plutitoare nu se prăbușesc. Proprietatea float se aplică atât elementelor bloc, cât și elementelor inline.

Marginea exterioară stângă sau dreaptă a unui element plutit, spre deosebire de elementele poziționate, nu poate fi situată la stânga (sau la dreapta) a marginii interioare a blocului său container, de exemplu. depășește limitele sale. În acest caz, dacă sunt setate margini interne pentru blocul container, atunci blocul plutitor va fi distanțat de marginea blocului container cu distanța specificată.

Proprietatea schimbă automat valoarea calculată (vizibilă în browser) a proprietății de afișare pentru a afișa: bloc pentru următoarele valori: inline, inline-block, table-row, table-row-group, table-coloana, tabel-coloană-grup , tabel-celulă, tabel-legendă, tabel-antet-grup, tabel-subsol-grup. Valoarea tabelului inline se schimbă în tabel.

Proprietatea nu are efect asupra articolelor cu afișare: flex și afișare: inline-flex.

Când utilizați proprietatea float pentru elementele bloc, asigurați-vă că setați lățimea. Făcând acest lucru, browserul va crea spațiu pentru alt conținut. Dar dacă lățimea combinată a tuturor coloanelor este mai mare decât spațiul disponibil, atunci ultimul element va coborî.

În același timp, marginile verticale ale elementelor raționalizate nu se prăbușesc cu marginile elementelor învecinate, spre deosebire de elementele bloc obișnuite.

6. Anulați elementele de ambalare

6.1. Ștergeți proprietatea

Proprietatea clear determină modul în care va fi poziționat elementul care urmează elementul plutit. Proprietatea anulează împachetarea pe una sau ambele părți ale elementului, stabilite de proprietate pluti. Pentru a preveni afișarea fundalului sau a marginilor sub elementele plutitoare, utilizați regula (depășire: ascuns;).

6.2. Ștergerea unui flux cu stiluri folosind clasa clearfix și pseudo-clasa: after

Să presupunem că aveți o cutie container care nu are lățime sau înălțime. În interiorul acestuia este plasat un bloc plutitor cu dimensiunile specificate.

.container (căptușeală: 20px; fundal: # e7e6d4; chenar: 3px punctat # 645a4e;) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; padding: 0 20px; fundal: #ffffff ; chenar: 3px punctat # 666666;) Orez. 4. „Efectul prăbușirii” blocului container

Soluţie:
Creăm clasa .clearfix și, combinată cu: după pseudo-clasa, o aplicăm blocului container.

.container (căptușeală: 20px; fundal: # e7e6d4; chenar: 3px punctat # 645a4e;) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; padding: 0 20px; fundal: #ffffff ; chenar: 3px punctat # 666666;) .clearfix: după (conținut: „”; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;)

A doua opțiune pentru curățarea fluxului:

Clearfix: după (conținut: „”; afișare: tabel; șterge: ambele;)
Orez. 5. Aplicarea unei metode de „curățare” unui bloc container care conține un element plutitor

6.3. O modalitate ușoară de a curăța un flux

Există o altă tehnică pentru curățarea fluxului pentru un element care conține elemente plutitoare, de exemplu, pentru o listă orizontală neordonată:

Ul (marja: 0; stil listă: niciunul; umplutură: 20px; fundal: # e7e6d4; overflow: automat;) li (float: stânga; lățime: calc (100% / 3 - 20px); înălțime: 50px; margin- dreapta: 20px; fundal: #ffffff; chenar: 3px punctat # 666666;) li: ultimul copil (marja-dreapta: 0;) Fig. 6. Ștergerea fluxului listei orizontale

Vlad Merjevici

Poziționarea se referă la poziția unui element într-un sistem de coordonate. Există patru tipuri de poziționare: normală, absolută, fixă ​​și relativă. În funcție de tip, care este setat prin proprietatea poziție, sistemul de coordonate se modifică și el.

Datorită combinației dintre proprietățile poziției, stânga, sus, dreapta și jos, un element poate fi suprapus unul peste altul, afișat într-un punct cu anumite coordonate, fixat într-un loc specificat, determina poziția unui element față de altul, etc. Similar altor proprietăţi Control CSS poziționarea este disponibilă prin intermediul scripturilor. Astfel, poți schimba dinamic poziția elementelor fără a reîncărca pagina, creând animații și diverse efecte.

Poziționare normală

Dacă proprietatea de poziție nu este setată pentru un element sau este statică, elementul este redat în fluxul documentului ca de obicei. Cu alte cuvinte, elementele sunt afișate pe pagină în ordinea în care intră cod sursa HTML.

Proprietățile stânga, sus, dreapta, jos, dacă sunt specificate, sunt ignorate.

Poziționare absolută

Cu poziționarea absolută, elementul nu există în fluxul documentului și poziția sa este relativă la marginile browserului. Puteți seta acest tip prin valoarea absolută a proprietății de poziție. Coordonatele sunt specificate relativ la marginile ferestrei browser, numită „zona vizibilă” (Fig. 3.42).

Orez. 3.42. Valorile proprietăților stânga, dreapta, sus și jos atunci când sunt poziționate la absolut

Modul are următoarele caracteristici.

• Lățimea stratului, dacă nu este setată în mod explicit, este lățimea conținutului plus marjele, marginile și valorile de umplutură.
• Un strat nu își schimbă poziția inițială dacă nu are proprietăți dreapta, stânga, sus și jos.
• Proprietățile din stânga și de sus au prioritate față de proprietățile din dreapta și de jos. Dacă stânga și dreapta se contrazic reciproc, atunci valoarea dreptei este ignorată. Același lucru este valabil și pentru fund.
• Dacă stânga este setată la o valoare negativă, atunci stratul va depăși marginea din stânga a browserului și bara de defilare nu va apărea. Aceasta este o modalitate de a ascunde un element din vedere. Același lucru este valabil și pentru proprietatea de sus, doar stratul va trece de marginea de sus.
• Dacă stânga este setată la o valoare mai mare decât lățimea zonei vizibile sau dacă specificați dreapta cu valoare negativă, va aparea dungă orizontală defilare. O regulă asemănătoare functioneaza cu top, doar despre care vom vorbi dungă verticală defilare.
• Simultan, proprietățile specificate din stânga și din dreapta formează lățimea stratului, dar numai dacă lățimea nu este specificată. Merită adăugat proprietatea lățimii iar valoarea corectă va fi ignorată. Același lucru se va întâmpla cu înălțimea stratului, doar proprietățile de sus, de jos și de înălțime sunt deja implicate.
• Un element poziționat absolut se mișcă odată cu documentul pe măsură ce se derulează.

Proprietatea poziției setată la absolut poate fi utilizată pentru a crea un efect de cadru. Pe lângă poziționarea absolută, elementelor trebuie să li se atribuie proprietatea de overflow cu valoare auto... Apoi, când conținutul depășește înălțimea zonei vizibile, va apărea o bară de defilare. Înălțimea și lățimea „cadrelor” sunt generate automat de utilizare simultană proprietăți stânga, dreapta pentru lățime și sus, jos pentru înălțime (exemplul 3.31).

Exemplul 3.31. Crearea unui analog de cadre

Rezultat acest exemplu prezentată în fig. 3.43. Stratul antet este redat în flux ca de obicei, iar bara laterală și straturile de conținut sunt setate la poziționare absolută.

Orez. 3.43. Aplicarea poziționării absolute

În IE6, elementele poziționate absolut nu pot fi setate la stânga, la dreapta și la proprietățile de sus, de jos în același timp.

Poziționarea absolută este, de asemenea, folosită pentru a crea diverse efecte, de exemplu, sfaturi pentru instrumente foto. Spre deosebire de atributul titlului etichetă care afiseaza si textul tooltip, prin stiluri puteti controla aspectul textului afisat folosind script-ul.

Mai întâi, să creăm un strat gol cu ​​ID-ul floatTip și să definim stilul acestuia. Trebuie să fie necesare trei proprietăți de stil - poziție cu valoarea absolută, afișarea cu valoarea none ascunde stratul și lățime setează lățimea stratului indiciu. Restul proprietăților sunt utilizate la cererea dezvoltatorului și au scopul de a schimba aspectul stratului (exemplul 3.32).

Exemplul 3.32. Stilul balon instrument

#floatTip (poziție: absolut; / * Poziționare absolută * / lățime: 250px; / * Lățime bloc * / afișare: niciuna; / * Ascundere din afișare * / chenar: 1px solid # 000; / * Opțiuni cadru * / padding: 5px ; / * Margini în jurul textului * / familie de fonturi: sans-serif; / * Font tăiat * / dimensiunea fontului: 9pt; / * Dimensiunea fontului * / culoare: # 333; / * Culoare text * / fundal: # ECF5E4; /* Culoare de fundal */ )

Scriptul în sine constă din două funcții - moveTip () urmărește mișcarea mouse-ului și schimbă poziția stratului în conformitate cu coordonatele cursorului, iar toolTip () controlează vizibilitatea stratului și afișează textul dorit în acesta. (exemplul 3.33).

Exemplul 3.33. Script pentru ieșirea stratului

Document.onmousemove = moveTip; funcția moveTip (e) (floatTipStyle = document.getElementById ("floatTip"). stil; w = 250; // Lățimea stratului // Pentru browser IE dacă (document.all) (x = event.x + document.body.scrollLeft) ; y = event.y + document.body.scrollTop; // Pentru alte browsere) else (x = e.pageX; // Coordonata X a cursorului y = e.pageY; // Coordonata Y a cursorului) // Afișează stratul la dreapta cursorului dacă ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Pentru comoditate și versatilitate, scenariul ar trebui să fie introdus dosar separatși conectați-l prin atributul src al etichetei

Obiectiv „+”: Canon EF 24-105 f / 4L IS USM
Bliț „+”: Canon Speedlite 580 EX
Expunere „+”: 1/125
Diafragma: 5,6 ")" onmouseout = "ToolTip ()" />

Rezultatul acestui exemplu este prezentat în Fig. 3.44. Rețineți că împachetarea textului în apelul funcției toolTip () sunt pentru lizibilitate și utilizează sintaxa JavaScript. În Safari, scriptul uneori nu funcționează cu împachetarea textului, caz în care textul ar trebui să fie scris pe o singură linie. S-a adăugat proprietatea de opacitate CSS3 la stiluri, care adaugă puțină transparență layer. Înainte de IE 9.0, această proprietate nu este acceptată.

Orez. 3.44. Balon explicativ redat cu JavaScript

Poziție fixă

Poziția fixă ​​a stratului este stabilită de proprietatea poziție fixă ​​și este similară, ca efect, cu poziționarea absolută. Dar, spre deosebire de acesta, se leagă de punctul specificat din stânga, sus, dreapta și jos de pe ecran și nu își schimbă poziția atunci când derulați pagina web. O altă diferență față de absolut este că atunci când un strat fix părăsește zona vizibilă în dreapta sau sub ea, nu apar bare de defilare.

Acest tip de poziționare este folosit pentru a crea meniuri, file, titluri, în general, orice elemente care ar trebui fixate pe pagină și mereu vizibile pentru vizitator. Exemplul 3.35 arată adăugarea unui subsol, care rămâne într-un singur loc, indiferent de cantitatea de informații de pe site.

Exemplul 3.35. Subsol fix

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul exemplului este prezentat în Fig. 3.45. În măsura în care subsol fix suprapune și ascunde text, a adăugat căptușeală de jos pentru selectorul BODY. IE6 nu acceptă valoarea fixă, așa că acest exemplu nu va funcționa corect în el.

Orez. 3.45. Subsol în partea de jos a paginii

Poziționare relativă

Dacă setați proprietatea relativă a proprietății de poziție, atunci poziția elementului este relativă la poziția inițială. Adăugarea proprietăților stânga, sus, dreapta și jos modifică poziția elementului și îl decalează într-o parte sau alta față de poziția inițială. O valoare pozitivă pentru stânga specifică un offset la dreapta marginii din stânga a elementului, o valoare negativă specifică un offset la stânga. O valoare pozitivă a lui top specifică deplasarea elementului în jos (Fig. 3.46), o valoare negativă specifică deplasarea în sus.

Orez. 3.46. Valorile proprietăților din stânga și de sus pentru poziționarea relativă

Proprietățile de jos și din dreapta au efectul opus. Dacă valoarea este pozitivă, dreapta deplasează elementul la stânga muchiei sale drepte, dacă este negativă, îl deplasează spre dreapta (Fig. 3.47). O valoare pozitivă de jos mută elementul în sus, iar o valoare negativă îl mută în jos.

Orez. 3.47. Valorile proprietăților din dreapta și de jos pentru poziționarea relativă

Poziționarea relativă are următoarele caracteristici.

• Acest tip de poziționare nu este aplicabil elementelor de tabel precum celule, rânduri, coloane etc.
• Când elementul este deplasat în raport cu pozitia de pornire, spațiul ocupat de element rămâne gol și nu este umplut cu elemente de dedesubt sau de deasupra.

Exemplul 3.36 arată deplasarea în jos a textului titlului pentru a-i conferi un stil de scriere special.

Exemplul 3.36. Titlul textului

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Az si fagi de stiinta fontului

Fontul este un mijloc de exprimare a designului, nu o lectură banală.

Rezultatul acestui exemplu este prezentat în Fig. 3.48.

Orez. 3.48. Schimbarea textului din poziția inițială

Straturi imbricate

De obicei, poziționarea relativă în sine nu este adesea folosită, deoarece există o serie de proprietăți care îndeplinesc de fapt același rol, de exemplu, aceeași marjă. Dar combinația tipuri diferite poziționarea pentru straturi imbricate este una dintre cele mai convenabile și practice tehnici de layout. Dacă setați relativă pentru elementul părinte și absolută pentru elementul copil, atunci sistemul de coordonate și poziția se vor schimba. element copilîn acelaşi timp este indicat relativ la părintele său (Fig. 3.49).

Orez. 3.49. Valorile proprietăților din stânga, dreapta, sus și jos în straturi imbricate

Coordonatele sunt numărate de la marginea interioară a graniței; valorile câmpului nu sunt luate în considerare. V următorul exemplu textul este poziționat în colțul din dreapta jos al stratului lângă margine, ignorând proprietatea de umplutură.