Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° Bookidrom.ru! БСсплатныС ΠΊΠ½ΠΈΠ³ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅

Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ «БпСцификация CSS2Β». Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 23

Автор Π•Π²Π³Π΅Π½ΠΈΠΉ Π Π΅Π·Π½ΠΈΡ‡Π΅Π½ΠΊΠΎ

7Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π²Π»Π΅Π²ΠΎ бокс, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ слСва ΠΎΡ‚ сСбя Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π²Π»Π΅Π²ΠΎ бокс, Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ свой ΠΏΡ€Π°Π²Ρ‹ΠΉ внСшний ΠΊΡ€Π°ΠΉ справа ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края своСго содСрТащСго Π±Π»ΠΎΠΊΠ°. (Говоря ΡˆΠΈΡ€Π΅: Π»Π΅Π²Ρ‹ΠΉ ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Ρƒ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ½ ΡƒΠΆΠ΅ Π½Π΅ находится слСва Ρ‚Π°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.)АналогичноС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ дСйствуСт для элСмСнтов, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… Π²ΠΏΡ€Π°Π²ΠΎ.

8Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ бокс Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½ Ρ‚Π°ΠΊ высоко, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

9Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π²Π»Π΅Π²ΠΎ бокс обязан Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ Π²Π»Π΅Π²ΠΎ, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π²ΠΏΡ€Π°Π²ΠΎ бокс обязан Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ Π²ΠΏΡ€Π°Π²ΠΎ, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Π‘ΠΎΠ»Π΅Π΅ высокая позиция ΠΈΠΌΠ΅Π΅Ρ‚ прСимущСство ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ, ΠΈΠ΄ΡƒΡ‰Π΅ΠΉ Π΄Π°Π»Π΅Π΅ Π²Π»Π΅Π²ΠΎ/Π²ΠΏΡ€Π°Π²ΠΎ.

'clear'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: none | left | right | both | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: none

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊ элСмСнтам уровня Π±Π»ΠΎΠΊΠ°

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: N/A

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π­Ρ‚ΠΎ свойство ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΈΠ΅ стороны бокса(ΠΎΠ²) элСмСнта Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ смСТными с Ρ€Π°Π½Π΅Π΅ Π²ΡΠΏΠ»Ρ‹Π²ΡˆΠΈΠΌ боксом. (ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅, Ρ‡Ρ‚ΠΎ элСмСнт сам ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ²; свойство 'clear' Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Π½ΠΈΡ… воздСйствия.)

Π­Ρ‚ΠΎ свойство ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ спСцифицировано Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для элСмСнтов уровня Π±Π»ΠΎΠΊΠ° (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ). Для ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Ρ… ΠΈ Π²Ρ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‰ΠΈΡ…ΡΡ боксов это свойство примСняСтся ΠΊ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌΡƒ боксу Π±Π»ΠΎΠΊΠ°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ Π²Ρ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉΡΡ бокс ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚.

ЗначСния ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ смысл ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ Π½Π΅Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ боксам Π±Π»ΠΎΠΊΠ°:

left

Π’Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ бокса увСличиваСтся Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ Π±Ρ‹Π» Π½ΠΈΠΆΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ внСшнСго края любого Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Π²Π»Π΅Π²ΠΎ бокса, ΡΠ²Π»ΡΡŽΡ‰Π΅Π³ΠΎΡΡ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ дСйствия ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅-источникС.

right

Π’Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ бокса увСличиваСтся Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ Π±Ρ‹Π» Π½ΠΈΠΆΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ внСшнСго края любого Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Π²ΠΏΡ€Π°Π²ΠΎ бокса, ΡΠ²Π»ΡΡŽΡ‰Π΅Π³ΠΎΡΡ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ дСйствия ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅-источникС.

both

Π“Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ бокс пСрСмСщаСтся Π½ΠΈΠΆΠ΅ всСх Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… боксов элСмСнтов, ΠΏΠΎΡΠ²ΠΈΠ²ΡˆΠΈΡ…ΡΡ Ρ€Π°Π½Π΅Π΅ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅-источникС.

none

НСт ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ бокса ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ².

