Në këtë artikull, ne do të analizojmë në detaje veçorinë overflow me të gjitha vlerat e saj, e cila ju lejon gjithashtu të shtoni ose hiqni një shirit lëvizës horizontal/vertikal. Me fjalë të tjera, si të krijoni shirita lëvizës.

Overflow në CSS është përgjegjëse për mënyrën se si do të duket informacioni në bllok nëse përmbajtja tejkalon lartësinë ose gjerësinë e këtij blloku. Kjo veti zbatohet vetëm për elementët e bllokut (ekrani: bllok; ose ato që fillimisht janë elementë blloku - div e kështu me radhë).

Vlerat e mundshme që mund të marrë kjo pronë (parazgjedhja është e dukshme):

• E dukshme - E gjithë përmbajtja e elementit shfaqet, edhe jashtë lartësisë dhe gjerësisë së caktuar.
• Fshehur - Shfaqet vetëm zona brenda elementit, pjesa tjetër do të fshihet.
• Lëvizja - Shiritat e lëvizjes shtohen gjithmonë.
• Auto - Shiritat e lëvizjes shtohen vetëm kur nevojitet.
• Inherit - Trashëgon vlerën e prindit.

Më shpesh, kjo veti përdoret për të hequr ose shtuar shirita lëvizës në ndonjë element. Kështu, për shembull, trajtohen kornizat në mënyrë që të mos ngjeshen në madhësinë e plotë. Ose për të futur një tekst të madh në mënyrë që të mos zërë gjysmë faqe, por të vendoset rehat në një bllok të veçantë, dhe aty mund të lëvizet dhe të lexohet. Në pjesën më të madhe, prona zgjidh problemet e shfaqjes komode të informacionit.

Në demonstrim, mund të shihni se si funksionon në praktikë secila prej vlerave të pronës:

Kodi HTML

