Începutul paginii CSS: poziționarea conținutului

Aspectul CSS a fost întotdeauna dreptunghiular. Orice linii netede sunt competența dezvoltatorului. Regulile stilului oferă suficiente opțiuni pentru a da paginii o formă netedă în rezoluția ecranului. Dar orice element al aspectului este intotdeauna un dreptunghi in care aranjarea informatiei este reglementata de regulile CSS.

Indentarea pe toate laturile este importantă pentru fiecare element de pagină atunci când este poziționat absolut, iar marginea deasupra CSS este definită în mod specific, deoarece este importantă pentru diverse elemente, în special pentru litere mici.

Reguli de bază de poziționare

Elementul de bloc are o regulă de indentare de pe laturile elementului în care este amplasată marginea, o regulă de indentare pentru elementele din interiorul acesteia (umplutură) și o lățime de margine (margine), care poate fi, de asemenea, utilizată.

O importanță deosebită o are indentarea de sus. CSS din cadrul blocului leagă regulile de indentare internă de regulile elementelor absolute și relativ poziționate din acest bloc.

Practica obișnuită a regulilor CSS: puteți să specificați în mod egal indicele din toate părțile, în perechi de sus / jos și dreapta / stânga sau pentru fiecare parte separat. De exemplu,

• margine: 10 pixeli;
• padding: 10px20px;
• padding: 10px20px30px40px.

În primul caz, elementul este indentat din părțile laterale ale containerului exterior în care este amplasat. În al doilea caz, umplutura în partea de sus și de jos este de 10px, marginea stângă și cea dreaptă sunt de 20px. În cel de-al treilea caz, dimensiunile indenturilor sunt indicate pe toate laturile: de sus, de la dreapta, de jos și de la stânga.

În toate aceste cazuri, indentare pe partea de sus a CSS este de 10 px.

Reguli care schimbă poziția elementelor

Dacă elementul de aspect nu este poziționat absolut, acesta este situat în ordinea generală de formare a paginii.

Dacă determinămliniuță în partea de sus a CSS în elementul scCurrInfo, ținta va fi atinsă și, dacă la nivelul li, nu.

În acest exemplu, utilizând regula de umplutură: 40px; necesită o reducere adecvată a normelor de lățime și înălțime la 80 de pixeli. În caz contrar, dimensiunea blocului scCurrInfo va merge în afara blocului exterior.

Dacă eliminați regula de umplutură de la definiția scCurrInfo, dar adăugați-o cu o valoare de 20px la descrierea stilului elementului de listă, indentation on. CSS nu va aplica această valoare altor părți.

Firește, această utilizare a regulii de indentare se aplică fiecărui element li.

Practica generală de formatare a conținutului

Unii dezvoltatori ating perfecțiunea introducând pagini cu elemente de bloc. Se pare că este o practică clasică - să porniți de la mese și să terminați propriul proces educațional pe blocuri.

Libertatea inerentă aspectului blocului este fascinantă, iar imaginația dezvoltatorului nu se limitează la reguli stricte: doar rândurile, numai celulele, se îmbină doar orizontal și vertical. Nimic inerent în ideile relaționale.

Între timp, tabelele, în plus față de dezavantajele evidente, există multe avantaje calitative. Prin indentarea de sus, CSS ia în considerare liniuțele din stânga, din dreapta (partea de jos este un moment special). Regulile celulelor de tabel vă permit să controlați alinierea atât pe verticală, cât și pe orizontală. Folosind stiluri de rând, combinându-le cu stiluri de celule, puteți crea vizualizări complexe de conținut.

Reprezentarea paginii aleatoare sub formă de dreptunghiuri (aspectul blocului) nu împiedică prezentarea acestuia sub forma unui tabel. Acestea sunt, de asemenea, dreptunghiuri, dar ele sunt, de asemenea, celule ale mesei, adică au propriile reguli care completează regulile blocurilor.

Poziționarea absolută

Blocați cu regula POSITION:absolut- va fi localizat într-o locație stabilită de coordonatele sale în raport cu blocul în care este localizată.

O caracteristică caracteristică a regulilor CSS este "practica este cel mai bun criteriu al adevărului" în majoritatea cazurilor, mai ales atunci când este necesară compatibilitatea cu browserul încrucișat și aspectul se face manual, este de preferat să studiezi manuale complete pentru foile de stil cascadă.

Utilizarea tabelelor conduce adesea la probleme în deplasarea conținutului celulelor. O deplasare similară în interiorul blocului nu afectează întotdeauna toate elementele. Experimentând, puteți obține rezultatul dorit. O sarcină trivială: cumPentru a elimina linia de sus, CSS nu rezolvă întotdeauna trivial.

În unele cazuri, când trebuie să introduceți elemente ale unei pagini în adâncimile unui sistem popular de gestionare a conținutului, trebuie să fiți atenți nu numai la practica experimentală, ci și să vedeți experiența colegilor.