Rövid elméleti információk. Dolgok, amikre emlékezni kell

Leírás

A kép HTML használatával történő átméretezéséhez rendelkezésre állnak a magasság és szélesség attribútumok. Az értékeket pixelben vagy százalékban használhatja. Ha százalékos jelölés van beállítva, akkor a kép méretei a szülőelemhez viszonyítva kerülnek kiszámításra - ahhoz a tárolóhoz, ahol a címke található . Ha nincs szülőtároló, a böngészőablak szülőtárolóként működik. Más szavakkal, a width="100%" azt jelenti, hogy a kép a weboldal teljes szélességére kiterjed. Csak egy szélesség vagy magasság attribútum hozzáadása megőrzi a kép képarányát és képarányát. A böngésző ezután megvárja, amíg a kép teljesen betöltődik, hogy meghatározza a kezdeti magasságát és szélességét.

Ügyeljen arra, hogy a weboldalon található összes képet méretezze meg. Ez egy kicsit gyorsabbá teszi az oldal betöltését, mivel a böngészőnek nem kell kiszámolnia az egyes képek méretét a beérkezés után. Ez az állítás különösen fontos a táblázatban elhelyezett képek esetében.

A kép szélessége és magassága felfelé és lefelé is változtatható. Ez azonban semmilyen módon nem befolyásolja a kép letöltési sebességét, mivel a fájl mérete változatlan marad. Ezért óvatosan csökkentse a képet, mert. ez zavart okozhat az olvasókban, miért tart ilyen sokáig egy ilyen kis rajz betöltése. A méret növelése azonban az ellenkező hatáshoz vezet - a kép mérete nagy, de a fájl gyorsabban betöltődik az azonos méretű képhez képest. De a kép minősége romlik.

Szintaxis

HTML
XHTML

Értékek

Bármilyen pozitív egész szám pixelben vagy százalékban.

Alapértelmezett érték

A kép eredeti szélessége.

HTML5 IE Cr Op Sa Fx

Sziasztok, a blogoldal kedves olvasói. Ma arról fogunk beszélni, hogyan állíthatjuk be a tartalomterület méreteit magasság és szélesség segítségével, és hogyan szabhatjuk testre ennek a tartalomnak a megjelenítését abban az esetben, ha több van belőle, mint amennyi elfér a számára kijelölt helyen (css túlcsordulási szabály a rejtett értékek, görgetés, automatikus).

Első bekezdés szövege

Második szöveg

Mert ezeknek a bekezdéseknek a szélessége és magassága nincs beállítva, akkor alapértelmezés szerint a böngésző maga számítja ki ezeket az Auto érték saját értelmezése alapján. Ennek eredményeként a bekezdések szélességben minden rendelkezésükre álló helyet elfoglalnak, magasságban pedig megfelel a beléjük zárt tartalom magasságának.

Most végezzük el az első módosítást, és kódoljuk az első bekezdés szélességét (szélesség: 50 képpont):

Az első szövege

Második szöveg

Általában a várt történt - a vízszintes méret a szélességben megadott értékre csökkent: 50px, nos, a bekezdés magassága továbbra is a magasságnak köszönhetően alakul ki: auto (alapértelmezett érték). Ennek eredményeként olyan lett, hogy az egész szöveget befogadja.

De most korlátozzuk a konténer magasságát magassággal is: 15px.

Ennek eredményeként azt kaptuk, hogy a kis bekezdéstárolónk szövege már nem fér el, és ezért biztonságosan befutott a szomszéd területére. Pontosan a tartalom ilyen helyzetekben való viselkedésének szabályozására szolgál túlcsordulási szabály.

A túlcsordulás jelentése "túlcsordulás" vagy más szóval "tartalom túlcsordulás". Megmondja, hogy mi történjen a tartalommal, ha az nem fér el a hozzárendelt területen (tárolóban).

A túlcsordulásnak több érvényes értéke is van, de az alapértelmezett látható (megjelenítés):

Ez az oka annak, hogy legutóbbi példánkban a felső bekezdés szövege az alsóba futott (alapértelmezés szerint az overflow:visible -t a tárolóba nem férő tartalom megjelenítésére használtuk). Használhatnánk a másik végletet is... túlcsordulás:hidden. Ekkor minden, ami nem fért be a tárolóba, nem jelenik meg a weboldalon:

Ennek a CSS-tulajdonságnak a másik két értéke lehetővé teszi, hogy görgessen olyan tartalmat, amely nem fér bele a tárolóba (már megfigyeltünk valami hasonlót, amikor tanulmányoztuk). Tehát a görgetés akkor is megjeleníti a függőleges és vízszintes görgetősávokat, ha a tartalom biztonságosan elfér a számára kijelölt tárolóban:

De sokkal logikusabb lenne az értéket használni Auto az Overflow számára, ha görgetősávokat kell készítenie. Ebben az esetben a böngésző maga számítja ki, hogy mikor és mely tengelyeken jelenítse meg őket.

Például az overflow:auto használata esetén csak azon tengely mentén tudunk görgetni, ahol a tartalom nem fér el a tároló határain belül:

Az első szövege

Második szöveg

Összefoglalva azt mondhatjuk, hogy a túlcsordulás meglehetősen megengedi rugalmasan testreszabhatja a tartalom megjelenítési beállításait abban az esetben, ha kimászik a tartályából. Lehetősége lesz a kihagyott tartalom megjelenítésére (látható), nem megjelenítésére (kivágás - rejtett), vagy kötelező görgetés (scroll) vagy szükség szerinti görgetés (automatikus) beállítására.

Ennek a szabálynak a CSS3-hoz kapcsolódó írására más lehetőségei is vannak, de ezeket minden böngésző támogatja, ami azt jelenti, hogy biztonságosan használhatók. Az overflow-x és overflow-y opciókról beszélek, amelyek lehetővé teszik az egyes tengelyek mentén történő görgetés beállítását vagy letiltását (x vízszintes, y függőleges).

Ha például meg kell győződnie arról, hogy a vízszintes görgetés soha, és a függőleges görgetés csak szükség esetén jelenjen meg (ha a tartalom nem fér el), akkor a HTML elemhez a túlcsordulás-x szöveget kell írni: rejtett és túlcsordulás- y: auto . Minden, a feladat megoldódik, mert ezt a csalást minden böngésző támogatja.

Magasság és szélesség százalékban - miért van szükségünk a doctype-ra?

Most beszéljünk arról, hogy miből számítják ki a százalékos szélességet. Ne feledje, a cikk elején megígértem, hogy erre összpontosítjuk figyelmünket. Nos, valójában a CSS-szabály szélessége sem kivétel, és a kitöltéshez és a margóhoz hasonlóan a tartalomtároló vízszintes méretének százalékában kerül kiszámításra.

A tartalomterület százalékban megadott magasságával kicsit zavarosabb a helyzet. Logikus lenne azt feltételezni, hogy hasonlóan - a tartály magasságából. De itt kezdünk te és én találkozni a dualizmussal (két viselkedési modellel) – ahogyan tették korábban és ahogyan az elfogadott normák szerint most is. Ezzel kapcsolatban ismét meg kell érintenünk a korábban tárgyalt megjelenítési módok témáját.

Történelmileg így történt, hogy a szabványok átvétele után is nagy számban léteztek a tiszta HTML nyelv régi szabályai szerint kialakított dokumentumok, és ezekkel kellett valamit kezdeni. Ezzel párhuzamosan fejlődött is (a stílusjelölő nyelv kiemelkedett, néhány tag, attribútum pedig elavult), így valahogy meg kellett mutatni a böngészőnek, hogy milyen szabványok szerint kell elemeznie ezt a kódot.

Az új dokumentumok (amelyek figyelembe vették az összes kialakulóban lévő szabványt) és a régi dokumentumok (amelyek gyakran csak a tiszta HTML-t vettek figyelembe) szétválasztása érdekében a Melkosoft egy kis funkció használatát javasolta az akkor éppen megjelent XML nyelvből. Ez a szolgáltatás szolgáltatás volt, és most doctype deklarációnak hívják.

Lehet, hogy másképp néz ki (erről bővebben a fent említett cikkben olvashat), de ez a lehetőség mindig működik:

Így a böngésző kapott egy jelzőt arról, hogy milyen szabványokat kell használnia a dokumentum elemzéséhez. Ha doctype deklarációt adunk meg, akkor az szabványos módba kerül. Ha a böngésző az első sorában nem találja meg a dokumentumkódban a doctype-ot (vagy hibásan írják ki, ami megegyezik a hiányával), akkor az ún. trükk mód(furcsa mód).

A dokumentumtípussal nem rendelkező dokumentum úgy jelenik meg a böngészőben, mintha nagyon régi (antik) lenne. Ha ugyanahhoz a dokumentumhoz egy nyilatkozatot ad hozzá, akkor a böngésző már levetkőzi az ősi patinát, és az összes jelenleg elfogadott szabvány szerint elkezd dolgozni a dokumentumkóddal.

De az ókor fogalma egészen más. Milyen régisége lehet például most egy népszerű böngészőnek? Google Chrome, amely csak 2008-ban jelent meg? Az IE-nek természetesen meglehetősen gazdag története van. Ezért minden verziójú böngésző ugyanúgy megjeleníti a dokumentumot deklaráció nélkül (furcsa módban vagy trükkökben), mint a régi, mert ez a verzió számít az alap verziónak.