trupi (diferenca: 0 0 0 0; mbushja: 0 0 60 px 0; madhësia e shkronjave: 16 px;) h2 (ngjyra:#CC0033;) div ( gjerësia: 200 px; /* gjerësia fikse */ lartësia: 300 px; /* fikse lartësia */ kufiri: 1 px solid #555; mbushja: 4 px; diferenca: 4 px; noton: majtas; ) .VisibleDiv (mbushje: e dukshme;) .HiddenDiv (mbushje: e fshehur;) .ScrollDiv (mbushje:lëviz;) .AutoDiv ( tejmbushje:auto;)

Vlen t'i kushtohet vëmendje faktit se në këtë rast të veçantë, blloqe me një lartësi dhe gjerësi të caktuar fikse. Kjo është e rëndësishme, për shembull, merrni parasysh opsionin kur lartësia e bllokut është vendosur në automatik:

Ne shohim që teksti në të gjitha rastet shfaqet saktë brenda bllokut, me përjashtim të një shqetësimi të vogël në rastin e lëvizjes , ku shfaqen shiritat e lëvizjes joaktive.

Por në këtë rast ekziston një rrezik i vogël, pasi është takuar me të cilin shumë nuk e kuptojnë pse lindi dhe si ta rregullojnë atë. Çështja është se nëse një bllok me tejmbushje : i dukshëm ; domethënë vlera e paracaktuar dhe përmbajtja e saj ka elemente me çdo vlerë float përveç asnjërit, atëherë e gjithë kjo nuk do të shfaqet si duhet. Për të kuptuar se çfarë është kjo situatë, merrni parasysh një shembull:

Poshtë bllokut VisibleDiv është një tjetër bllok

Nuk ka asgjë nën bllokun VisibleDiv

trupi (diferenca:0 0 0 0; mbushja: 0 0 60 px 0; madhësia e shkronjave: 16 px;) h2 (ngjyra:#CC0033;) p (lundrues: majtas;) div (gjerësia: 500 px; lartësia: automatikisht; kufiri: 1px solid #555; mbushje:4px; margjina:4px; ) .VisibleDiv (mbushje:i dukshëm;sfondi: rgba(0,255,0,0.1);) .injoroj (sfondi: rgba(0,255,0,0.6); ngjyra:# FFFFFF;pesha e shkronjave: bold;)

Në rastin e parë, është e qartë se përmbajtja me veçorinë float del jashtë bllokut dhe nuk merret parasysh prej tij gjatë përcaktimit të lartësisë së bllokut, në rastin e dytë, nën bllokun me tejmbushje : i dukshëm ; një bllok tjetër është vendosur posaçërisht dhe i lyer me një ngjyrë të ndryshme. Këta nuk janë shembujt e vetëm se si blloqe të tilla (me tejmbushje : të dukshme ; dhe lartësi : automatik ; ) mund të sillen në faqe. Kjo rregullohet duke zëvendësuar vlerën e dukshme me hidden, mbani mend se kjo veti duhet të specifikohet vetëm për blloqet me lartësi: auto; , nëse ka një lartësi fikse, atëherë ka shumë mundësi që përmbajtja thjesht të fshihet nëse është më e madhe se lartësia e dhënë.

Ja se si do të duket versioni i korrigjuar:

Gjithashtu, nuk do të keni një problem të tillë nëse blloku me tejmbushje : i dukshëm ; dhe lartësia : auto ; vendoset edhe një vlerë e vetive float. Në përgjithësi, në shumë raste, shfaqja e elementeve varet nga një grup vetish, dhe jo nga vetitë individuale.

Vetia e tejmbushjes kontrollon shfaqjen e përmbajtjes së një elementi blloku nëse nuk përshtatet plotësisht dhe shkon përtej zonës së dimensioneve të specifikuara.

informacion i shkurtër

Shënimi

	Përshkrim	Shembull
<тип>	Përcakton llojin e vlerës.	<размер>
A&&B	Vlerat duhet të dalin në rendin e specifikuar.	<размер> && <цвет>
A | B	Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet.	normale | kapele të vogla
A || B	Çdo vlerë mund të përdoret vetëm ose në kombinim me të tjerat në çdo mënyrë.	gjerësia || numëroj
	Vlerat e grupeve.	[ kulture || kryq]
*	Përsëriteni zero ose më shumë herë.	[,<время>]*
+	Përsëriteni një ose më shumë herë.	<число>+
?	Lloji, fjala ose grupi i specifikuar është opsional.	futur?
(A, B)	Përsëriteni të paktën A, por jo më shumë se B herë.	<радиус>{1,4}
#	Përsëriteni një ose më shumë herë të ndara me presje.	<время>#

×

vlerat

i dukshëm Shfaq të gjithë përmbajtjen e elementit, edhe jashtë lartësisë dhe gjerësisë së caktuar. i fshehur Shfaqet vetëm zona brenda elementit, pjesa tjetër do të fshihet. Scrollbars janë shtuar gjithmonë. Shiritat e lëvizjes automatike shtohen vetëm kur nevojitet.

Sandbox

Winnie the Pooh nuk e kundërshtonte gjithmonë një pije freskuese, veçanërisht në orën njëmbëdhjetë të mëngjesit, sepse në atë kohë mëngjesi kishte mbaruar prej kohësh dhe darka as që kishte menduar të fillonte. Dhe, sigurisht, ai u gëzua jashtëzakonisht shumë kur pa që Lepuri nxori gota dhe pjata.

div (lartësia: 80 px; tejmbushja: automatik; )

Shembull

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Zbatimi i vetive të tejmbushjes

Modeli i objektit

Nje objekt.stil.mbushje

shënim

Internet Explorer deri në versionin 7.0 përfshirëse:

• Elementet fëmijë të pozicionuar relativisht me tejmbushje të vendosur në automatik ose me lëvizje sillen sikur të ishin vendosur në pozicionin: fiks.

Internet Explorer 8:

• Kombinimi i tejmbushjes me vlerën e lëvizjes me vetitë max-height dhe float mund të shkaktojë zhdukjen e elementeve të faqes së internetit, duke lënë një ekran bosh në shfletues.
• Për një bllok që ka veçoritë float dhe overflow të vendosura në lëvizje, gjerësia e vendosur përmes veçorisë max-width shpërfillet.
• Lartësia e një kutie me një shirit lëvizës horizontal rritet me lartësinë e shiritit të lëvizjes, megjithëse specifikimi CSS specifikon që dimensionet duhet të përfshijnë gjithashtu shiritat lëvizës.

Firefox 3.6 zbaton gabimisht tejmbushjen në grupet e qelizave të tabelës ( , , ).

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim (Rekomandim) - specifikimi është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai përmbush qëllimet e tij, por kërkohet mbështetja e komunitetit të zhvillimit për zbatimin e standardit.
• Rekomandimi i propozuar ( Rekomandim i sugjeruar) - në këtë fazë, dokumenti i dorëzohet Bordit Këshillues të W3C për miratim përfundimtar.
• Drafti Punues - Një draft më i pjekur pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
• Drafti i redaktorit ( Drafti editorial) është një version draft i standardit pasi janë bërë ndryshime nga redaktorët e projektit.
• draft ( Drafti i specifikimeve) është versioni i parë draft i standardit.

×
3. Detyroni lëvizjen vertikale dhe horizontale në bllokun CSS
4. Shembull i div-së me lëvizje

Në këtë artikull, ne do të diskutojmë çështjen e krijimit të një blloku (div) të një madhësie fikse me aftësinë për të lëvizur horizontalisht dhe vertikalisht. Kjo mund të bëhet duke përdorur CSS. Përgjegjës për këtë prona e tejmbushjes.

Rreth vetive të dobishme të tejmbushjes

Pronës vërshojështë përgjegjës për shfaqjen e përmbajtjes së elementit të bllokut. Mund të aplikohet kur përmbajtja nuk përshtatet plotësisht dhe shkon përtej zonës së bllokut.

tejmbushje x- është përgjegjës për paraqitjen horizontale të përmbajtjes së elementit të bllokut.
vërshoj-y- është përgjegjës për paraqitjen vertikalisht të përmbajtjes së elementit të bllokut.

Kodi CSS

Prokrutka (
tejmbushje: auto; /* veti për të lëvizur horizontalisht. Automatikisht nëse përmbajtja është më e madhe se blloku */
}

vetitë dhe vlerat e tejmbushjes

të dukshme- shfaqet e gjithë përmbajtja e elementit, edhe jashtë gjerësisë së caktuar.
i fshehur- shfaqet vetëm zona brenda elementit, pjesa tjetër është e fshehur.
rrotulloni- i detyruar të shtojë një shirit lëvizës horizontal (y) ose horizontal (x).
auto- Shton automatikisht një shirit lëvizës horizontal nëse blloku është më i vogël.

Konsideroni një shembull të një klase CSS. Në gjerësi dhe lartësi vendosim gjerësinë dhe lartësinë e bllokut që na nevojitet (përmbajtja e bllokut nuk do të shkojë përtej tyre), dhe veçoria e tejmbushur: auto; vendosni lëvizjen horizontale nëse është e nevojshme

Kodi CSS

Prokrutka (
gjerësia: 150 px; /* gjerësia e bllokut tonë */
lartësia: 100 px; /* lartësia e bllokut tonë */


tejmbushje: auto; /* veti për të lëvizur horizontalisht. Automatik nëse më shumë se një bllok */
}

Lëvizja e detyruar në një bllok CSS

Ju gjithashtu mund të detyroni lëvizjen në lartësi dhe gjerësi. Për ta bërë këtë çdo aks: tejmbushje-y: lëviz; (vertikale) tejmbushje-x: lëviz; (horizontale) specifikoni parametrin e lëvizjes, lëvizje e detyruar.

Kodi HTML dhe CSS

Prokrutka (
lartësia: 150 px; /* lartësia e bllokut tonë */
sfond: #fff; /* ngjyra e sfondit, e bardhë */
kufiri: 1px solid #C1C1C1; /* madhësia dhe ngjyra e kufirit të bllokut */


}

Shembull i div-së me lëvizje

Kodi HTML dhe CSS

Një nga pronat vërshoj mund të hiqet, atëherë lëvizja vetëm përgjatë një aksi do të mbetet, gjë që është mjaft e mjaftueshme.
Shikoni skenarin Për shembull më poshtë.