CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
CSS ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΠ΅Ρ html-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ Π΄Π΅ΡΠ΅Π²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ΄ΡΠ»Ρ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (Ρ.Π΅. ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ ΠΈΠ· Β«ΠΏΠΎΡΠΎΠΊΠ°Β»).
Π CSS2 ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ. ΠΠΎΠ΄ΡΠ»Ρ CSS3 Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΡΡΡ:
- ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ ΡΠΈΠΏΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,
- ΡΡ Π΅ΠΌΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅),
- ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°,
- Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ.Π΄.).
Π‘Ρ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π CSS Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠ΅ΠΌΡ ΡΡ Π΅ΠΌΠ°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π±Π»ΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅
Π ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡΠ΅ΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π±Π»ΠΎΠΊ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΡΠ°Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float: left ΠΈ Π»Π΅Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float: right.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π ΠΌΠΎΠ΄Π΅Π»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ Π΅ΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ position: absolute; ΠΈ position: fixed;.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Β«Π²Π½Π΅ ΠΏΠΎΡΠΎΠΊΠ°Β» ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
1. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°(ΠΎΠ²) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (containing block). Π ΠΎΠ±ΡΠΈΡ ΡΠ»ΠΎΠ²Π°Ρ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ β ΡΡΠΎ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π ΡΠ»ΡΡΠ°Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ html ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body, ΠΊΠΎΡΠΎΡΡΠΉ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ β ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ.
- ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: static; ΠΈΠ»ΠΈ position: relative;
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: fixed; ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
- ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: absolute; ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ position: absolute/relative/fixed ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΠΊ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠ»ΡΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° padding;
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΠΊ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ;
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. - ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
2. ΠΡΠ±ΠΎΡ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π°Π»Π³ΠΎΡΠΈΡΠΌΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
position | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
static | ΠΠ»ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
relative | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠ»ΡΡΠ°ΡΡ
, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ
ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ². Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΠ°ΠΊΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². ΠΠ»ΠΈΡΠ½ΠΈΠ΅ position: relative; Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: |
absolute | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° (ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ) Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² top, right, bottom ΠΈ left. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π½Π΅ Π²Π»ΠΈΡΡ Π½Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΡΡΠΈΠ½ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΡΡΠΏΡ margin Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΡ
Π»ΠΎΠΏΡΠ²Π°ΡΡΡΡ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² Ρ position: absolute;. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΌΠΎΠ³ΡΡ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΡΡΡΡ), Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ Π±Π»ΠΎΠΊΠΎΠ². |
sticky | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π½ΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². |
fixed | Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Ρ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π’Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π ΡΡΠΎΠΌ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»ΠΎΠΊΠΈ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;
Π ΠΈΡ. 1. Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ3. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom, left
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ static. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ:
top | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ top Π·Π°Π΄Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ ΡΡΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ margin) ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½ΠΈΠΆΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΡΠΎ Π΅ΡΡΡ Π±Π»ΠΎΠΊΡ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ ΡΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ).
right | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ right ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ ΡΡΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ margin) ΡΠΌΠ΅ΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
bottom | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ bottom ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π±Π»ΠΎΠΊΠ° ΡΠΌΠ΅ΡΠ΅Π½ Π²Π²Π΅ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
left | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ left ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠΌΠ΅ΡΠ΅Π½ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ β Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
4. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±Π»ΠΎΠΊΠ°ΠΌ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅. Β«ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊΒ» ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π½Π΅ ΠΊΠΎΡΠ½Π΅ΡΡΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅ΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π±Π»ΠΎΠΊ, Π²Π½Π΅ΡΠ½ΡΡ Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ. Π’Π΅ΠΌ ΡΠ°ΠΌΡΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠΌΠ΅ΡΡΠΈΡΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄ΡΡ Π΅Π³ΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ, Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ, ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π°Ρ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Ρ Π΅Π³ΠΎ.
ΠΡΠ°Π²ΠΈΠ»Π°, ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±ΠΎΠΊΠΎΠ², ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ float.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
float | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
none | ΠΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
left | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
right | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
float: left;
float: right;
float: none;
float: inherit;
ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΡΡΠ΅ΡΠΎΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΡΠ°ΠΌΠΎΠΊ. ΠΠ΅ΡΡ Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ margin ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ ΡΡ Π»ΠΎΠΏΡΠ²Π°ΡΡΡΡ.
ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ margin, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΠΎΠ΅ (ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅) Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° display Π½Π° display: block Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ inline-table ΠΌΠ΅Π½ΡΠ΅Ρ Π½Π° table.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display: flex ΠΈ display: inline-flex. ΠΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π ΠΈΡ. 2. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²5. Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΠ΄ΠΎΠΌ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clear
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ clear ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Ρ Π±Π»ΠΎΠΊΠ°/Π±Π»ΠΎΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ»Π΅Π³Π°ΡΡ ΠΊ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π CSS2 ΠΈ CSS 2.1 ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
clear | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
none | ΠΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
left | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
right | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΡΠ°Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
both | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;
ΠΠ»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ {overflow: hidden;}.
6. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
Π CSS ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π±Π»ΠΎΠΊΠΈ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π±Π»ΠΎΠΊΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
Π ΠΈΡ. 3. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ ZΠΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄Π΅ΡΠ΅Π²ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΎΡΠΈ Z ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ»ΠΎΠΊΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ, Π° Π±Π»ΠΎΠΊΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠ»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡ ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ, ΡΡΠΎ ΠΈ Π±Π»ΠΎΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΠΌΡ Π½Π΅ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ z-index.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
z-index | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π² 0. ΠΡΠ»ΠΈ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π½ΠΎ position: fixed; ΠΈΠ»ΠΈ ΡΡΠΎ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠ»Π°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π³Π»ΡΠ±Ρ ΡΠΊΡΠ°Π½Π°. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;
6.1. ΠΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index ΠΈ position Π½Π΅ Π·Π°Π΄Π°Π½Ρ ΡΠ²Π½ΠΎ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°Π²Π΅Π½ ΠΏΠΎΡΡΠ΄ΠΊΡ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:
- ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <html>, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
- ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΠΈ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅.
- ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ float Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
- Π‘ΡΡΠΎΠΊΠΎΠ²ΡΠ΅ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ position ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΈΠ· Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ (Π΅ΡΠ»ΠΈ Π΄Π»Ρ Π½ΠΈΡ Π½Π΅ Π·Π°Π΄Π°Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π²Π»ΠΈΡΡΡΠΈΠ΅ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ β opacity, filter, transform):
- ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <html>, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ z-index.
- ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΠΈ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅.
- ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ float Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
- Π‘ΡΡΠΎΠΊΠΎΠ²ΡΠ΅ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ z-index: 0; ΠΈ z-index: auto;.
position | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ΅ΡΡΠΈΠΈ CSS
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: absolute | fixed | relative | static | inherit
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- absolute
- Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»ΠΎΠ²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅Ρ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom, ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ fixed, relative ΠΈΠ»ΠΈ absolute, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- fixed
- ΠΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ absolute, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom ΡΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ°ΡΠ·Π΅Ρ Firefox Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΈ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π² ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Opera Ρ ΠΎΡΡ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½ΠΎ ΠΎΠ½ΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- relative
- ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
- static
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ.
- inherit
- ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
background: #f0f0f0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
height: 200px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
}
.layer2 {
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
bottom: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ */
right: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src="images/girl.jpg" alt="ΠΠ΅Π²ΠΎΡΠΊΠ°" />
</div>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(«elementID»).style.position
ΠΡΠ°ΡΠ·Π΅ΡΡ
ΠΡΠ°ΡΠ·Π΅Ρ Internet Explorer 6 Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ fixed Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ. Internet Explorer Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 8.0 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ inherit.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ | WebReference
ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· Π»ΡΡΡΠΈΡ ΡΡΠΎΡΠΎΠ½ CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΡΡΠΈΠ»ΠΈ Π΄Π°ΡΡ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΡΠΌ ΠΌΡΡΠ»ΠΈΠΌΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠΎ Π²Π½ΠΎΡΠΈΡ ΡΡΡΡΠΊΡΡΡΠ½ΠΎΡΡΡ Π² Π½Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π±ΠΎΠ»Π΅Π΅ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΌ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² CSS, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ ΡΠΈΠΏΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΡ ΠΎΠ±Π»Π°ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π ΡΡΠΎΠΉ Π³Π»Π°Π²Π΅ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»ΡΡΠ°Π΅Π² ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡΒ β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΡΠ°Π·ΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· float
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ β ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ°Π·Π½ΡΠΌΠΈ ΠΏΡΡΡΠΌΠΈ.
ΠΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float Π±Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ±ΠΈΡΠ°Π΅Ρ Π΅Π³ΠΎ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π±Π·Π°ΡΡ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <img> ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float.
ΠΠΎΠ³Π΄Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΡΠΎ Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠ΄ΠΎΠΌ ΠΈΠ»ΠΈ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π΄Π²Π° ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ β ΡΡΠΎ left ΠΈ right, ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
img {
float: left;
}
float Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±ΡΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠ°ΠΏΠΊΠΎΠΉ Π²Π²Π΅ΡΡ Ρ, Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΈ ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌ Π²Π½ΠΈΠ·Ρ. Π ΠΈΠ΄Π΅Π°Π»Π΅ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <header>, <section>, <aside> ΠΈ <footer>, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² ΡΡΠΎΠΊΠ΅Β 2 Β«ΠΠ½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ HTMLΒ». ΠΠ½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <body> HTML ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π±Π΅Π· float
ΠΠ΄Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <section> ΠΈ <aside> ΡΠ²Π»ΡΡΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠ² float Π΄Π»Ρ <section> ΠΊΠ°ΠΊ left, Π° Π΄Π»Ρ <aside> ΠΊΠ°ΠΊ right, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ΠΊΠ°ΠΊ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΠ°Ρ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
section {
float: left;
}
aside {
float: right;
}
ΠΠ»Ρ ΡΠΏΡΠ°Π²ΠΊΠΈ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ Π½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ, ΡΠΎ ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π΅Π³ΠΎ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ½ΠΎΠ³Π΄Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΎΠ·Π΄Π°ΡΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΠΏΡΡΡΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° width Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΎΠΏΡΠΈΠΊΠ°ΡΠ°Π»ΠΈΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΡΠ΄ΠΎΠΌ Ρ Π΄ΡΡΠ³ΠΈΠΌ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠΈΠΆΠ΅ ΠΌΡ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΊΠΎΠ΄Π°, Π΄ΠΎΠ±Π°Π²ΠΈΠ² margin ΠΈ width Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ Π½Π°Ρ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
section {
float: left;
margin: 0 1.5%;
width: 63%;
}
aside {
float: right;
margin: 0 1.5%;
width: 30%;
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ float
float ΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ»Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΊΠΆΠ΅ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΡΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float ΠΎΠΏΠΈΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ block ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π΅ΡΡ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ display ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ inline, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ ΡΡΡΠΎΡΠ½ΡΠΉ <span>, ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π»ΡΠ±ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° height ΠΈΠ»ΠΈ width. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΊΠ°Π·Π°ΡΡ float, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π½Π° block ΠΈ ΡΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° height ΠΈΠ»ΠΈ width.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ float Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° display.
ΠΠ»Ρ Π΄Π²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ float, Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΊΠ°ΠΊ left, Π° Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠ°ΠΊ right, Π½ΠΎ Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½Π°ΠΌ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄. Π‘ΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΡ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠ΄ ΠΈΠ· ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ Π½Π°ΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ <header> ΠΈ <footer>. ΠΡΠ»ΠΈ ΠΌΡ Π²ΡΠ±ΡΠΎΡΠΈΠΌ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <aside> ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ <section>, Π½Π°Ρ HTML ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>
Π§ΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΡΠΈ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <section> Π² ΡΡΡΠΎΠΊΡ ΠΈΠ· ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π΄Π°ΡΡ float Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <section> ΠΊΠ°ΠΊ left. ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ <section> Ρ ΡΡΡΡΠΎΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΈΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ΠΎΠΌ Ρ Π΄ΡΡΠ³ΠΈΠΌ.
section {
float: left;
margin: 0 1.5%;
width: 30%;
}
ΠΠ΄Π΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π²ΡΠ΅ Ρ ΡΠ°Π²Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ margin, Π° ΡΠ°ΠΊΠΆΠ΅ Ρ float, Π·Π°Π΄Π°Π½Π½ΡΠΌ ΠΊΠ°ΠΊ left.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ float
ΠΡΠΈΡΡΠΊΠ° ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ float
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ float Π±ΡΠ»ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½ΠΎ float ΠΈ Π²ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΠΎΠΊΡΡΠ³ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ. Π₯ΠΎΡΡ ΡΡΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΈ Ρ ΡΠ΅Π»ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ½ΠΎ ΠΈΠ΄ΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π»ΠΎΠ²ΡΡΠΊΠ°ΠΌΠΈ.
ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΡΠΈΡ Π»ΠΎΠ²ΡΡΠ΅ΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΡΠ΄ΠΎΠΌ Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ. ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ, ΡΠΎ ΠΎΠ½ ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ, ΠΊΠ°ΠΊ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΡΡΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΎΠΊΡΡΠ³ ΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅.
Π§Π°ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² margin ΠΈ padding ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΡΡΡΡ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ, Π·Π°ΡΡΠ°Π²Π»ΡΡ ΠΈΡ ΡΠ»ΠΈΠ²Π°ΡΡΡΡ Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°ΡΡΠΎΠ½ΡΡΡ.
ΠΡΡΠ³Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ float. Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²ΠΎΠΊΡΡΠ³ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡΡ Π΅Π³ΠΎ ΠΈ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²ΠΎΠΊΡΡΠ³ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ ΡΠ°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ.
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ float ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ <section> ΠΈ <aside>, Π½ΠΎ Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ , ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <footer> ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΎΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²ΡΡΠ΅ Π½Π΅Π³ΠΎ, Π·Π°ΠΏΠΎΠ»Π½ΡΡ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ <footer> Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΡΡ Π±Ρ Π² ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ <section> ΠΈ <aside>, Π·Π°Π½ΠΈΠΌΠ°Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π±Π΅Π· ΠΎΡΠΈΡΡΠΊΠΈ float
Π§ΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΡ ΠΎΠ±ΠΌΠ°ΡΡΠ²Π°Π½ΠΈΡ Π²ΠΎΠΊΡΡΠ³ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠΈΡΡΠΊΡ float ΠΈ Π²Π΅ΡΠ½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π΅Ρ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ. ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΠΎΡΠΈΡΡΠΈΡΡ float, Π° Π·Π°ΡΠ΅ΠΌ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
ΠΡΠΈΡΡΠΊΠ° float
ΠΡΠΈΡΡΠΊΠ° float ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° clear, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ β left, right ΠΈ both.
div {
clear: left;
}
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ left ΠΎΡΠΈΡΠ°Π΅Ρ Π»Π΅Π²ΡΠ΅ float, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ right ΠΎΡΠΈΡΠ°Π΅Ρ ΠΏΡΠ°Π²ΡΠ΅ float. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ both, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΎΡΠΈΡΡΠΈΡ Π»Π΅Π²ΡΠ΅ ΠΈ ΠΏΡΠ°Π²ΡΠ΅ float ΠΈ ΡΠ°ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ.
ΠΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clear ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ both Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <footer>, ΡΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡΠΈΡΡΠΈΡΡ float. ΠΠ°ΠΆΠ½ΠΎ, ΡΡΠΎ clear ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° Π½Π΅ ΡΠ°Π½ΡΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π΅ΡΠ½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π΅Ρ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ.
footer {
clear: both;
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ ΠΎΡΠΈΡΡΠΊΠΎΠΉ float
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ float
ΠΠΌΠ΅ΡΡΠΎ ΠΎΡΠΈΡΡΠΊΠΈ float, Π΅ΡΡ ΠΎΠ΄Π½ΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ float. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΏΠΎΡΡΠΈ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ float Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π²ΡΠ΅ Π½Π°ΡΠΈ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ float, ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ. Π ΡΡΠΈΠ»ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΠΊΠ»Π°ΡΡ group, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π·Π΄Π΅ΡΡ:
.group::before,
.group::after {
content: "";
display: table;
}
.group::after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
ΠΠ΄Π΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Π½ΠΎ, ΠΏΠΎ ΡΡΡΠΈ, Π²ΡΡ ΡΡΠΎ CSS Π΄Π΅Π»Π°Π΅Ρ β ΠΎΡΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ group ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π² ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ.
ΠΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ, ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ::before ΠΈ ::after, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠΎΠΊΠ΅ 4, Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΡΠ΅ ΠΈ Π½ΠΈΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ group. ΠΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π±Π»ΠΎΡΠ½ΡΠΌ. ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ group ΠΎΡΠΈΡΠ°Π΅Ρ float Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ group, ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ clear ΡΠ°Π½Π΅Π΅. Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ group ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ float, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π΄ΠΎ Π½Π΅Π³ΠΎ Π½Π° ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ float ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ left ΠΈΠ»ΠΈ right. Π’Π°ΠΊΠΆΠ΅ ΡΡΠ΄Π° Π²ΠΊΠ»ΡΡΠ΅Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Ρ ΠΈΡΡΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠ³ΡΠ°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎ.
ΠΠ΄Π΅ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ΄Π°, ΡΠ΅ΠΌ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° clear: both, Π½ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ.
Π Π°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Ρ Π½Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ <section> ΠΈ <aside> ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΡΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠ΅Π±Π΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
HTML
<header>...</header>
<div>
<section>...</section>
<aside>...</aside>
</div>
<footer>...</footer>
CSS
.group::before,
.group::after {
content: "";
display: table;
}
.group::after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
section {
float: left;
margin: 0 1.5%;
width: 63%;
}
aside {
float: right;
margin: 0 1.5%;
width: 30%;
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ float
ΠΠΎΠΊΠ°Π·Π°Π½Π½Π°Ρ Π·Π΄Π΅ΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΠ° ΠΈΠ·Π²Π΅ΡΡΠ½Π° ΠΊΠ°ΠΊ Β«clearfixΒ» ΠΈ ΡΠ°ΡΡΠΎ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ°ΠΉΡΠ°Ρ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° clearfix ΠΈΠ»ΠΈ cf. ΠΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° group, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΡΡΠΏΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ Π»ΡΡΡΠ΅ Π²ΡΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
ΠΠΎΠ³Π΄Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π°Π΄Π°Π½ΠΎ float Π²Π°ΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΏΠΎΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡΠΌ ΠΎΡΠΈΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ float, ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ float ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ Π½Π΅ΠΌΠ°Π»ΠΎ Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ Π±ΠΎΠ»ΠΈ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ, Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
ΠΠ΅ΡΠ½ΡΠΌΡΡ ΠΊ ΡΠ°ΠΉΡΡ Styles Conference ΠΈ ΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π½Π° Π½ΡΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ float ΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.
- ΠΠ΅ΡΠ²ΠΎ-Π½Π°ΠΏΠ΅ΡΠ²ΠΎ, ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ float ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΡΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² clearfix Π² Π½Π°Ρ CSS. Π ΡΠ°ΠΉΠ»Π΅ main.css, ΡΡΡΡ Π½ΠΈΠΆΠ΅ Π½Π°ΡΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ ΡΠ΅ΡΠΊΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ clearfix ΠΏΠΎΠ΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° group, ΠΊΠ°ΠΊ ΠΈ ΡΠ°Π½ΡΡΠ΅.
/* ======================================== Clearfix ======================================== */ .group::before, .group::after { content: ""; display: table; } .group::after { clear: both; } .group { clear: both; *zoom: 1; }
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ float, Π΄Π°Π²Π°ΠΉΡΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅Π³ΠΎ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ <h2> Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <header> ΠΊΠ°ΠΊ left ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ ΡΠΏΡΠ°Π²Π°.
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠ»Π°ΡΡ logo ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <h2>. ΠΠ°ΡΠ΅ΠΌ Π²Π½ΡΡΡΠΈ Π½Π°ΡΠ΅Π³ΠΎ CSS Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ Π²ΡΠ±Π΅ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <h2> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ logo ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ float ΠΊΠ°ΠΊ left.
HTML
<h2> <a href="index.html">Styles Conference</a> </h2>
CSS
/* ======================================== ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ======================================== */ .logo { float: left; }
ΠΠΎΠΊΠ° ΠΌΡ Π·Π΄Π΅ΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π΄Π΅ΡΠ°Π»Π΅ΠΉ ΠΊ Π½Π°ΡΠ΅ΠΌΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ. ΠΠ°ΡΠ½ΡΠΌ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <br> ΠΈΠ»ΠΈ ΡΠ°Π·ΡΡΠ²Π° ΡΡΡΠΎΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Β«StylesΒ» ΠΈ Β«ConferenceΒ», ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π°ΡΠ΅Π³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π΄Π²ΡΡ ΡΡΡΠΎΠΊΠ°Ρ .
Π CSS Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠΎ Π²Π΅ΡΡ Ρ Π½Π°ΡΠ΅Π³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ padding, ΡΡΠΎΠ±Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ Β«Π΄ΡΡΠ°Π»Β».
HTML
<h2> <a href="index.html">Styles <br> Conference</a> </h2>
CSS
.logo { border-top: 4px solid #648880; padding: 40px 0 22px 0; float: left; }
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <h2> ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΌ, ΡΠΎ Ρ ΠΎΡΠΈΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ float. ΠΠ»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ Π΄Π»Ρ <h2> ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <header>, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ group. ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡ ΠΊ Π½Π΅ΠΌΡ ΡΡΠΈΠ»ΠΈ clearfix, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅.
<header> ... </header>
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <header> ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΡΠΌΡ, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ <footer>. ΠΠΎΠ΄ΠΎΠ±Π½ΠΎ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Ρ <header>, ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ float Π΄Π»Ρ Π½Π°ΡΠΈΡ Π°Π²ΡΠΎΡΡΠΊΠΈΡ ΠΏΡΠ°Π² ΠΊΠ°ΠΊ left Π²Π½ΡΡΡΠΈ <small> ΠΈ ΠΏΡΡΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ ΡΠΏΡΠ°Π²Π°.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <header>, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΌΡ Π½Π΅ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊΠ»Π°ΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ CSS, ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ Π΅ΠΌΡ float.
ΠΠ°ΡΠ½ΡΠΌ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° primary-footer ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <footer>. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ <footer>, ΡΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ group, ΠΏΠΎΠΊΠ° ΠΌΡ Π·Π΄Π΅ΡΡ.
<footer> ... </footer>
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ»Π°ΡΡ primary-footer ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <footer>, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΅Π»Π΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <small> Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡ Ρ ΠΎΡΠΈΠΌ Π·Π°Π΄Π°ΡΡ Π΅ΠΌΡ float ΠΊΠ°ΠΊ left. ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π² Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ main.css Π΄Π»Ρ ΡΡΠΈΠ»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Π²Π°Π»Π°.
/* ======================================== ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΠΎΠ΄Π²Π°Π» ======================================== */ .primary-footer small { float: left; }
ΠΠ»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ β Π·Π΄Π΅ΡΡ ΠΌΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <small>, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ primary-footer Ρ Π°ΡΡΠΈΠ±ΡΡΠ° class, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <footer>, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ padding ΡΠ²Π΅ΡΡ Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <footer>, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π½Π°ΠΏΡΡΠΌΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° primary-footer.
.primary-footer { padding-bottom: 44px; padding-top: 44px; }
Π‘ ΡΡΡΡΠΎΠΌ Π²ΡΠ΅Ρ ΡΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ <header> ΠΈ <footer>, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎ Π²Π½Π΅ΡΠ»ΠΈ ΠΈΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ index.html.
Π ΠΈΡ. 5.01. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ float, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <header> ΠΈ <footer> Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Styles Conference ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· inline-block
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ float, Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ±, ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΒ β ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° display Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ inline-block. ΠΠ΅ΡΠΎΠ΄ Ρ inline-block, ΠΊΠ°ΠΊ ΠΌΡ Π΅ΡΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ, Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π»ΠΈΠ½ΠΈΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ.
ΠΠ°ΠΏΠΎΠΌΠ½ΠΈΠΌ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ inline-block Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° display ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π»ΠΈΠ½ΠΈΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠΌ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ height, width, padding, border ΠΈ margin. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ inline-block ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅ΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ, Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎΠ± ΠΎΡΠΈΡΡΠΊΠ΅ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ float.
inline-block Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° Π½Π°Ρ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π°. ΠΠ°ΡΠ½ΡΠΌ ΠΌΡ, ΡΠΎΡ ΡΠ°Π½ΡΡ Π½Π°Ρ HTML ΡΠ°ΠΊΠΈΠΌ:
<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>
Π’Π΅ΠΏΠ΅ΡΡ Π²ΠΌΠ΅ΡΡΠΎ float Π΄Π»Ρ Π½Π°ΡΠΈΡ ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <section> ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Ρ Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ display Π½Π° inline-block, ΠΎΡΡΠ°Π²Π»ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin ΠΈ width ΡΠ΅, ΡΡΠΎ Π±ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°Ρ CSS Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
section {
display: inline-block;
margin: 0 1.5%;
width: 30%;
}
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠΊ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <section> Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ, ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ. ΠΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΡΠΈΡΠΈΠ½Π΅ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ margin Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅, ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠΉ, Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <section> Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ. Π§ΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <section> Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ <section>.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² inline-block Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ
Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΊΠ°ΠΊ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅, ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅. ΠΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° Π΄Π²ΡΡ ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π°Ρ , ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π²Π½ΡΡΡΠΈ HTML.
ΠΠ΅ΡΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½ΠΎΠ²ΡΠΉ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ΅Π³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <section> Π² ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠΎΠΊΠ΅, ΡΡΠΎ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ΅Π³ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <section>. ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΡ Π² ΠΈΡΠΎΠ³Π΅ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠΎΠΊΠΈ. ΠΠ°Ρ HTML ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<header>...</header>
<section>
...
</section><section>
...
</section><section>
...
</section>
<footer>...</footer>
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² HTML Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈ Π½Π΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² inline-block Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ²
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΎΡΡΠΎΠΈΡ Π² ΠΎΡΠΊΡΡΡΠΈΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡ HTML Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΡΠ΅ΠΌ Π·Π°ΠΊΡΠΎΠΉΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΠΈ Π·Π°Π²Π΅ΡΡΠ°ΡΡΡΡ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΡΠΎΠΊΠ°Ρ Π² HTML ΠΈ Β«Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΡΠ΅ΡΒ» Π»ΡΠ±ΠΎΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<header>...</header>
<section>
...
</section><!--
--><section>
...
</section><!--
--><section>
...
</section>
<footer>...</footer>
ΠΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΡΠΌ, Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ. Π― ΡΠΊΠ»ΠΎΠ½ΡΡΡΡ Π² ΠΏΠΎΠ»ΡΠ·Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ, Π½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π²Ρ Π²ΡΠ±Π΅ΡΠ΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π°Ρ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ²
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠ° Π²ΡΠ΅Π³Π΄Π° Π»ΡΡΡΠ΅ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π½Ρ Π² Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ , Π° ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΏΠΈΡΠΊΠ° ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. ΠΠ°ΠΊΠ΅ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ float ΠΈΠ»ΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΡΡΡΠ΅ ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ?
ΠΠΎΠΏΡΠΎΡ ΡΡΠΎ Π»ΡΡΡΠ΅ Π΄Π»Ρ ΡΡΡΡΠΊΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ β ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΠΈΠ»ΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΊΡΡΡ Π΄Π»Ρ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ. ΠΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ float, ΠΊΠΎΠ³Π΄Π° ΠΌΠ½Π΅ Ρ ΠΎΡΠ΅ΡΡΡ ΡΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π» Π²ΠΎΠΊΡΡΠ³ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π΄Π»Ρ ΡΠ΅Π³ΠΎ float ΠΈ Π±ΡΠ»ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ). ΠΠΎΠΎΠ±ΡΠ΅, Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΠΎ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π»Π΅Π³ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΡΡΡΠ΅ Π΄Π»Ρ Π²Π°Ρ. ΠΡΠ»ΠΈ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ Π²Ρ Π·Π½Π°ΠΊΠΎΠΌΡ Π»ΡΡΡΠ΅ ΡΠ΅ΠΌ Ρ Π΄ΡΡΠ³ΠΈΠΌ, ΡΠΎΠ³Π΄Π° Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠΉΡΠ΅ Π΅Π³ΠΎ.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π² ΡΠ°Π±ΠΎΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSSΒ β Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠ²ΠΎΠΉΡΡΠ²Π° flex- ΠΈ grid-, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. Π‘Π»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΡΡΠΈΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°ΡΠ½ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡ.
ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅
Π‘ ΡΠ²ΡΡΠ΄ΡΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ Π²Π½Π΅Π΄ΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π° Π½Π°Ρ ΡΠ°ΠΉΡ Styles Conference.
ΠΠ»Ρ ΡΠ°ΠΉΡΠ° Styles Conference ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ, ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΊΠ°ΠΊ 2/3 Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΈ 1/3 Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠΉ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠ»Π°ΡΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. ΠΡΠΈ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° ΠΌΡ Π½Π°Π·ΠΎΠ²ΡΠΌ col-1-3 Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ΅ΡΠΈ ΠΈ col-2-3 Π΄Π»Ρ Π΄Π²ΡΡ ΡΡΠ΅ΡΠ΅ΠΉ. Π ΡΠ°Π·Π΄Π΅Π»Π΅ Β«Π‘Π΅ΡΠΊΠ°Β» Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ»Π° main.css ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ Π²ΠΏΠ΅ΡΠ΅Π΄ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΈΠΌ ΡΠΈΡΠΈΠ½Ρ.
.col-1-3 { width: 33.33%; } .col-2-3 { width: 66.66%; }
ΠΡ Ρ ΠΎΡΠΈΠΌ ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π΄ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ Π½ΠΈΡ Π·Π°Π΄Π°Π½ΠΎ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π΄Π²Π° Π½ΠΎΠ²ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ display ΠΈ vertical-align.
.col-1-3, .col-2-3 { display: inline-block; vertical-align: top; }
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° CSS ΡΠ½ΠΎΠ²Π°. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π΄Π²Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° col-1-3 ΠΈ col-2-3 ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΡΡ Π·Π°ΠΏΡΡΠΎΠΉ. ΠΠ°ΠΏΡΡΠ°Ρ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π·Π° Π½Π΅ΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΠΎΡΠ»Π΅ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΈΠ΄ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ°Ρ ΡΠΈΠ³ΡΡΠ½Π°Ρ ΡΠΊΠΎΠ±ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°ΠΏΡΡΠΎΠΉ ΡΠ°Π·Π΄Π΅Π»ΡΡΡΠ΅ΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠΈΠ»Ρ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ.
ΠΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·Π±ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ padding ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅.
ΠΡΠΎ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, ΡΠΈΡΠΈΠ½Π° ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π±ΡΠ΄Π΅Ρ Π²Π΄Π²ΠΎΠ΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ. Π§ΡΠΎΠ±Ρ ΡΡΠ°Π²Π½ΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎ, ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π²ΡΠ΅ Π½Π°ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΡΠ΅ΡΠΊΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½Π΅ΠΉ ΡΠΎΡ ΠΆΠ΅ padding.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΊΠ»Π°ΡΡΠΎΠΌ grid, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π½Π°ΡΡ ΡΠ΅ΡΠΊΡ, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ padding Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ² grid, col-1-3 ΠΈ col-2-3. Π‘ Π·Π°ΠΏΡΡΡΠΌΠΈ, ΡΠ½ΠΎΠ²Π° ΡΠ°Π·Π΄Π΅Π»ΡΡΡΠΈΡ Π½Π°ΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, Π½Π°Ρ CSS Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
.grid, .col-1-3, .col-2-3 { padding-left: 15px; padding-right: 15px; }
ΠΠΎΠ³Π΄Π° ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ padding, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΡΠΌΠΈ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΏΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ grid Π²Π½ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container, ΡΠΎ ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ padding ΡΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡ Π±Ρ Π²ΠΌΠ΅ΡΡΠ΅ ΠΈ Π½Π°ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ ΡΡΠΎΠ±Ρ ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ ΠΈΠ· ΠΏΡΠ°Π²ΠΈΠ» container Ρ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ» grid. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ width (ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π½Π°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΎΡΡΠ°ΡΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π° 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ) ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ margin (ΡΡΠΎΠ±Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ grid).
ΠΡ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΠΌ ΡΡΠΎ, ΡΠ°Π·Π±ΠΈΠ²Π°Ρ Π½Π°Π±ΠΎΡ ΡΡΠ°ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ» container Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
.container, .grid { margin: 0 auto; width: 960px; } .container { padding-left: 30px; padding-right: 30px; }
Π’Π΅ΠΏΠ΅ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container ΠΈΠ»ΠΈ grid Π±ΡΠ΄Π΅Ρ 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΡ ΡΠΎΡ ΡΠ°Π½ΠΈΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ padding Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container ΠΏΡΡΡΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΅Π³ΠΎ Π² Π½ΠΎΠ²ΡΠΉ, ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ».
Π₯ΠΎΡΠΎΡΠΎ, Π²ΡΡ ΡΡΠΆΡΠ»ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ°ΡΡΡ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ΅ΡΠΊΠΈ Π·Π°Π²Π΅ΡΡΠΈΠ»ΠΈ. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π½Π°ΡΠΈΠΌ HTML ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΊΠ°ΠΊ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ.
ΠΡ Π½Π°ΡΠ½ΡΠΌ Ρ ΡΠΈΠ·Π΅ΡΠΎΠ² Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π² ΡΠ°ΠΉΠ»Π΅ index.html, Π²ΡΡΠΎΠ²Π½ΡΠ² ΠΈΡ ΠΏΠΎ ΡΡΡΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠΈΠ·Π΅ΡΡ ΠΎΠ±ΡΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ <section> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container. ΠΡ Ρ ΠΎΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ»Π°ΡΡ container Π½Π° grid ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π²Π½ΡΡΡΠΈ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
<section> ... </section>
ΠΠ°Π»Π΅Π΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ col-1-3 Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <section> Π²Π½ΡΡΡΠΈ <section> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ grid.
<section> <section> ... </section> <section> ... </section> <section> ... </section> </section>
Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΄Π°Ρ Π½Π°ΡΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ ΡΡΠΎ ΠΌΡ ΡΠ΄Π°Π»ΠΈΠ»ΠΈ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ, ΡΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄.
<section> <!-- Π‘ΠΏΠΈΠΊΠ΅ΡΡ --> <section> ... </section><!-- Π Π°ΡΠΏΠΈΡΠ°Π½ΠΈΠ΅ --><section> ... </section><!-- ΠΠ΅ΡΡΠΎ ΠΏΡΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ --><section> ... </section> </section>
ΠΠ»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ β Π² ΡΡΡΠΎΠΊΠ΅ 3 ΠΌΡ ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΡΡΠΈΠΉ ΡΠ°Π·Π΄Π΅Π» Β«Π‘ΠΏΠΈΠΊΠ΅ΡΡΒ», ΠΊΠΎΡΠΎΡΡΠΉ Π·Π° Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ. Π ΠΊΠΎΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ 7 ΠΌΡ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° </section>. ΠΠ½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, Π² ΡΡΡΠΎΠΊΠ΅ 9 ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π·Π΄Π΅Π» Β«Π Π°ΡΠΏΠΈΡΠ°Π½ΠΈΠ΅Β». ΠΠ°ΡΠ΅ΠΌ Π·Π°ΠΊΡΡΠ²Π°Π΅ΠΌ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠΎΠΊΠΈ 11, ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ <section>. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΡΡΡΠΎΠΊΠ°Ρ Ρ 13 Π΄ΠΎ 17 ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ <section>, ΠΏΡΡΠΌΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ Β«ΠΠ΅ΡΡΠΎ ΠΏΡΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡΒ». Π ΡΠ΅Π»ΠΎΠΌ, ΠΌΡ Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π»ΡΠ±ΠΎΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ ΠΆΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π°ΡΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ².
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΊΠ°ΠΊ 1/3 ΠΈ 2/3. ΠΠ°ΡΠ° Π³Π»Π°Π²Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠ°Π·Π΄Π΅Π»ΡΡ Π²ΡΠ΅ ΡΠΈΠ·Π΅ΡΡ.
Π ΠΈΡ. 5.02. ΠΠ»Π°Π²Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Styles Conference ΡΠ΅ΠΏΠ΅ΡΡ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°ΠΉΡ Styles Conference Π² Π΅Π³ΠΎ Π½ΡΠ½Π΅ΡΠ½Π΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠ°ΠΉΡΠ° Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΡΠΎΡΠΌΠΎΡΡ ΡΠ°ΠΉΡΠ° Styles Conference ΠΈΠ»ΠΈ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΠΆΠ΅Π»Π°Π΅Ρ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½ΠΎ float ΠΈΠ»ΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΎΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠΊ. ΠΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄Π°Π»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float. Π‘ΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΡΠ΄ΠΎΠ±Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΉ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°Β β top, right, bottom ΠΈ left, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π³Π΄Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΏΡΡΡΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠ°Π·Π½ΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ .
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ Π΅Π³ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ static Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ relative ΠΈΠ»ΠΈ absolute, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄Π°Π»ΡΡΠ΅.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ relative Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΎΡΡ ΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΎΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ HTML ΠΈ CSS:
HTML
<div>...</div>
<div>...</div>
<div>...</div>
CSS
div {
height: 100px;
width: 100px;
}
.offset {
left: 20px;
position: relative;
top: 20px;
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ΄Π΅ΡΡ Π΄Π»Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ offset Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΊΠ°ΠΊ relative, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡΒ β left ΠΈ top. ΠΡΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π² ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°Ρ Π΅Π³ΠΎ Π½Π° 20Β ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ Π½Π° 20Β ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΡΠ΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½, ΡΡΠΈΡΡΠ²Π°Ρ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ left ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ»ΠΊΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ top ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π·Π°ΡΠ΅ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΠΊΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ Π½ΠΈΠΌ, Π° Π½Π΅ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π²Π½ΠΈΠ·, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin ΠΈΠ»ΠΈ padding.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ absolute Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ relative ΡΠ΅ΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΡΠ΅ΡΡΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <body>. ΠΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ; Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Π½ΡΡΡΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
HTML
<section>
<div>...</div>
</section>
CSS
section {
position: relative;
}
div {
position: absolute;
right: 20px;
top: 20px;
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <section> ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ <div> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ offset Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΊΠ°ΠΊ absolute. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <section> ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π΄Π»Ρ <div>, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <section>.
ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ΅Π±Ρ. ΠΠ»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠ½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² right ΠΈ top, ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎΡΠ²ΠΈΡΡΡ Π² 20 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΡΠΏΡΠ°Π²Π° ΠΈ 20 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΡΡΡΠΈ <section>.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΠΎΠ½ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ <div> Π½Π΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π·Π°Π½ΡΡΡ ΡΡΠΎ ΠΌΠ΅ΡΡΠΎ. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² position ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π½ΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ.
Π Π΅Π·ΡΠΌΠ΅
ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² HTML ΠΈ CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ ΡΠ°Π³ΠΎΠΌ Π² ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠ·ΡΠΊΠΎΠ². ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊ ΡΡΠΎΠΌΡ Π±Π»ΠΎΡΠ½ΡΡ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΈ Π²ΠΎΡ ΠΌΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ Π΄Π²ΠΈΠΆΠ΅ΠΌΡΡ ΠΏΠΎ ΠΏΡΡΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ΅Π½ΠΈΡ Π²ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΠ»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ, Π² ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ float ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
- ΠΠ°ΠΊ ΠΎΡΠΈΡΡΠΈΡΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
- ΠΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
- ΠΠ°ΠΊ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
- ΠΠ°ΠΊ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ΅ΡΠ΅Π· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΠ΅ Π½Π°Π²ΡΠΊΠΈ Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ ΡΡΠΎΠΊΠΎΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ. Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ ΡΠ΅ΠΌΠ° β ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°!
Π Π΅ΡΡΡΡΡ ΠΈ ΡΡΡΠ»ΠΊΠΈ
ΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: Π¨ΡΠΉ Π₯ΠΎΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 11.08.2018
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠ·ΡΡΠ°Π΅ΠΌ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π° 10 ΡΠ°Π³ΠΎΠ² β ΠΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ Π±Π»ΠΎΠ³ ΡΡΠΈΠ»Π°Π½ΡΠ΅ΡΠ°
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΏΠΎΠ½ΡΡΠΈΠΉ Π² Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅. Π Π°Π·ΠΎΠ±ΡΠ°Π²ΡΠΈΡΡ Ρ Π½ΠΈΠΌ, Π²Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ ΡΡΠ°Π½Π΅Ρ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π° Π²Π΅ΡΡΡΠΊΠ° ΠΈΠ· ΡΠ°ΠΌΠ°Π½ΡΡΠ²Π° ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡ Π² ΠΎΡΠΌΡΡΠ»Π΅Π½Π½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ. ΠΡΠ°ΠΊ, ΡΠ΅ΡΡ Π² ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠΉΠ΄Π΅Ρ ΠΎ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ position ΠΈ float.
1. position: static
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (position: static), ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΡΠΎ Π΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² html-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅.
ΠΠ΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΊΠ°ΠΊΠΎΠΌΡ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π½Π΅Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠ΅.
#content{ position: static; }
2. position:relative
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (position: relative) ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°: top, bottom, left ΠΈ right, Π΄Π»Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ Π±Ρ ΠΎΠ½ ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΠΏΡΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ #content Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ·, ΠΈ Π½Π° 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π»Π΅Π²ΠΎ:
#content{ position: relative; top: 20px; left: -40px; }
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½Π° ΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ Π±Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΠ» Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π°Ρ Π±Π»ΠΎΠΊ #content, ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π»ΠΎΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ #content, Π±Π»ΠΎΠΊ #footer Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π½ΠΈΠΆΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ, #content ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½ΡΠ»ΠΈ Π΅Π³ΠΎ.
ΠΠ° Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠ°ΠΏΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π½ΠΎ, Π½Π΅ ΡΠΏΠ΅ΡΠΈΡΠ΅ Ρ Π²ΡΠ²ΠΎΠ΄Π°ΠΌΠΈ, Π΄Π°Π»Π΅Π΅ Π² ΡΡΠ°ΡΡΠ΅, Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, Π΄Π»Ρ ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
3. position: absolute
ΠΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ (position: absolute), ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Π΅ΠΌΡ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅, Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ Π±Π»ΠΎΠΊ #div-1a Π² Π²Π΅ΡΡ Π½ΠΈΠΉ, ΠΏΡΠ°Π²ΡΠΉ ΡΠ³ΠΎΠ» ΡΡΡΠ°Π½ΠΈΡΡ:
#div-1a { position:absolute; top:0; right:0; width:200px; }
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π·, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±Π»ΠΎΠΊ #div-1a Π±ΡΠ» ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ: #div-1b, #div-1c ΠΈ #footer ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΠΈΡΡ Π²ΡΡΠ΅, Π½Π° ΠΌΠ΅ΡΡΠΎ ΡΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π ΡΠ°ΠΌ Π±Π»ΠΎΠΊ #div-1a, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΡΡ ΡΠΎΡΠ½ΠΎ Π² ΠΏΡΠ°Π²ΠΎΠΌ, Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΠ³ΠΎ Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ #div-1a ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° #content. Π Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π½ΠΎΠ²Ρ Π²ΡΡΡΠΏΠ°Π΅Ρ Π² ΠΈΠ³ΡΡ.
4. position: fixed
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (position: fixed), ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π΅Π³ΠΎ ΠΎΡΠ»ΠΈΡΠΈΠ΅ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΈ Π½Π΅ Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. Π ΡΡΠΎΠΌ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ, ΠΎΠ½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
#div-1a { position:fixed; top:0; right:0; width:200px; }
Π IE Ρ position: fixed Π½Π΅ Π²ΡΠ΅ ΡΠ°ΠΊ Π³Π»Π°Π΄ΠΊΠΎ, ΠΊΠ°ΠΊ Π±Ρ Π½Π°ΠΌ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ, Π½ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ.
5. position:relative + position:absolute
ΠΠ°Π·Π½Π°ΡΠΈΠ² Π±Π»ΠΎΠΊΡ #content ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (position: relative), ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ Π±Π»ΠΎΠΊ #div-1a, Π² Π²Π΅ΡΡ Π½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Ρ Π±Π»ΠΎΠΊΠ° #content.
#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }
6. ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΠΎΠΎΡΡΠΆΠΈΠ²ΡΠΈΡΡ Π·Π½Π°Π½ΠΈΡΠΌΠΈ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΠ°Π³ΠΎΠ², ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π±Π»ΠΎΠΊ #div-1b ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΏΠ΅ΡΠ΅Π΄ Π±Π»ΠΎΠΊΠΎΠΌ #div-1a.
Π ΡΠ΅ΠΉΡΠ°Ρ Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΠ» Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π²ΠΎΠΏΡΠΎΡ: βΠ ΠΊΡΠ΄Π° ΠΆΠ΅ Π΄Π΅Π»ΠΈΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°?β. ΠΠ½ΠΈ ΡΠΊΡΡΠ»ΠΈΡΡ ΠΏΠΎΠ΄ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ.
7. ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ
ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΠ΅Π½ΠΈΠΉ β Π·Π°Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
#content { position:relative; height: 450px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π½Π°Π΅ΠΌ Π·Π°ΡΠ°Π½Π΅Π΅, ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡ, Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ , ΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΡΡΠΈΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½.
8. Float
ΠΠ»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ.
ΠΠ°Π·Π½Π°ΡΠΈΠ² Π±Π»ΠΎΠΊΡ float, ΠΌΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠΎΠ»ΠΊΠ½Π΅ΠΌ Π΅Π³ΠΎ ΠΊ ΠΏΡΠ°Π²ΠΎΠΌΡ (ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠΌΡ) ΠΊΡΠ°Ρ, Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ΅ΠΊΡΡ, Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΅Π³ΠΎ. ΠΠ±ΡΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΈΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π½ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΈΠΌΠ΅ΡΡΠΈΠΉΡΡ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ.
#div-1a { float:left; width:200px; }
9. βΠΠ»Π°Π²Π°ΡΡΠΈΠ΅β ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΡΠ»ΠΈ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ float: left, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠΎΡΠΎΠΌΡ float: left, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² ΠΏΡΠΈΠΆΠΌΠ΅ΡΡΡ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΠΈ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ.
#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }
Π’Π°ΠΊΠΆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ float, Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡ ΠΏΠΎ ΠΊΡΠ°ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
#div-1a { float:right; width:150px; } #div-1b { float:left; width:150px; }
ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π΄ΡΡΠ³Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° β ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²ΡΡ ΠΎΠ΄ΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ Π»ΠΎΠΌΠ°Ρ Π²ΡΡ Π²Π΅ΡΡΡΠΊΡ. ΠΡΠ° ΡΠ°ΠΌΠ°Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ², Ρ ΠΎΡΡ ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΠ½Π° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ.
10. ΠΡΠΈΡΡΠΊΠ° float
Π§ΠΈΡΡΠΊΡ ΡΠ»ΠΎΠ°ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. ΠΡΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈΠ΄Π΅Ρ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π΅ΠΌΡ clear: both.
#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }
ΠΠ»ΠΈ ΠΆΠ΅ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow: hidden
#content { overflow:hidden; }
Π Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π‘Π΅Π³ΠΎΠ΄Π½ΡΒ Π±ΡΠ»ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈ ΡΠ°ΠΌΡΠ΅ ΠΏΡΠΎΡΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ. Π’Π°ΠΊΠΆΠ΅, Π² ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ°ΠΌ Ρ Π²ΡΠ΅Π³Π΄Π° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΠΈΠΊΠ» ΡΡΠ°ΡΠ΅ΠΉ ΠΠ²Π°Π½Π° Π‘Π°Π³Π°Π»Π°Π΅Π²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΡΠ²ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠ½Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ.
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΠΊΡΠΈΠ½ΠΊΠ°ΡΡΠ° βLearn CSS Positioning in Ten Stepsβ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² (div) Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS.
Π§Π°ΡΡΠΎ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΠ΅ΡΠ°ΡΡ Π·Π°Π΄Π°ΡΡ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ΄.
ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΠΏΡΠΈΠ·Π²Π°Π½ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ Π² ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΠΈ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ web-ΡΡΡΠ°Π½ΠΈΡ.
ΠΠ· ΡΠ΅Π³ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΡΡΠΊΡΡΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΠ΄ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠΊΠΎΡΡΠΈ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ, Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΡΠ²Π»ΡΡΡΡΡ:
- ΠΌΠ΅ΡΠΎΠ΄ Β«FloatΒ»
- ΠΌΠ΅ΡΠΎΠ΄ Β«Inline-blockΒ»
- ΠΌΠ΅ΡΠΎΠ΄ Β«Table-cellΒ»
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°, ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
Β«ΠΠ»Ρ ΡΡΠ²ΠΊΠ°Β» ΠΈΠ»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΎΡΠΈΠΈ
ΠΡΠ΅ ΡΡΡΡΠΊΡΡΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π°:
ΠΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΠ΅ (Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅) β ΡΠΈΠΏΠ° img, span ΠΈ ΠΈΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅. Π£ Π½Π°Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΈΡ ΡΠΎΠ½ ΠΈ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈΠΌ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ.
ΠΠ»ΠΎΡΠ½ΡΠ΅ β Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠ΅ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π²ΡΠ΅Π³Π΄Π° Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ β p, h, div.
ΠΠ°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΈ Π±Π»ΠΎΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:
ΠΠ΅ΡΠΎΠ΄ Β«FloatΒ»
ΠΠ°ΠΊ ΡΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ (ΡΠΌ. Π²ΡΡΠ΅), Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Π΅ΠΌΡ ΡΠΈΡΠΈΠ½Ρ (width). ΠΠΎ ΡΡΠΎΠΌΡ, ΡΠΌΠ΅Π½ΡΡΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ div-Π°, Π² ΡΡΠ΄ΠΎΠΊ Π±Π»ΠΎΡΠΊΠΈ Π½Π΅ ΠΏΠΎΡΡΡΠΎΠΈΡΡ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠ΅Π΄ΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ²), ΠΌΠ΅ΡΠΎΠ΄ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float.
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float ΠΎΠ±ΡΠ΅Π»ΠΎ Π±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΎΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π²Π΅ΡΡΡΠΊΠΈ ΠΊ Π±Π»ΠΎΡΠ½ΠΎΠΌΡ.
Float: left (right) ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ (ΠΏΡΠ°Π²ΠΎΠΌΡ) ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠΏΡΠ°Π²Π° (ΡΠ»Π΅Π²Π°) ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΡΠ΄:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" media="all" type="text/css" href="style.css" /> </head> <body> <div>Π‘ΡΡΠΎΠΈΠΌ</div> <div>Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ</div> <div>ΡΡΠ΄</div> <div>ΠΈΠ· Π΄ΠΈΠ²ΠΎΠ²</div> </body> </html>
Π Π²Π½Π΅ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ:
div { float: left; /*ΠΠ°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅*/ line-height: 120px;/*ΠΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ + Π²Π΅ΡΡ. ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°*/ font-size: 40px; background: dodgerblue; color: white; margin-top: 60px; width: 320px; /*Π€ΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°*/ margin-right: 10px; text-align: center; /*Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ*/ }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΅ΡΡΡΠ΅ Π±Π»ΠΎΠΊΠ°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ΄ ΠΈ Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:
ΠΠ½ΠΎΠ³Π΄Π° Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π±ΡΠ²Π°Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π°Π΄ΠΏΠΈΡΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π±Π»ΠΎΠΊΠ°Ρ . ΠΠ° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΡΠ°Π±ΠΎΡΠ°Π» ΠΊΡΠΈΠ²ΠΎ. ΠΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π» ΠΊΠΎΠ΄ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ: ΠΏΡΠΎΡΠΈΡΠ°Π» Π±Π»ΠΎΠΊΠΈ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·, ΠΈ ΡΠ΄Π΅Π»Π°Π» ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΠΈΠ»ΠΈ — Π²ΡΡΠΎΠ²Π½ΡΠ» ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. Π£ΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float: right.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅ΡΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΡΠΎΡΠΊΡ:
<div></div>
Π ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΌΡ Π·Π°Π΄Π°Π²Π°Π»ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΡΡΡΡΠΏΠ° margin-right. ΠΠΎ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° Π·Π°Π΄Π°ΡΠ°: ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊΠΈ Π² ΡΡΠ΄, ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ , Π΄Π° ΠΈ Π΅ΡΠ΅ ΡΡΠΎΠ±Ρ ΠΎΡΡΡΡΠΏΡ Π±ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΡΠ½Π°ΡΡΠΆΠΈ?
ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
HTML:
<div> <!--Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΠ±Π΅ΡΡΠΊΡ-ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ --> <div>Π‘ΡΡΠΎΠΈΠΌ</div> <div>Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ</div> <div>ΡΡΠ΄</div> <div>ΠΈΠ· Π΄ΠΈΠ²ΠΎΠ²</div> </div>
CSS:
.wrap { width: 1310px;/*ΡΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π΅ΡΡΠΊΠΈ*/ margin: 0 auto;/*ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ Π΅Π΅*/ background: darkgray; height: 120px;/*ΠΠ°Π΄Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΠΎΠ±Π΅ΡΡΠΊΠΈ*/ } Β .bblock { float: left; /*ΠΠ°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅*/ line-height: 120px;/*ΠΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ + Π²Π΅ΡΡ. ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°*/ font-size: 40px; background: dodgerblue; color: white; width: 320px; /*Π€ΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°*/ margin-right: 10px; text-align: center; /*Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ*/ } .wrap :last-child { margin-right: 0px;/*Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ»Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ div-Π°*/ }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ°ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ:
ΠΡ ΡΡΠΎ ΠΆΠ΅, Π²ΡΠ΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΡΡΠ°ΡΠΈΠΉ Π½Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΡ, ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΠ±ΡΠΈΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌ.
ΠΠ°ΠΆΠ½ΠΎ!!!
- Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ. ΠΠ½Π°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ΅:
- ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅ Π²ΠΌΠ΅ΡΠ°ΡΡΠΈΠ΅ΡΡ Π±Π»ΠΎΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠΆΠΊΡ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΡΡΠΊ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-width.
- ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ !DOCTYPE Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΈΠ½Π°ΡΠ΅, ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π² IE, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², Ρ Π²Π°Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° ΠΏΠΎΡΡΠ΄ΠΊΠ° 17px (Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΠΎΠ΄ ΡΠΊΡΠΎΠ»Π» ΡΠ°Π·ΠΌΠ΅ΡΠΈΠ»ΠΈ).
- ΠΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² margin ΠΈ padding Π΄Π»Ρ body.
- Π ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ ΠΌΠ΅ΡΠΎΠ΄Π° Β«Inline-blockΒ» Π²Ρ Π½Π΅ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ Π½Π°Π»ΠΈΡΠΈΠ΅ΠΌ Π·Π°Π·ΠΎΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΏΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ margin-ΠΎΠ².
- ΠΠ»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΠΏΠΎΠ»Π΅ΠΉ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ margin ΠΈ padding.
ΠΠ΅ΡΠΎΠ΄ Β«Inline-blockΒ»
ΠΠ°ΠΊ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ°ΠΊ ΠΈ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ°Π΅ΠΌΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ. Π ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°?
ΠΡΡΡΠ΅ΡΠ°ΠΉΡΠ΅, Π³Π²ΠΎΠ·Π΄Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: inline-block.
display: inline-block Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ ΡΡΡΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ, Π½ΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π·Π°Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»Ρ, ΠΎΡΡΡΡΠΏΡ ΠΈ Ρ.Π΄.
ΠΠ»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
- Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² (padding)
- Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ
- ΠΡΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΡΡΠ»ΠΊΡ.
HTML:
<div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 1 Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ</a></p> </div> <div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 2</a></p> </div> <div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 3</a></p> </div> <div> <p><img src="./vaden-pro-logo.png" alt="" /></p> <p><a href="#">Π‘ΡΡΠ»ΠΊΠ° ΠΌΠ΅Π½Ρ 4</a></p> </div>
CSS:
.nav { display: inline-block; /*ΠΠ°Π΄Π°Π΅ΠΌ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅*/ width: 180px; /*Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°*/ background: dodgerblue; } Β .string { text-align: center; /*Π Π°Π²Π½ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ-Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ*/ }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ°ΠΊΡΡ ΠΌΠ΅Π½ΡΡΠΊΡ:
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΊΡΠΈΠ²ΠΎΠ²Π°ΡΠΎ… ΠΠΎ ΡΠ°ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΌΡ Π½Π΅ Π½Π°ΠΌΠ΅ΡΠ΅Π½Ρ, ΠΏΠΎ-ΡΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊ Π½Π°ΡΠΈΠΌ Π΄ΠΈΠ²Π°ΠΌ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ vertical-align (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠΌ. Π½ΠΈΠΆΠ΅):
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π²ΡΡΠΎΠ²Π½ΡΠ»Π°ΡΡ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ:
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½ΡΠΌ, Π½ΠΎ Ρ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π½Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π΅ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΡΠ΅Π΄Π΅Π²Ρ!!!
ΠΠ°ΠΆΠ½ΠΎ!!!
- ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ Π½Π΅Π²ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡΡ Π²Π½ΠΈΠ· (ΠΊΠ°ΠΊ Π² ΡΠ»ΡΡΠ°Π΅ float: left)
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ ΠΊΠ°ΠΊ inline-block ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»Π΅Π½ ΠΊ ΠΏΡΠΎΠ±Π΅Π»Π°ΠΌ. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ Π½ΡΠ»Π΅Π²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
margin ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π·ΠΎΡ. ΠΠ°Π·ΠΎΡ ΡΡΠΎΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ°. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΏΠΈΡΠΎΠΊ:
HTML:<ul> <li>ΠΠ°Π·ΠΎΡ</li> <li>ΠΌΠ΅ΠΆΠ΄Ρ</li> <li>Π±Π»ΠΎΠΊΠ°ΠΌΠΈ</li> </ul>
CSS:
li { display: inline-block; width: 180px; background: darkgrey; color: gold; line-height: 120px; font-size: 32px text-align: center; }
Π Π΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½Π°:
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ±ΡΠ°ΡΡ Π·Π°Π·ΠΎΡΡ:
- ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ margin:
- ΡΠΊΠ°Π·Π°ΡΡ font-size: 0 Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ font-size β 0 Π΄Π»Ρ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΠΎΠ³ΠΎ;
ul { font-size: 0px;} li {font-size: 32px;}
- Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅β¦ ΠΠ°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΡΠΊΡ
<li>ΠΠ°Π·ΠΎΡ</li><li>ΠΌΠ΅ΠΆΠ΄Ρ</li><li>Π±Π»ΠΎΠΊΠ°ΠΌΠΈ</li>
Π Π΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ· Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ°:
- ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ margin:
- ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ΄ΡΡΠ΄ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΡ Π²ΡΡΠΎΡΡ, ΡΠΎ ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ vertical-align: top. ΠΠ°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ vertical-align ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ baseline.
- ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ.
- ΠΠ»Ρ Π΄ΡΠ΅Π²Π½ΠΈΡ
Π²Π΅ΡΡΠΈΠΉ Firefox Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠΎΡΠΊΡ:
display: -moz-inline-stack;
ΠΈ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ div-ΠΎΠ±Π΅ΡΡΠΊΡ. - IE 7 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ — Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡΠΎΡΠΊΠΈ:
zoom: 1; /*Π·Π°Π΄Π°Π΅ΠΌ hasLayout*/ *display: inline; /*Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠ° β Ρ Π°ΠΊ Π΄Π»Ρ IE */ _height: 250px; /*Π² IE6 Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ min-height*/
- ΠΠ°ΠΌΠ΅ΡΡ, ΡΡΠΎ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΡΡΡΠΎΡΠΊΠΈ ΠΈΠ·Π±ΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΡΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ (Π½Π° ΠΏΠ΅ΡΠ²ΡΡ β Firefox, Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ — IE).
β
ΠΠ΅ΡΠΎΠ΄ Β«TableΒ»
Π’Π°Π±Π»ΠΈΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π±ΡΠ» ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π²Π΅ΡΡΡΠΊΠΈ, ΡΡΠΎ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ»ΠΎΡΡ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎΠΉ ΠΏΠΎΠ½ΡΡΠ½ΠΎΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ ΠΈ ΠΏΠΎΡΠ»ΡΠΆΠΈΠ»ΠΎ ΠΏΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² CSS.
Π‘Π²ΠΎΠΉΡΡΠ²Π° display: table (table-cell, inline-table), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ HTML ΡΠ°Π±Π»ΠΈΡ.
ΠΠ»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΠΌΠ΅ΡΡΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: table, ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΡΠ΅ΠΉΠΊΠΈ), ΠΈΠΌΠ΅ΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: table-cell:
<div> <div>Π‘ΡΡΠΎΠΈΠΌ</div> <div>ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΉ</div> <div>ΡΡΠ΄</div> <div>ΠΈΠ· Π΄ΠΈΠ²ΠΎΠ²</div> </div>
.bblock { display: table-cell; font-size: 32px; width: 200px; height: 200px; background: gold; text-align: center; vertical-align: middle; } Β .wrap { display: table; border-spacing: 20px 20px; background-color: darkgray; }
ΠΠ°ΠΆΠ½ΠΎ!!!
- Π ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Β«Inline-blockΒ» ΠΈ Β«floatΒ», ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠ΅ΠΉΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ·.
- Π£ Π²Π°Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin Π΄Π»Ρ ΡΡΠ΅Π΅ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ°Π±Π»ΠΈΡΡ.
- ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈΠ· ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²Π° display: table* Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ IE6, IE7. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² IE8 Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ ΠΎΡΠΈΠ±ΠΊΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΏΡΠ΅Π²Π΄ΠΎΡΠ°Π±Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π½Π΄ΠΎΠΌΠ½ΠΎ ΠΏΡΠΎΠΏΠ°Π΄Π°ΡΡΠΈΡ ΡΡΠ΅Π΅ΠΊ. ΠΠ°Π½Π½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΠΎΠΉ ΠΏΡΠΎΡΠΈΡΠΎΠ²ΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
.
ΠΡΠ΅Π½ΠΎΠΊ: 57 (ΡΡΠ΅Π΄Π½ΡΡ 4.2 ΠΈΠ· 5)
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² | web-sprints
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² css ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡΠΈΡ ΡΡΠ°ΠΏΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ (Π΅ΡΠ»ΠΈ Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ), Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°. ΠΠ΅ ΡΠ΅Π΄ΠΊΠΈ ΡΠ»ΡΡΠ°ΠΈ ΠΊΠΎΠ³Π΄Π° Β«Π³ΠΎΡΠ΅-Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΈΒ» Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΡΡ Π²Π΅ΡΡΡΠΊΡ, ΡΡΠΎ Π² ΠΈΡΠΎΠ³Π΅ Π΅Ρ ΠΏΡΠΎΡΠ΅ Π²ΡΠΊΠΈΠ½ΡΡΡ Β ΡΠ΅ΠΌ ΡΡΠΎ ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. ΠΠ°Π½Π½Π°Ρ ΡΠΈΡΡΠ°ΡΠΈΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΈΠ· Π·Π° Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π³Π΄Π΅ ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Π΄Π°Π½Π½ΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅. Π ΡΠ°ΠΊ, Π² css ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ position.Β ΠΠ°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ 5 Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ 4 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ :
- absolute
- static
- relative
- fixed
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² (absolute)
ΠΠ΅ΡΠ²ΡΠΉ, Π² Π½Π°ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅, ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅. ΠΡΠΈ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π±Π»ΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ΠΉ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° Π΅Π³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΈ ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π Π°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ width ΠΈ height, Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ β Β ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top. left, right ΠΈ bottom ΡΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ, Π»Π΅Π²ΠΎΠ³ΠΎ, ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ Β ΠΊΡΠ°Ρ. ΠΡΠ»ΠΈ Ρ Π±Π»ΠΎΠΊΠ° Π½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΎΡ static, ΡΠΎ top, left, bottom, right ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΎΡ Π½Π°ΡΠ°Π»Π° ΡΡΡΠ°Π½ΠΈΡΡ, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΡ ΠΊΡΠ°Π΅Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π΄Π°Π½Π½ΡΠΉ Π²ΠΈΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π±Π»ΠΎΠΊ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΆΠ°ΡΡ ΠΊ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΡΠ°Ρ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° Π±Π»ΠΎΠΊΠΈ Π±ΡΠ»ΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½Ρ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΠΎ ΡΠ°ΠΌΠΊΠΎΠΉ. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<div> <div> <!— TEXT —> </div> <div> <a href=»#»><!—SSILKA—></a> </div> </div>
<div> Β Β Β Β <div> Β Β Β Β Β Β Β Β Β Β <!— TEXT —> Β Β Β Β </div> Β Β Β Β <div> Β Β Β Β Β Β Β Β Β Β <a href=»#»><!—SSILKA—></a> Β Β Β Β </div> </div> |
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΡΡΠ»ΠΊΠ° yellow Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Ρ Π»Π΅Π²Π° ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊΠΎΠΌ blue. ΠΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ ΡΡΡΠ»ΠΊΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, ΡΠΎΠ³Π΄Π° Π½Π°Ρ css Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
.relation { position: relative; } .yellow { position: absolute; right: 10px; bottom: 10px; }
.relation { Β Β position: relative; } .yellow { Β Β position: absolute; Β Β right: 10px; Β Β bottom: 10px; } |
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ right ΠΈ bottom Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎ Π±Ρ Π·Π°Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ. ΠΠ°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ°Π²Π½ΠΎΡΠΈΠ»ΡΠ½Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ top: ΠΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β 10px ΠΈ left: Π¨ΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β 10px.
Π’Π°ΠΊ ΠΆΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Β«Π½Π°Π΅Π·Π΄Β» ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π΄ΡΡΠ³ΠΎΠΉ.
Π‘ΡΠ°ΡΠΈΡΠ½ΠΎΠ΅Β ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (static)
Π‘Π°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉΒ Π²ΠΈΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°Π΄Π°Π½ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² β ΡΡΠ°ΡΠΈΡΠ½ΠΎΠ΅, Π² css ΠΏΠΈΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ static. ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° HTML ΡΠ΅Π³ΠΎΠ² Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ.Π΅. Π΅ΡΠ»ΠΈ position ΡΠ²Π½ΠΎ Π½Π΅ Π·Π°Π΄Π°Π½, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ static. ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ ΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π² ΠΎΠΊΠ½Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ position: static ΠΈΠ»ΠΈ position: relative. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, left, right, bottom Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΡΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° margin.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (relative)
ΠΠ°Π½Π½ΡΠΉ Π²ΠΈΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΡΠ°ΡΠΈΡΠ½ΡΠΉ Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ ΡΡΠΎ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top, left, right, bottom ΠΈ margin.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (fixed)
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌ Π·Π°Π΄Π°Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅, Π½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ HTML ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Ρ.Π΅. ΠΏΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ top: 10px, Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ ΡΠ°Π²Π½ΡΠΉ 10px ΠΠ’ ΠΠΠΠ ΠΠ ΠΠ£ΠΠΠ ΠΒ ΠΈ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΠ΅ΡΡ, Π΄Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Ρ Π²Π°ΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ.
ΠΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΡΠΎ Π±Ρ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ»Π° Π²ΡΠ΅Π³Π΄Π° Π½Π° Π²ΠΈΠ΄Ρ Π²Π°ΠΆΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΡΠΈ ΠΈΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π² CSS ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΡΠΌ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΡ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ½ΠΈ ΠΈΠ΄ΡΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΊΠΎΠ΄Π΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»ΠΎΠΊΠΎΠ²ΡΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ, Π° ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΡΠΈΠ½ΡΡΡΡΡ ΡΡΠΈΠΌ ΠΏΡΠΈΠ°Π²ΠΈΠ»Π°ΠΌ, Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΡ ΡΠ΅ΡΠΌΠΈΠ½ Π²ΠΎΠ·Π½ΠΈΠΊ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ, ΠΎΠ½ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π΅Π³ΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅Ρ. ΠΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float, ΡΠΎΠΆΠ΅ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. ΠΠΎ ΡΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΡΠΎΠΊΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΈΡ ΠΌΠ΅ΡΡΠΎ.
ΠΠΈΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π±Π»ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΠΌΡ ΡΠΊΠ°Π·Π°Π½Ρ. ΠΠ»ΠΎΠΊ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π² ΡΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΡΠ»ΠΈ ΡΠ°ΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎ Π±Π»ΠΎΠΊ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ ΠΈ ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π·Π°ΠΊΡΡΠ²Π°Π΅Ρ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΡΡΠ°Π½Π½ΡΠΌ, Π½ΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΠΈΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ²:
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌ. ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΎΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΎΡ Π³ΡΠ°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡ Π³ΡΠ°Π½ΠΈΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π΅ΡΠ»ΠΈ ΡΡΠΎΡ Π±Π»ΠΎΠΊ ΡΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π» Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ. ΠΠ½ΠΎ ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΡΡΡΠΌ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΡΠΎΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π³ΡΠ°Π½ΠΈΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π΄Π²ΠΈΠΆΠ΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π° ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π’ΠΎ Π΅ΡΡΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π±Π΅Π· ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠ»ΠΈ Π΅ΠΌΡ Π·Π°Π΄Π°Π½Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ, ΡΠΎ ΠΎΠ½ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position. ΠΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
position: absolute; — Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
position: relative; — ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
position: fixed; — ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
position: static; — ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
ΠΠ»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
left — ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
right — ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
top — ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
bottom — ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
left: auto; — Π±Π΅Π· ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
left: Π²Π΅Π»ΠΈΡΠΈΠ½Π° Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS
left: Π²Π΅Π»ΠΈΡΠΈΠ½Π° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΡΠ°ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π Π΅ΡΠ»ΠΈ Π΅Π»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, ΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΡΠ°ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π±Π»ΠΎΠΊΠ°.
left: inherit; — Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π£ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Ρ left.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° Π½Π΅Ρ Π΄Π²Π° Π±Π»ΠΎΠΊΠ°. ΠΠ½ΠΈ Π±ΡΠ΄ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ. ΠΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΠΈ ΠΡ ΠΌΠΎΠ³Π»ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ Π²Ρ ΠΏΠΎΠΉΠΌΡΡΠ΅, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. ΠΠ»Ρ Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠΎΠ½.
Π‘ΡΠΈΠ»Ρ:
+
7 | div { background-color: #909090; } .stream { background-color: Blue; width: 100px; margin-bottom: 2px; } |
HTML ΠΊΠΎΠ΄:
20 | <div></div> <div></div> |
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π£ΠΊΠ°ΠΆΠ΅ΠΌ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ»Π΅Π²Π° ΠΈ ΡΠ²Π΅ΡΡ Ρ:
Π‘ΡΠΈΠ»Ρ:
17 | #abs_left { position: absolute; left: 40px; top: 20px; } |
HTML ΠΊΠΎΠ΄:
28 | <div>ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅<br> ΡΠ»Π΅Π²Π° ΡΠ²Π΅ΡΡ Ρ</div> |
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π»ΠΎΠΆΠΈΠ»ΡΡ Π½Π° ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈ ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π·Π°ΠΊΡΡΠ» Π΅Π³ΠΎ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ — ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΡΠ»ΠΈ Π±Π»ΠΎΠΊΡ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ΡΠΈΡΠΈΠ½Π°, ΡΠΎ ΠΎΠ½ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΡΡΡΡΠΎΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ². ΠΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ½ΠΈΠ·Ρ:
Π‘ΡΠΈΠ»Ρ:
23 | #abs_right { position: absolute; right: 10px; bottom: 60px; } |
HTML ΠΊΠΎΠ΄:
36 | <div>ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅<br> ΡΠΏΡΠ°Π²Π° ΡΠ½ΠΈΠ·Ρ</div> |
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄Π²ΠΈΠ³Π°ΡΡ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, Π±ΡΠ΄Π΅Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ, Π° Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅. ΠΠ³ΠΎ ΠΌΠ΅ΡΡΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅Π·Π°Π½ΡΡΡΠΌ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ΄Π΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΌΠΈΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, ΡΠΎ Π΅ΡΡΡ, ΠΌΠ΅Π΄ΠΆΡ ΠΏΠ΅ΡΠ²ΡΠΌΠΈ Π΄Π²ΡΠΌΡ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ.
Π‘ΡΠΈΠ»Ρ:
29 | #rel_left { position: relative; left: 120px; top: 10px; width: 300px; } |
HTML ΠΊΠΎΠ΄:
40 | <div>ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅<br> ΡΠ»Π΅Π²Π° ΡΠ²Π΅ΡΡ Ρ</div> |
ΠΠ°ΠΊ Ρ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ», Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π΅ ΡΠΎΠ»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π§ΡΠΎΠ±Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ±, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π΅Π³ΠΎ Π²Π½ΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎΡ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π‘ΡΠΈΠ»Ρ:
36 | #abs_block { position: absolute; left: 5px; bottom: 48px; } |
HTML ΠΊΠΎΠ΄:
46 | <div> ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅<br> ΡΠ»Π΅Π²Π° ΡΠ²Π΅ΡΡ Ρ <div> ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅<br> ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΎΠΊΠ° </div> </div> |
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π΅ Π²Π²Π΅ΡΡ , Π° Π²Π½ΠΈΠ·. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΡΠ΄Π° ΠΎΠ½ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡ:
Π§Π°ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π±Π΅Π· ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ»ΠΎΠΊ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅Π³ΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΠΠΠ: ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π΅ Π²ΠΎΠ·Π»Π΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ. ΠΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠ΅Π³Π° <body>. Π£ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΡΠΎΡ ΠΎΡΡΡΡΠΏ ΡΠ°Π·Π½ΡΠΉ. ΠΠ· Π·Π° ΡΡΠΎΠ³ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ. ΠΠ»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΡΡΡΠΏΡ ΡΠ΅Π³Π° <body> Π½ΡΠ»Π΅Π²ΡΠΌΠΈ. Π’ΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΌΠ΅ΡΡΠΈΡΡΡ ΠΊ ΠΊΡΠ°ΡΠΌ, ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π±ΡΠ΄Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠΌ-ΡΠΎ ΠΎΡΠΎΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡ Π³ΡΠ°Π½ΠΈΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
Π‘ΡΠΈΠ»Ρ:
42 | #fix { position: fixed; left: 400px; top: 10px; } |
HTML ΠΊΠΎΠ΄:
64 | <div>Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅</div> |
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅.
ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΡ Π±Π»ΠΎΠΊΡ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π»Π΅Π²ΡΡ ΠΈ ΠΏΡΠ°Π²ΡΡ, ΡΠΎ ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π±Π»ΠΎΠΊ, Π·Π°Π΄Π°ΡΡ Π΅ΠΌΡ Π»ΡΠ±ΠΎΠΉ Π²ΠΈΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΈ ΡΠ»Π΅Π²Π°, ΠΈ ΡΠΏΡΠ°Π²Π°. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊΠΈΠ΅ Ρ Π±Π»ΠΎΠΊΠ° ΠΏΠΎΠ»ΡΡΠ°ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° HTML
ΠΠ΅Π±-ΡΠ°ΠΉΡΡ ΡΠ°ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΆΡΡΠ½Π°Π» ΠΈΠ»ΠΈ Π³Π°Π·Π΅ΡΠ°).
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ½Π΄ΠΎΠ½ — ΡΡΠΎΠ»ΠΈΡΠ° ΠΠ½Π³Π»ΠΈΠΈ. ΠΡΠΎ ΡΠ°ΠΌΡΠΉ Π³ΡΡΡΠΎΠ½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΉ Π³ΠΎΡΠΎΠ΄ Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΠΎΡΠΎΠ»Π΅Π²ΡΡΠ²Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΆΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 13 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΠΆΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ½Π΄ΠΎΠ½, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½Π° Π±Π΅ΡΠ΅Π³Ρ Π’Π΅ΠΌΠ·Ρ, Π±ΡΠ» ΠΊΡΡΠΏΠ½ΡΠΌ ΠΏΠΎΡΠ΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π΄Π²ΡΡ ΡΡΡΡΡΠ΅Π»Π΅ΡΠΈΠΉ, Π΅Π³ΠΎ ΠΈΡΡΠΎΡΠΈΡ Π²ΠΎΡΡ ΠΎΠ΄ΠΈΡ ΠΊ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΌΠ»ΡΠ½Π°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π·Π²Π°Π»ΠΈ Π΅Π³ΠΎ ΠΠΎΠ½Π΄ΠΈΠ½ΠΈΡΠΌ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠ° HTML
HTML ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ:
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠ°Π·Π΄Π΅Π»Π°
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π°Π±ΠΎΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΡΡΡΠ»ΠΎΠΊ
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·Π΄Π΅Π» Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ,
Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
— ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ)
— ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π΄Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠ°Π·Π΄Π΅Π»Π°
— ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ
ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΏΠΎ Π·Π°ΠΏΡΠΎΡΡ
— ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΠ»Π°Π²Π° Π‘Π΅ΠΌΠ°Π½ΡΠΈΠΊΠ° HTML. |
ΠΠ΅ΡΠΎΠ΄Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° HTML
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². ΠΠ°ΠΆΠ΄ΡΠΉ Ρ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ Π΅ΡΡΡ ΡΠ²ΠΎΠΈ ΠΏΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ:
- CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ
- CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float
- CSS Flexbox
- CSS-ΡΠ΅ΡΠΊΠ°
CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ CSS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ W3.CSS ΠΈΠ»ΠΈ Bootstrap.
CSS Float Layout
ΠΠ±ΡΡΠ½ΠΎ ΡΠ΅Π»ΡΠ΅ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS. float
Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΡ.Float Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΠΈΡΡΡΡ
— ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ Ρ ΠΏΠ»Π°Π²Π°ΡΡ
ΠΈ ΠΎΡΠΈΡΡΠΈΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ: ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Ρ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π°Π²ΡΠ΅Π΄ΠΈΡΡ
Π³ΠΈΠ±ΠΊΠΎΡΡΡ. Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ float Π² Π½Π°ΡΠ΅ΠΌ CSS
ΠΠ»Π°Π²Π°ΠΉΡΠ΅ ΠΈ ΠΎΡΠΈΡΠ°ΠΉΡΠ΅ Π³Π»Π°Π²Ρ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ½Π΄ΠΎΠ½ — ΡΡΠΎΠ»ΠΈΡΠ° ΠΠ½Π³Π»ΠΈΠΈ. ΠΡΠΎ ΡΠ°ΠΌΡΠΉ Π³ΡΡΡΠΎΠ½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΉ Π³ΠΎΡΠΎΠ΄ Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΠΎΡΠΎΠ»Π΅Π²ΡΡΠ²Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΆΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 13 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΠΆΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ½Π΄ΠΎΠ½, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½Π° Π±Π΅ΡΠ΅Π³Ρ Π’Π΅ΠΌΠ·Ρ, Π±ΡΠ» ΠΊΡΡΠΏΠ½ΡΠΌ ΠΏΠΎΡΠ΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π΄Π²ΡΡ ΡΡΡΡΡΠ΅Π»Π΅ΡΠΈΠΉ, Π΅Π³ΠΎ ΠΈΡΡΠΎΡΠΈΡ Π²ΠΎΡΡ ΠΎΠ΄ΠΈΡ ΠΊ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΌΠ»ΡΠ½Π°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π·Π²Π°Π»ΠΈ Π΅Π³ΠΎ ΠΠΎΠ½Π΄ΠΈΠ½ΠΈΡΠΌ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »ΠΠ°ΠΊΠ΅Ρ CSS Flexbox
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ flexbox Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ flexbox Π² Π½Π°ΡΠ΅ΠΌ ΠΠ»Π°Π²Π° CSS Flexbox.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ½Π΄ΠΎΠ½ — ΡΡΠΎΠ»ΠΈΡΠ° ΠΠ½Π³Π»ΠΈΠΈ. ΠΡΠΎ ΡΠ°ΠΌΡΠΉ Π³ΡΡΡΠΎΠ½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΉ Π³ΠΎΡΠΎΠ΄ Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΠΎΡΠΎΠ»Π΅Π²ΡΡΠ²Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΆΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 13 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΠΆΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ½Π΄ΠΎΠ½, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½Π° Π±Π΅ΡΠ΅Π³Ρ Π’Π΅ΠΌΠ·Ρ, Π±ΡΠ» ΠΊΡΡΠΏΠ½ΡΠΌ ΠΏΠΎΡΠ΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π΄Π²ΡΡ ΡΡΡΡΡΠ΅Π»Π΅ΡΠΈΠΉ, Π΅Π³ΠΎ ΠΈΡΡΠΎΡΠΈΡ Π²ΠΎΡΡ ΠΎΠ΄ΠΈΡ ΠΊ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΌΠ»ΡΠ½Π°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π·Π²Π°Π»ΠΈ Π΅Π³ΠΎ ΠΠΎΠ½Π΄ΠΈΠ½ΠΈΡΠΌ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »ΠΠ°ΠΊΠ΅Ρ ΡΠ΅ΡΠΊΠΈ CSS
ΠΠΎΠ΄ΡΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΠ΅ΡΠΊΠΈ CSS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅ΡΠΊΠΈ ΡΠΎ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΡΠΏΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠ΅ΡΠΊΠ°Ρ CSS Π² Π½Π°ΡΠ΅ΠΌ ΠΠ»Π°Π²Π° CSS Grid View.
ΠΠ»ΠΎΠΊ HTML ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΎ.
ΠΠΌΠ΅Π΅ΡΡΡ Π΄Π²Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: Π±Π»ΠΎΡΠ½ΠΎΠ΅ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π²ΡΠ΅Π³Π΄Π° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π²ΡΠ΅Π³Π΄Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ (ΡΡΠ½Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ).
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅Ρ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π² HTML:
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΠ²Π½ΠΎ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΈΠ½Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ.
ΠΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ Π°Π±Π·Π°ΡΠ°.
ΠΠΎΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² HTML:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΠΎΠ²Π΅Π½Ρ Π±Π»ΠΎΠΊΠ°. ΡΠ»Π΅ΠΌΠ΅Π½Ρ!
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ CSS ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΠΎΠ½Π΄ΠΎΠ½ — ΡΡΠΎΠ»ΠΈΡΠ° ΠΠ½Π³Π»ΠΈΠΈ. ΠΡΠΎ ΡΠ°ΠΌΡΠΉ Π³ΡΡΡΠΎΠ½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΉ Π³ΠΎΡΠΎΠ΄ Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΠΎΡΠΎΠ»Π΅Π²ΡΡΠ²Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΆΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 13 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΠΆΠΈΡΠ΅Π»Π΅ΠΉ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ CSS ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π£ ΠΌΠΎΠ΅ΠΉ ΠΌΠ°ΠΌΡ Π³ΠΎΠ»ΡΠ±ΡΠ΅ Π³Π»Π°Π·Π°
Π° Ρ ΠΌΠΎΠ΅Π³ΠΎ ΠΎΡΡΠ° ΡΠ΅ΠΌΠ½ΠΎ
Π·Π΅Π»Π΅Π½ΡΠ΅ ΠΡΡΠΈΠ±ΡΡ ΠΊΠ»Π°ΡΡΠ° HTML ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΊΠ»Π°ΡΡ. ΠΡΡΠΈΠ±ΡΡ Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΠΎΠ½Π΄ΠΎΠ½ - ΡΡΠΎΠ»ΠΈΡΠ° ΠΠ½Π³Π»ΠΈΠΈ. ΠΠ°ΡΠΈΠΆ - ΡΡΠΎΠ»ΠΈΡΠ° Π€ΡΠ°Π½ΡΠΈΠΈ. Π’ΠΎΠΊΠΈΠΎ - ΡΡΠΎΠ»ΠΈΡΠ° Π―ΠΏΠΎΠ½ΠΈΠΈ.
, ΠΊΠ»Π°ΡΡ
ΠΈ id
ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ±ΡΠΈΠΌΠΈ. ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ½Π΄ΠΎΠ½
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΠ°ΡΡΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ², Π½ΠΎ ΡΡΠΈΠ»Ρ
, ΠΊΠ»Π°ΡΡ
ΠΈ id
ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ±ΡΠΈΠΌΠΈ.
ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΡΡΠ΅ΠΉ ΡΠ΅ΠΊΡΡΠ°: ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ » ΠΡΠ°ΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π³Π»Π°Π²Ρ
ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΠ°ΡΡΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° HTML-ΡΠ΅Π³ΠΈ
Π’Π΅Π³ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·Π΄Π΅Π» Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ (Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ°) ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·Π΄Π΅Π» Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ (Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ)
HTML-ΠΊΠ»Π°ΡΡΡ — ΠΡΡΠΈΠ±ΡΡ ΠΊΠ»Π°ΡΡΠ°
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΊΠ»Π°ΡΡΠ°
ΠΊΠ»Π°ΡΡΠ°
ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ
ΠΊ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ JavaScript Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΈ
ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ°. ΠΊΠ»Π°ΡΡΠ°
ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
"Π³ΠΎΡΠΎΠ΄". ΠΡΠ΅ ΡΡΠΈ .Π³ΠΎΡΠΎΠ΄
ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ Π² Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅: ΠΡΠΈΠΌΠ΅Ρ
.city {
background-color: ΠΏΠΎΠΌΠΈΠ΄ΠΎΡ;
ΡΠ²Π΅Ρ: Π±Π΅Π»ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ 2px;
ΠΌΠ°ΡΠΆΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠ½Π΄ΠΎΠ½
ΠΠ°ΡΠΈΠΆ
Π’ΠΎΠΊΠΈΠΎ