Если свойство установлСно Π½Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ модификация ΠΏΡ€Π°Π²ΠΈΠ» позиционирования ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°. ΠŸΡ€ΠΈΠ±Π°Π²Π»ΡΠ΅Ρ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ условиС (#10):

[x]. Π’Π΅Ρ€Ρ…Π½ΠΈΠΉ внСшний ΠΊΡ€Π°ΠΉ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° обязан Π±Ρ‹Ρ‚ΡŒ Π½ΠΈΠΆΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ внСшнСго края всСх Ρ€Π°Π½Π΅Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… Π²Π»Π΅Π²ΠΎ боксов (Ссли 'clear: left'), ΠΈΠ»ΠΈ всСх Ρ€Π°Π½Π΅Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… Π²ΠΏΡ€Π°Π²ΠΎ боксов (Ссли 'clear: right'), ΠΈΠ»ΠΈ ΠΎΠ±ΠΎΠΈΡ… ('clear: both').

Π’ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования бокс смСщаСтся явно ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго содСрТащСго Π±Π»ΠΎΠΊΠ°. Он ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ удаляСтся ΠΈΠ· Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования (Π½Π΅ влияСт Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… родствСнников). ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ бокс устанавливаСт Π½ΠΎΠ²Ρ‹ΠΉ содСрТащий Π±Π»ΠΎΠΊ для Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… боксов ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ². Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя, содСрТимоС Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов Π½Π΅ всплываСт Π²ΠΎΠΊΡ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³ΠΈΡ… боксов. Π­Ρ‚ΠΈ элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ собой содСрТимоС Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ бокса, Π² зависимости ΠΎΡ‚ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ Π² стэкС Ρƒ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… боксов.

Бсылки Π² Π΄Π°Π½Π½ΠΎΠΉ спСцификации Π½Π° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт (ΠΈΠ»ΠΈ Π΅Π³ΠΎ бокс) ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ свойство 'position' элСмСнта ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'absolute' ΠΈΠ»ΠΈ 'fixed'.

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ это подкатСгория Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. ЕдинствСнноС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для фиксированно ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ бокса содСрТащий Π±Π»ΠΎΠΊ устанавливаСтся ΠΏΠΎΡ€Ρ‚ΠΎΠΌ просмотра. Для Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½Ρ‹Ρ… носитСлСй фиксированныС боксы Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ этом смыслС ΠΎΠ½ΠΈ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° фиксированныС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния. Для страничных носитСлСй боксы с фиксированной ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС. Π­Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для размСщСния, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, подписи Π²Π½ΠΈΠ·Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы.

Авторы ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для создания фрэймоподобных ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ. Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ структуру фрэймов:

[D]

Π­Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° HTML ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ с фрэймами Π² CSS2</TITLE> <STYLE type="text/css"> BODY { height: 8.5in } /* НСобходим Π΄Π°Π»Π΅Π΅ для ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠΉ высоты */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; } #main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; } #footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; } </STYLE> </HEAD> <BODY> <DIV id="header"> ... </DIV> <DIV id="sidebar"> ... </DIV> <DIV id="main"> ... </DIV> <DIV id="footer"> ... </DIV> </BODY> </HTML>


Π’Ρ€ΠΈ свойства, Π²Π»ΠΈΡΡŽΡ‰ΠΈΠ΅ Π½Π° Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ ΠΈ структуру бокса -- 'display', 'position' ΠΈ 'float -- Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊ:

1Если 'display' ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'none', ПА обязаны ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 'position' ΠΈ 'float. Π’ этом случаС элСмСнт Π½Π΅ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ бокса.

2Π˜Π½Π°Ρ‡Π΅, Ссли 'position' ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'absolute' ΠΈΠ»ΠΈ 'fixed', 'display' установлСн Π² 'block', Π° 'float установлСн Π² 'none'. ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ бокса Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ свойствами 'top', 'right', 'bottom' ΠΈ 'left' ΠΈ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ бокса.

3Π˜Π½Π°Ρ‡Π΅, Ссли 'float ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ 'none', 'display' установлСн Π² 'block', ΠΈ бокс всплываСт.

