Unii studenți aveau o întrebare cum să procedeze în derularea blocului html. Să analizăm această întrebare simplă din diferite părți pe exemplul div cu textul pește.
Să presupunem că avem un bloc html, de exemplu, div, în care există un anumit conținut. Să vedem în ce caz va apărea defilare.
Să vedem o astfel de div (să vedem cum se face afișarea derulării în ea), a se vedea codul html al blocului de mai jos:
În mod prestabilit, blocul se va întinde până la lățimea completă a containerului și se va întinde în înălțime, în funcție de dimensiunea conținutului:
Cu toate acestea, există multe probleme, cum ar fi episodul în care se desfășoară o activitate temporară, incluzând lucrătorii și alte persoane.
Acum, să specificăm lățimea fixă și înălțimea divului html div:
FYI: Pentru lizibilitatea articolului, în lista de coduri, în loc de textul-pește, scriu ellipsa.
Cu dimensiunile fixe, comportamentul blocului este următorul: div are o dimensiune limitată, dar conținutul depășește acest aspect și este încă vizibil, atât vertical cât și orizontal, dacă există un cuvânt care nu poate fi transferat. Vedeți exemplul de mai jos:
Foarte multe versuri, cum ar fi Loremipsum dolor, se numără printre cele mai vechi, care se confruntă cu temporal incididarea lucrătorilor și a altor persoane.
Browserul redă html-ul așa cum este arătat mai sus, deoarece proprietatea de depășire a lui div este implicită. Adică, tot ceea ce depășește dimensiunea blocului - va rămâne proeminent. Să încercăm să schimbăm valoarea acestei proprietăți css ascunse și să vedem ce se întâmplă:
Foarte multe versuri, cum ar fi Loremipsum dolor, se numără printre cele mai vechi, care se confruntă cu temporal incididarea lucrătorilor și a altor persoane.
Dar, mulțumesc lui Dumnezeu, css are capacitatea de a face afișarea blocului html div în acest caz. Pentru a face acest lucru, trebuie să modificați valoarea de depășire la auto. Să vedem cum arată:
Foarte multe versuri, cum ar fi Loremipsum dolor, se numără printre cele mai vechi, care se confruntă cu temporal incididarea lucrătorilor și a altor persoane.
Valoarea proprietății de suprapunere indică faptul că browserul va afișa defilarea numai dacă este necesar, dacă nu, nu va exista nici un indiciu de defilare. Să luăm aproape tot conținutul și să vedem:
Există încă o valoare a proprietății de depășire-defilare. Acesta îi spune browserului că acest div trebuie să afișeze derularea, chiar dacă conținutul este mic. În acest caz defilare va fi pur și simplu arătat inactiv. A se vedea:
Atunci când există suficient conținut în containerul div, derularea devine activă și funcționează la fel ca în cazul mașinii automate. Vedeți un exemplu:
Foarte multe versuri, cum ar fi Loremipsum dolor, se numără printre cele mai vechi, care se confruntă cu temporal incididarea lucrătorilor și a altor persoane.
Acestea sunt toate informațiile de bază despre gestionarea derulării în html pentru un bloc div folosind css. Observați proprietățile css ale overflow-x și overflow-y (aceste proprietăți sunt implementate de CSS3). Acestea vă vor permite să controlați comportamentul div atunci când conținutul este depășit de-a lungul axelor x și y, respectiv separat.
Articole similare
Trimiteți-le prietenilor: