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

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

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

2Если 'direction' - 'rtl', Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ края содСрТащСго Π±Π»ΠΎΠΊΠ° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΌ краями ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ бокса, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠΎΠΌ, Π° Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ края ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΈ Π»Π΅Π²Ρ‹ΠΌ краями содСрТимого послСднСго бокса ΠΏΡ€Π΅Π΄ΠΊΠ°.

Если Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ° Π½Π΅Ρ‚, ΠΊΡ€Π°ΠΉ содСрТимого бокса ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта устанавливаСт Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ (Π‘Π‘) Π±Π΅Π· позиционирования Π² этом Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅:


<HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML>


ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ:

Для бокса, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎΠ‘Π‘ устанавливаСтсяbodyΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ Π‘Π‘ (зависит ΠΎΡ‚ ПА)div1bodyp1div1p2div1em1p2strong1p2

Если позиция "div1":


#div1 { position: absolute; left: 50px; top: 50px }


Ρ‚ΠΎ Π΅Π³ΠΎ содСрТащий Π±Π»ΠΎΠΊ - ΡƒΠΆΠ΅ Π½Π΅ <body>; ΠΈΠΌ становится Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ содСрТащий Π±Π»ΠΎΠΊ (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ боксы ΠΏΡ€Π΅Π΄ΠΊΠ°).

Π’Π°ΠΊΠΆΠ΅, Ссли позиция "em1":


#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }


Ρ‚Π°Π±Π»ΠΈΡ†Π° содСрТащих Π±Π»ΠΎΠΊΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚:

Для бокса, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎΠ‘Π‘ устанавливаСтсяbodyΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ Π‘Π‘div1Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ Π‘Π‘p1div1p2div1em1div1strong1em1

ΠŸΡ€ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ "em1", Π΅Π³ΠΎ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ становится блиТайший ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ бокс ΠΏΡ€Π΅Π΄ΠΊΠ° (Ρ‚.Π΅. Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сгСнСрирован "div1").

'width'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <length> | <percentage> | auto | inherit

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

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам, ΠΊΡ€ΠΎΠΌΠ΅ Π½Π΅Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Ρ… ΠΈΠ½Π»Π°ΠΉΠ½-элСмСнтов, рядов Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ Π³Ρ€ΡƒΠΏΠΏ рядов

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

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°

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

Π­Ρ‚ΠΎ свойство спСцифицируСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ содСрТимого боксов, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… элСмСнтами уровня Π±Π»ΠΎΠΊΠ° ΠΈ Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΌΠΈ элСмСнтами.

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

Π¨ΠΈΡ€ΠΈΠ½Π° бокса Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΠΎΠ³ΠΎ элСмСнта являСтся Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ПА, Ссли Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого свойства отличаСтся ΠΎΡ‚ 'auto'. ЗначСния ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ смысл:

<length>

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

<percentage>

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…. ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ бокса.

auto

Π¨ΠΈΡ€ΠΈΠ½Π° зависит ΠΎΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π΄Ρ€ΡƒΠ³ΠΈΡ… свойств. Π‘ΠΌ. ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹.

ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния для 'width' Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.

Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ фиксируСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ содСрТимого ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π° Π² 100 пиксСлов:


P { width: 100px }


ВычислСнныС значСния свойств 'width', 'margin-left', 'margin-right', 'left' ΠΈ 'right' для элСмСнтов зависят ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ бокса ΠΈ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ вычислСнныС значСния - Ρ‚Π΅ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ спСцифицированныС, с 'auto', Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ подходящим Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ. Π”ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ рассмотрСны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹:

1ΠΈΠ½Π»Π°ΠΉΠ½, Π½Π΅Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты

2ΠΈΠ½Π»Π°ΠΉΠ½, Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты

3ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°, Π½Π΅Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты ΠΏΡ€ΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ всплывании

4ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°, Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты ΠΏΡ€ΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ всплывании

5всплываниС, Π½Π΅Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты

6всплываниС, Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты

7Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π΅Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты

8Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅ элСмСнты

ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ 1-6 Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Бвойство 'width' Π½Π΅ примСняСтся. Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' для 'left', 'right', 'margin-left' ΠΈΠ»ΠΈ 'margin-right' становится вычислСнным Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ '0'.

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' для 'left', 'right', 'margin-left' ΠΈΠ»ΠΈ 'margin-right' становится вычислСнным Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ '0'. Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' для 'width' Π΄Π°Ρ‘Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнта ΠΊΠ°ΠΊ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Если 'left' ΠΈΠ»ΠΈ 'right' Π·Π°Π΄Π°Π½Ρ‹ ΠΊΠ°ΠΊ 'auto', ΠΈΡ… вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - '0'. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ условиС обязано ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ свойствами:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ΡˆΠΈΡ€ΠΈΠ½Π° содСрТащСго Π±Π»ΠΎΠΊΠ°

(Если ΡΡ‚ΠΈΠ»ΡŒ Ρ€Π°ΠΌΠΊΠΈ - 'none', ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ '0' ΠΊΠ°ΠΊ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€Π°ΠΌΠΊΠΈ.) Если всС Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ спСцифицированныС значСния, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ 'auto', Ρ‚ΠΎ говорят, Ρ‡Ρ‚ΠΎ значСния "ΠΏΠ΅Ρ€Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹", ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· вычислСнных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ своСго спСцифицированного. Если свойство 'direction' ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'ltr', спСцифицированноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'margin-right' игнорируСтся ΠΈ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ вычисляСтся Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ равСнство Π²Π΅Ρ€Π½Ρ‹ΠΌ. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'direction' - 'rtl', Ρ‚ΠΎ ΠΆΠ΅ самоС выполняСтся для 'margin-left'.