4Π˜Π½Π°Ρ‡Π΅, ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ свойства 'display' ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ спСцифицированы.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. CSS2 Π½Π΅ спСцифицируСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ структуры, Ссли значСния этих свойств ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ скриптами. НапримСр, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Ρ‘Ρ‚, Ссли элСмСнт, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ 'width: auto' ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ? Π‘ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ пСрСрисовано содСрТимоС ΠΈΠ»ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ останСтся ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ? ΠžΡ‚Π²Π΅Ρ‚ находится Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΈ ΠΏΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π°Π»ΠΎΡΡŒ для Ρ€Π°Π½Π½ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΉ CSS2.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°ΠΌΠΈ ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΌΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΡΠ΅Ρ€ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π½Π° Π±Π°Π·Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ схСм позиционирования</TITLE> </HEAD> <BODY> <P>Beginning of body contents. <SPAN id="outer"> Start of outer contents. <SPAN id="inner"> Inner contents.</SPAN> End of outer contents.</SPAN> End of body contents. </P> </BODY> </HTML>


Для этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΌΡ‹ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°:


BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline }


ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ боксов, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… внСшними ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌΠΈ элСмСнтами, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π’ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ числа слСва ΠΎΡ‚ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования строк. (ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹.)

Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ объявлСния CSS для outer ΠΈ inner, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ располоТСния боксов:


#outer { color: red } #inner { color: blue }


Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ P содСрТит всё ΠΈΠ½Π»Π°ΠΉΠ½-содСрТимоС: Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ ΠΈΠ½Π»Π°ΠΉΠ½-тСкст ΠΈ Π΄Π²Π° элСмСнта SPAN. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, всё содСрТимоС Π±ΡƒΠ΄Π΅Ρ‚ располоТСно Π²Π½Π΅ ΠΈΠ½Π»Π°ΠΉΠ½-контСкста форматирования Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТащСго Π±Π»ΠΎΠΊΠ°, устанавливаСмого элСмСнтом P, ΠΈ получится Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅:

[D]

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ дСйствиС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования, ΠΌΡ‹ спСцифицируСм:


#outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }


ВСкст располоТСн Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ Π΄ΠΎ элСмСнта outer. ВСкст outerΠ·Π°Ρ‚Π΅ΠΌ всплываСт Π² своСй Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… Π² ΠΊΠΎΠ½Ρ†Π΅ строки 1. Π—Π°Ρ‚Π΅ΠΌ ΠΈΠ½Π»Π°ΠΉΠ½-боксы, содСрТащиС тСкст (распрСдСлённый Π½Π° Ρ‚Ρ€ΠΈ строки), ΡΠ΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ вмСстС Π½Π° '-12px' (Π²Π²Π΅Ρ€Ρ…).

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ inner ΠΊΠ°ΠΊ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ ΠΎΡ‚ outer Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ располоТСно сразу послС слов "of outer contents" (Π½Π° строкС 1.5). Однако содСрТимоС innerсамо смСщСно ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ содСрТимого outer Π½Π° '12px' (Π²Π½ΠΈΠ·), ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π½Π° свою ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π½Π° строкС 2.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° содСрТимоС, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ послС outer, ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ outer Π½Π΅ влияСт.

[D]

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅, Ρ‡Ρ‚ΠΎ, имСя смСщСниС для outer '-24px', тСкст outer ΠΈ тСкст Ρ‚Π΅Π»Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚Ρ‹.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ рассмотрим эффСкт ΠΎΡ‚ всплывания тСкста элСмСнта inner Π²ΠΏΡ€Π°Π²ΠΎ ΠΏΡ€ΠΈ использовании ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»:


#outer { color: red } #inner { float: right; width: 130px; color: blue }


ВСкст Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ располоТСн Π΄ΠΎ бокса inner, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ ΠΈΠ· располоТСния ΠΈ всплыл ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ полю (Π΅Π³ΠΎ 'width' установлСно явно). Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ боксы слСва ΠΎΡ‚ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° ΡƒΠΊΠΎΡ€ΠΎΡ‡Π΅Π½Ρ‹, ΠΈ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠΉΡΡ тСкст Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° всплываСт Π² Π½ΠΈΡ….