Miért beszéltem olyan sokáig a böngésző megjelenítési módjairól? Hanem azért, mert ennél a két módnál a tartalomterület magasságának (magasságának) százalékban való megadása nagyon különbözik ennek a magasságnak a kiszámításához képest.

Egy tartalommal rendelkező terület magasságának (százalékban) beállítása szabványos módban (amikor a megfelelő dokumentumtípus a dokumentum elejére van írva) egyáltalán nem lehetséges, hacsak nincs beállítva valahol a magasság ahhoz a tárolóhoz, amelyben ez a tartalom található. zárt (az Ön által megadott magasság százalékos értéke figyelmen kívül lesz hagyva).

Ha a doctype deklarációt eltávolítjuk a dokumentumkódból, akkor a következő képet fogjuk látni:

A szabványkövető módhoz (a deklaráció a dokumentum elejére van írva) először a konténer magasságát kell beállítani (esetünkben a Body címke szolgál majd a Div tárolójaként), és csak ezután a böngésző helyesen fogja kiszámítani a magasságot: 100%:

Ennek eredményeként két teljesen eltérő megközelítést kaptunk a tartalomterület magasságának százalékos beállításánál, így a problémák elkerülése érdekében azt tanácsolom, hogy adja meg a helyes doctype deklarációt minden dokumentuma (weboldal) elején. Van egy másik példa, ahol óriási a különbség a standard mód és a trükk mód között.

Ha bármely HTML-elemhez beállítja a magasságot és a szélességet a tartalomterülethez, és megadja ehhez a címkéhez a kitöltést és a keret szélességét (szegélyét), akkor furcsa módban (írásos nyilatkozat nélkül) különböző böngészők ez mind többféleképpen értelmezhető.

A régi IE 5.5 böngészőben a kitöltés és a szegély szélessége befelé számít a magasságon és szélességen keresztül megadott méretektől. Azok. az elem teljes mérete megegyezik az ezekben megadottakkal CSS tulajdonságok(ez egy elavult séma, amely már nincs használatban).

A többiben modern böngészők a párnázás és a szegély szélessége hozzáadódik a magasságban és szélességben megadott méretekhez. Azok. ebben az esetben (doctype nélküli trükk mód) a tartalomterület kezdetben megadott méretei a kitöltés és a szegély mennyiségével bővülnek.

Nos, ha egy direktíva szerepel a dokumentumban, akkor abszolút minden modern és régi böngészőben ezek a problémák a megközelítés kettősségével már könnyen elkerülhetők. Ebben az esetben és az IE 5.5-ben a tartalomterület méretéhez hozzáadódik a padding és a szegély szélessége, ahogy azt a modern CSS szabványok megkövetelik. Ezért annak elkerülése érdekében mindig írj doctype-ot.

Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán

Lehet, hogy érdekel

Pozíció (abszolút, relatív és rögzített) – a HTML-elemek elhelyezésének módjai a CSS-ben (bal, jobb, felső és alsó szabályok)
Float and clear CSS - blokk elrendezési eszközök
Kitöltés, margó és szegély - CSS belső és külső párnázást, valamint szegélyeket állítunk be minden oldalra (felső, alsó, bal, jobb)
Pozicionálás Z-index és CSS kurzorszabály segítségével az egérkurzor megváltoztatásához
Mire való a CSS, hogyan lehet a lépcsőzetes stíluslapokat csatlakoztatni html dokumentumés ennek a nyelvnek az alapvető szintaxisa
Címke-, osztály-, azonosító- és univerzális szelektorok, valamint attribútum-választók a modern CSS-ben Különböző kialakítású belső és Külső linkek CSS-en keresztül
Prioritások a Css-ben és azok növekedése a Fontos, a kiválasztók, felhasználói és szerzői stílusok kombinációja és csoportosítása miatt
Megjelenítés (blokk, nincs, soron belüli) CSS-ben – a HTML-elemek megjelenítési típusának beállítása a weboldalon
Méretegységek (pixel, Em és Ex) és szabály öröklődése a CSS-ben

Helló, kedves olvasó.

Ez a tizenegyedik lecke CSS tanulás. Ebben a leckében csak két egyszerű, de fontos tulajdonságot veszünk figyelembe. Ezek a tulajdonságok felelősek a blokk magasságáért és szélességéért.

Mielőtt tanulmányozná ezt a leckét, menjen végig az előző leckéken:

Elmélet és gyakorlat

Az utolsó leckében megnéztük, mi az a dobozmodell, belső és külső behúzások. Ebben csak két tulajdonságot veszünk figyelembe: a blokk magasságát és szélességét. A CSS-ben a magasságot a tulajdonság határozza meg magasság , és a szélesség tulajdonság szélesség . Vessünk egy pillantást a kódba egy valós példán (vegyünk egy példát az utolsó leckéből):

És CSS-ben minden blokkhoz