Если имССтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, спСцифицированноС ΠΊΠ°ΠΊ 'auto', Π΅Π³ΠΎ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ являСтся Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ уравнСния.

Если 'width' установлСно Π² 'auto', Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния 'auto' становятся '0', ΠΈ 'width' являСтся Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ уравнСния.

Если ΠΈ 'margin-left', ΠΈ 'margin-right' - 'auto', ΠΈΡ… вычислСнныС значСния Ρ€Π°Π²Π½Ρ‹.

Если 'left' ΠΈΠ»ΠΈ 'right' - 'auto', ΠΈΡ… вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - '0'. Если 'width' спСцифицировано ΠΊΠ°ΠΊ 'auto', Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ являСтся внутрСнняя ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта. Если ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΠΎΠ»Π΅ΠΉ - 'auto', Π΅Π³ΠΎ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ задаётся Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΌ ΡƒΡ€Π°Π²Π½Π΅Π½ΠΈΠ΅ΠΌ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли ΠΎΠ±Π° поля - 'auto', ΠΈΡ… вычислСнныС значСния Ρ€Π°Π²Π½Ρ‹.

Если 'left', 'right', 'width', 'margin-left' ΠΈΠ»ΠΈ 'margin-right' спСцифицированы ΠΊΠ°ΠΊ 'auto', ΠΈΡ… вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - '0'.

Если 'left', 'right', 'margin-left' ΠΈΠ»ΠΈ 'margin-right' спСцифицированы ΠΊΠ°ΠΊ 'auto', ΠΈΡ… вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - '0'. Если 'width' - 'auto', Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ являСтся внутрСнняя ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта.

УсловиС, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ вычислСнныС значСния для этих элСмСнтов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ΡˆΠΈΡ€ΠΈΠ½Π° содСрТащСго Π±Π»ΠΎΠΊΠ°

(Если ΡΡ‚ΠΈΠ»ΡŒ Ρ€Π°ΠΌΠΊΠΈ - 'none', ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ '0' ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€Π°ΠΌΠΊΠΈ.) РСшСниС Π΄Π°Π½Π½ΠΎΠ³ΠΎ условия достигаСтся сСриСй Π·Π°ΠΌΠ΅Π½ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС:

1Если 'left' ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' ΠΏΡ€ΠΈ 'direction' - 'ltr', 'auto' замСняСтся расстояниСм ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ° Π΄ΠΎ края Π»Π΅Π²ΠΎΠ³ΠΎ поля гипотСтичСского бокса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠ³ Π±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ боксом элСмСнта, Ссли Π΅Π³ΠΎ свойство 'position' Π±Ρ‹Π»ΠΎ Π±Ρ‹ 'static'. (Но вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ этот бокс, ПА свободны ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒ ΠΎ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.) Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ являСтся ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ссли гипотСтичСский бокс находится слСва ΠΎΡ‚ содСрТащСго Π±Π»ΠΎΠΊΠ°.

2Если 'right' ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' ΠΏΡ€ΠΈ 'direction' - 'rtl', 'auto' замСняСтся расстояниСм ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ° Π΄ΠΎ края ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ поля Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ гипотСтичСского бокса, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹ΡˆΠ΅. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ являСтся ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ссли гипотСтичСский бокс находится слСва ΠΎΡ‚ края содСрТащСго Π±Π»ΠΎΠΊΠ°.

3Если 'width' - 'auto', Π»ΡŽΠ±Ρ‹Π΅ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ 'auto' для 'left' ΠΈΠ»ΠΈ 'right' Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π½Π° '0'.

4Если 'left', 'right' ΠΈΠ»ΠΈ 'width' - (Π΅Ρ‰Ρ‘) 'auto', 'auto' Π² 'margin-left' ΠΈΠ»ΠΈ 'margin-right' Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π½Π° '0'.

5Если Π² Π΄Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ 'margin-left' ΠΈ 'margin-right' всё Π΅Ρ‰Ρ‘ 'auto', ΡƒΡ€Π°Π²Π½Π΅Π½ΠΈΠ΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ условиСм: Ρ‡Ρ‚ΠΎ эти Π΄Π²Π° поля обязаны ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ значСния.

6Если Π² Π΄Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ 'auto', ΡƒΡ€Π°Π²Π½Π΅Π½ΠΈΠ΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ с этим Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

7Если Π² Π΄Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ значСния ΠΏΠ΅Ρ€Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹, игнорируСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'left' (Ссли 'direction' - 'rtl') ΠΈΠ»ΠΈ 'right' (Ссли 'direction' - 'ltr') ΠΈ ΡƒΡ€Π°Π²Π½Π΅Π½ΠΈΠ΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ с этим Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

Битуация Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΡƒΡŽ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. ΠŸΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π·Π°ΠΌΠ΅Π½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ:

1Если 'width' - 'auto', ΠΎΠ½ΠΎ замСщаСтся Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ элСмСнта.

2Если 'left' ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' ΠΏΡ€ΠΈ 'direction' - 'ltr', 'auto' замСщаСтся расстояниСм ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ° Π΄ΠΎ края Π»Π΅Π²ΠΎΠ³ΠΎ поля гипотСтичСского бокса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠ³ Π±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ боксом элСмСнта, Ссли Π΅Π³ΠΎ свойство 'position' Π±Ρ‹Π»ΠΎ Π±Ρ‹ 'static'. (Но вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ этот бокс, ПА свободны ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒ ΠΎ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.) Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ являСтся ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ссли гипотСтичСский бокс находится слСва ΠΎΡ‚ содСрТащСго Π±Π»ΠΎΠΊΠ°.