Блочная вСрстка html: Вёрстка страницы сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΠΊΠΎΠ²

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

CSS блочная модСль

ΠœΠΎΠ΄ΡƒΠ»ΡŒ CSS Box Model описываСт свойства padding ΠΈ margin, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ поля Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈ отступы снаруТи CSS Π±Π»ΠΎΠΊΠ°. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Ρ‹ Π·Π° счСт Ρ€Π°ΠΌΠΊΠΈ.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅, поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого, Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΏΠΎΠ»Π΅ΠΉ ΠΈ отступ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ Ρ€Π°ΠΌΠΊΠΈ. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ этих областСй ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ свойства padding ΠΈ Π΅Π³ΠΎ подсвойства β€” padding-left, padding-topΠΈ Ρ‚.Π΄., border ΠΈ Π΅Π³ΠΎ подсвойства, margin ΠΈ Π΅Π³ΠΎ подсвойства.

CSS блочная модСль Π² дСталях

1. ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ находится тСкст, Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ‚.ΠΏ., ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠ΅ Π΅Π΅ padding, border ΠΈ margin. Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ области опрСдСляСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ свойствами ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ, ΠΈΠ»ΠΈ, Π² случаС margin, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

margin
padding
borderΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого

  • ΠΊΡ€Π°ΠΉ содСрТимого
  • ΠΊΡ€Π°ΠΉ поля
  • ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ
  • ΠΊΡ€Π°ΠΉ отступа
Π€ΠΈΠ³ΡƒΡ€Π° 1. ΠžΠ±Π»Π°ΡΡ‚ΠΈ ΠΈ края Π±Π»ΠΎΠΊΠ°

Поля, Ρ€Π°ΠΌΠΊΠ° ΠΈ отступы ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ Π½Π° Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ, ΠΏΡ€Π°Π²Ρ‹ΠΉ, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ сСгмСнты, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… нСзависимо управляСтся своим ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ свойством.

Π€ΠΎΠ½ области содСрТимого, ΠΏΠΎΠ»Π΅ΠΉ ΠΈ Ρ€Π°ΠΌΠΊΠΈ Π±Π»ΠΎΠΊΠ° опрСдСляСтся свойствами Ρ„ΠΎΠ½Π°. ΠžΠ±Π»Π°ΡΡ‚ΡŒ Ρ€Π°ΠΌΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΡ€Π°ΡˆΠ΅Π½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства border. ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ элСмСнта всСгда ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹, Ρ‡Ρ‚ΠΎ позволяСт ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Π’Π°ΠΊ ΠΊΠ°ΠΊ поля ΠΈ отступы элСмСнта Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎ Π½ΡƒΠ»ΡŽ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ этим свойствам ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π° основС своих Ρ‚Π°Π±Π»ΠΈΡ† стилСй. ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ стили Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для всСх элСмСнтов ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ сСлСктора:

* {
 margin: 0;
 padding: 0;
 }

2. ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ элСмСнта

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‚ ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ элСмСнта, обСспСчивая расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Бвойства отступов ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΈΡ… Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ. ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊΠΎ всСм элСмСнтам, ΠΊΡ€ΠΎΠΌΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΠΎΠ΅ свойство margin Π·Π°Π΄Π°Π΅Ρ‚ отступы для всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… сторон, Π° Π΅Π³ΠΎ подсвойства Π·Π°Π΄Π°ΡŽΡ‚ отступ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ стороны.

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ отступы элСмСнтов Π² Π±Π»ΠΎΡ‡Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°ΡŽΡ‚ΡΡ.

2.1. Π‘Ρ…Π»ΠΎΠΏΡ‹Π²Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… отступов

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ отступы Π΄Π²ΡƒΡ… ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ элСмСнтов уровня Π±Π»ΠΎΠΊΠ° margin ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ (ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ). ΠŸΡ€ΠΈ этом ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠ±Ρ‰Π΅Π³ΠΎ отступа Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ большСго ΠΈΠ· исходных. Π˜ΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ отступы ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°ΡŽΡ‚ΡΡ.

  • ΠžΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого

    margin-bottom: 30px; width: 100%; display: inline-block;

  • ΠžΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого

    margin-top: 15px; width: 100%; display: inline-block;

Π€ΠΈΠ³ΡƒΡ€Π° 2. Π‘Ρ…Π»ΠΎΠΏΡ‹Π²Π°Π½ΠΈΠ΅ отступов ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ

ОбъСдинСниС отступов выполняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Если срСди ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ отступов Π΅ΡΡ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌΡƒ, Π° ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ расстояниСм ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами. Если ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… отступов Π½Π΅Ρ‚, Ρ‚ΠΎ максимум Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ сосСдних отступов вычитаСтся ΠΈΠ· нуля.

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Π½Π΅ ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°ΡŽΡ‚ΡΡ:

  • ΠœΠ΅ΠΆΠ΄Ρƒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈ Π»ΡŽΠ±Ρ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ;
  • Π£ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов ΠΈ элСмСнтов со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ overflow, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ visible, со своими Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅;
  • Π£ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов, Π΄Π°ΠΆΠ΅ с ΠΈΡ… Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами;
  • Π£ строчно-Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов.

Для прСдотвращСния ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ схлопывания рСкомСндуСтся Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ для всСх элСмСнтов Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ

margin.

2.2. Π’Ρ‹ΠΏΠ°Π΄Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… отступов

Если Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π±Π»ΠΎΠΊ ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ margin-top, Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Π±Π»ΠΎΠΊ приТмСтся ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ, Π° Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта появится отступ свСрху, Ρ‚. Π΅. Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Π±Π»ΠΎΠΊ Β«Π²Ρ‹ΠΏΠ°Π΄Π΅Ρ‚Β» ΠΈΠ· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Если Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Π» Π·Π°Π΄Π°Π½ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ отступ, Ρ‚ΠΎ выбСрСтся наибольшСС ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ эффСкта выпадания, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту padding-top ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ border-top: 1px solid transparent.

2.3. ЀизичСскиС свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left

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

Бвойства Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ.

margin-top/margin-right/margin-bottom/margin-left
ЗначСния:
Π΄Π»ΠΈΠ½Π°Π Π°Π·ΠΌΠ΅Ρ€ отступа задаСтся Π² Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… Π΄Π»ΠΈΠ½Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, px, in, em. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.
%ВычисляСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π˜Π·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, Ссли измСняСтся ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.
autoДля элСмСнтов уровня строки, ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… (float) значСния margin-left ΠΈΠ»ΠΈ margin-right Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ Π² 0. Если для элСмСнтов уровня Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π½ΠΎ margin-left: auto ΠΈΠ»ΠΈ margin-right: auto β€” ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΏΠΎΠ»Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ Π΄ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°, Ссли ΠΎΠ±Π° β€” ΠΈΡ… значСния становятся Ρ€Π°Π²Π½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΡ€Π°Π΅Π² содСрТащСго Π±Π»ΠΎΠΊΠ°.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Бинтаксис

margin-top: 20px;
margin-right: 1em;
margin-bottom: 5%;
margin-left: auto;
margin-top: inherit;
margin-right: initial;
2.4. ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ запись отступов: свойство margin

Бвойство margin являСтся сокращСнным свойством для установки margin-top, margin-right, margin-bottom ΠΈ margin-left Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии.

Если сущСствуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ примСняСтся ΠΊΠΎ всСм сторонам.

Если Π΄Π²Π° β€” Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ отступы ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π° ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ β€” ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅.

Если имССтся Ρ‚Ρ€ΠΈ значСния β€” Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ отступ устанавливаСтся Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π»Π΅Π²Ρ‹ΠΉ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ β€” Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅, Π° Π½ΠΈΠΆΠ½ΠΈΠΉ β€” Π½Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅.

Если Π΅ΡΡ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния β€” ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ свСрху, справа, снизу ΠΈ слСва соотвСтствСнно.

3. Поля элСмСнта

ΠžΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΠΎΠ»Π΅ΠΉ прСдставляСт собой пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΡ€Π°Π΅ΠΌ области содСрТимого ΠΈ Ρ€Π°ΠΌΠΊΠΎΠΉ элСмСнта. Бвойства ΠΏΠΎΠ»Π΅ΠΉ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ ΠΈΡ… области. ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊΠΎ всСм элСмСнтам, ΠΊΡ€ΠΎΠΌΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹). Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΠΎΠ΅ свойство padding Π·Π°Π΄Π°Π΅Ρ‚ поля для всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… сторон, Π° подсвойства ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ… ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ стороны.

Π€ΠΎΠ½Ρ‹ элСмСнта ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π°ΠΊΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ поля элСмСнта ΠΈ пространство ΠΏΠΎΠ΄ Π΅Π³ΠΎ Ρ€Π°ΠΌΠΊΠΎΠΉ. Π­Ρ‚ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств background-origin ΠΈ background-clip.

3.1. ЀизичСскиС свойства ΠΏΠΎΠ»Π΅ΠΉ: свойства padding-top, padding-right, padding-bottom, padding-left

Бвойства ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π΅, ΠΏΡ€Π°Π²ΠΎΠ΅, Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ поля соотвСтствСнно. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния нСдопустимы.

Бвойства Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ.

padding-top/padding-right/padding-bottom/padding-left
ЗначСния:
длинаПоля элСмСнта Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ† Π΄Π»ΠΈΠ½Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, px, pt, cm. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.
%Π’Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта, ΠΌΠΎΠ³ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнта. Поля свСрху ΠΈ снизу Ρ€Π°Π²Π½Ρ‹ полям слСва ΠΈ справа, Ρ‚.Π΅. Π²Π΅Ρ€Ρ…Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ поля Ρ‚ΠΎΠΆΠ΅ Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнта.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Бинтаксис

padding-top: 0.5em;
padding-right: 0;
padding-bottom: 2cm;
padding-left: 10%;
padding-top: inherit;
padding-bottom: initial;
3.2. ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ запись ΠΏΠΎΠ»Π΅ΠΉ: свойство padding

Бвойство padding являСтся сокращСнным свойством для установки padding-top, padding-right, padding-bottom ΠΈ padding-left Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии.

Если сущСствуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ примСняСтся ΠΊΠΎ всСм сторонам.

Если Π΅ΡΡ‚ΡŒ Π΄Π²Π° значСния, Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ поля ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π° ΠΏΡ€Π°Π²ΠΎΠ΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ β€” Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅.

Если имССтся Ρ‚Ρ€ΠΈ значСния, Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ устанавливаСтся Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ΅ β€” Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅, Π° Π½ΠΈΠΆΠ½Π΅Π΅ β€” Π½Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅.

Если Π΅ΡΡ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния β€” ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ свСрху, справа, снизу ΠΈ слСва соотвСтствСнно.

4. Π Π°ΠΌΠΊΠΈ элСмСнта

Π Π°ΠΌΠΊΠΈ элСмСнта Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ€Π°ΠΌΠΎΠΊ, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ очСрчивая края Π±Π»ΠΎΠΊΠ°. Бвойства Ρ€Π°ΠΌΠΎΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ области Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±Π»ΠΎΠΊΠ°, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π΅ ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Ρ†Π²Π΅Ρ‚.

По ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ CSS Box Model Module Level 3

Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты | htmlbook.ru

Π‘Π»ΠΎΡ‡Π½Ρ‹ΠΌ называСтся элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся Π½Π° Π²Π΅Π±-страницС Π² Π²ΠΈΠ΄Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. Π’Π°ΠΊΠΎΠΉ элСмСнт Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, высота элСмСнта опрСдСляСтся Π΅Π³ΠΎ содСрТимым, ΠΈ ΠΎΠ½ всСгда начинаСтся с Π½ΠΎΠ²ΠΎΠΉ строки. К Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтам относятся Ρ‚Π΅Π³ΠΈ <address>, <blockquote>, <div>, <fieldset>, <form>, <h2>,…,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅. Π’Π°ΠΊΠΆΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ становится элСмСнт, Ссли Π² стилС для Π½Π΅Π³ΠΎ свойство display Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ block, list-item, table ΠΈ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях run-in.

Для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ особСнности.

  • Π‘Π»ΠΎΠΊΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ.
  • На ΠΏΡ€ΠΈΠ»Π΅Π³Π°ΡŽΡ‰ΠΈΡ… сторонах элСмСнтов дСйствуСт эффСкт схлопывания отступов.
  • Π—Π°ΠΏΡ€Π΅Ρ‰Π΅Π½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт Π²Π½ΡƒΡ‚Ρ€ΡŒ строчного. НапримСр, <a><h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</h2></a> Π½Π΅ ΠΏΡ€ΠΎΠΉΠ΄Ρ‘Ρ‚ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΡŽ, ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‚Π΅Π³ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚Β β€” <h2><a>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</a></h2>.
  • По ΡˆΠΈΡ€ΠΈΠ½Π΅ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ всё допустимоС пространство.
  • Если Π·Π°Π΄Π°Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (свойство width), Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° складываСтся ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ width, ΠΏΠΎΠ»Π΅ΠΉ, Π³Ρ€Π°Π½ΠΈΡ†, отступов слСва ΠΈ справа.
  • Высота Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта вычисляСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ автоматичСски, исходя ΠΈΠ· содСрТимого Π±Π»ΠΎΠΊΠ°.
  • Если Π·Π°Π΄Π°Π½Π° высота ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (свойство height), Ρ‚ΠΎ высота Π±Π»ΠΎΠΊΠ° складываСтся ΠΈΠ· значСния height, ΠΏΠΎΠ»Π΅ΠΉ, Π³Ρ€Π°Π½ΠΈΡ†, отступов свСрху ΠΈ снизу. ΠŸΡ€ΠΈ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ΅Π½ΠΈΠΈ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ высоты ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ отобраТаСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… Π±Π»ΠΎΠΊΠ°.
  • На Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Π½Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ свойства, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ для строчных элСмСнтов, Π²Ρ€ΠΎΠ΄Π΅ vertical-align.
  • ВСкст ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ выравниваСтся ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.

НС всС Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ допустимо Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ, поэтому ΠΏΡ€ΠΈ создании структуры ΠΊΠΎΠ΄Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ выполняСт <div> ΠΊΠ°ΠΊ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊ вёрстки. Π’Π΅Π³ <div> допустимо Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΡŒ <div>. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅Β 3.13 ΠΏΠΎΠΊΠ°Π·Π°Π½ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° сайта CSS Zen Garden, Π³Π΄Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ эти Ρ‚Π΅Π³ΠΈ для формирования Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΠΎΠΉ конструкции.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3.13. ИспользованиС Ρ‚Π΅Π³Π° <div>

<div>
  <div>
Β Β   <div>
      <h2><span>css Zen Garden</span></h2>
Β Β Β Β Β Β <h3><span>The Beauty of <acronym 
Β Β Β Β Β Β Β Β  title="Cascading Style  Sheets">CSS</acronym> Design</span></h3>
Β Β Β  </div>
Β Β Β  <div>
Β Β Β Β Β  <p><span>A demonstration of what can be accomplished 
Β Β Β Β Β  visually through <acronym title="Cascading Style Sheets">CSS</acronym>
      - based design. Select any style sheet from the list to load it into 
      this page.</span></p>
 Β Β  </div>
Β  </div>
</div>

Если Π² ΠΎΠ΄Π½ΠΎΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΠΌ элСмСнтС содСрТатся строчныС элСмСнты наряду с Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ, Ρ‚ΠΎ Π²ΠΎΠΊΡ€ΡƒΠ³ строчных элСмСнтов гСнСрируСтся Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ. Для Ρ‚Π°ΠΊΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² примСняСтся ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π° Ρ‚Π°ΠΊΠΆΠ΅ наслСдуСмый ΡΡ‚ΠΈΠ»ΡŒ, Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ для Π΅Π³ΠΎ родитСля. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅Β 3.14 Π²Π½ΡƒΡ‚Ρ€ΠΈ <div> располагаСтся Π΄Π²Π° Ρ‚Π΅Π³Π° <p> ΠΈ рядовой тСкст. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот элСмСнт Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ, Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Π½Π΅ΠΌΡƒ ΠΎΠ΄Π½ΠΎΠΌΡƒ нСльзя ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3.14. Анонимный Π±Π»ΠΎΠΊ

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Анонимный Π±Π»ΠΎΠΊ</title>
 </head>
 <body>
  <div>
   <p>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ†</p>
   Анонимный Π±Π»ΠΎΠΊ
   <p>Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π°Π±Π·Π°Ρ†</p>
  </div>
 </body>
</html>

Π‘Ρ…Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ Π±Π»ΠΎΠΊΠΈ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π½Π° рис.Β 3.23. Π‘Π΅Ρ€Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ <p>, Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€ΠΎΠΌΒ β€” Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ.

Рис. 3.23. Π‘Π»ΠΎΠΊΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях трСбуСтся Π½Π°Π΄Π΅Π»ΠΈΡ‚ΡŒ строчный элСмСнт характСристиками Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ. Π’Π°ΠΊ, ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ссылки Π² Π±Π»ΠΎΠΊ позволяСт ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ ссылки Π·Π° счёт использования свойств width ΠΈ height. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅Β 3.15 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ созданиС мСню, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ссылками являСтся вся доступная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3.15. МСню

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>МСню</title>
  <style type="text/css">
   .menu {
    width: 220px; /* Π¨ΠΈΡ€ΠΈΠ½Π° мСню */
    padding: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΎΡ‚ Ρ€Π°ΠΌΠΊΠΈ Π΄ΠΎ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */
    border: 1px solid #000; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ мСню */
   } 
   .menu P { margin: 0 0 2px; }
   .menu A {
    padding: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΎΡ‚ Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ ссылки Π΄ΠΎ тСкста */
    display: block; /* Бсылка ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт */
    border: 1px solid #fff; /* ΠœΠ°ΡΠΊΠΈΡ€ΡƒΠ΅ΠΌ Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ ссылки */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылок */
   }
   . menu A:hover {
    background: #faf3d2; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠΎΠ΄ ссылкой */
    color: #800000; /* Новый Ρ†Π²Π΅Ρ‚ ссылки */
    border: 1px dashed #634f36 /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ ссылки */
   }
  </style>
 </head>
 <body>
  <div>
   <p><a href="l.html">ΠœΠ΅Ρ‚ΠΎΠ΄ простых ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ</a></p>
   <p><a href="2.html">ΠœΠ΅Ρ‚ΠΎΠ΄ случайных чисСл</a></p>
   <p><a href="3.html">ΠœΠ΅Ρ‚ΠΎΠ΄ Π΄ΠΈΡ…ΠΎΡ‚ΠΎΠΌΠΈΠΈ</a></p>
   <p><a href="4.html">ΠœΠ΅Ρ‚ΠΎΠ΄ Π·ΠΎΠ»ΠΎΡ‚ΠΎΠ³ΠΎ сСчСния</a></p>
  </div>Β 
 </body>
</html>

Вся строка выступаСт ссылкой, поэтому ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора происходит ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стиля (рис.Β 3.24).

Рис. 3.24. Бсылка ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ элСмСнта Π² Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ Π½Π΅ Π΄Π°Ρ‘Ρ‚ ΠΏΡ€Π°Π²ΠΎ Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ влоТСния Ρ‚Π΅Π³ΠΎΠ² ΠΈ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Π²Π½ΡƒΡ‚Ρ€ΡŒ строчных, Π΄Π°ΠΆΠ΅ Ссли Ρ‡Π΅Ρ€Π΅Π· стили ΠΎΠ½ΠΈ установлСны Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ.

Блочная вСрстка для Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта

ЦСль ΡƒΡ€ΠΎΠΊΠ°: Знакомство с ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки для Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта. Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ основных свойств для построСния Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ свойства CSS

Π Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° всС слои ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ согласно Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅. Π­Ρ‚ΠΎ ΠΈ Π΅ΡΡ‚ΡŒ основноС прСимущСство Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°: нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана, вся Π΅Π³ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ занята, ΠΏΡ€ΠΈ этом Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ лишниС полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΡ€ΠΈ использовании «малСнького» ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°.

Β«Π Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΡΡ‚ΡŒΒ» достигаСтся Π·Π° счСт Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ слои ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, приспосабливая свои Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠœΠΈΠ½ΡƒΡΠΎΠΌ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ «разногласия» ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ «хитрости» css-стилСй, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ кроссбраузСрности.

Π”Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

Π”ΠΈΠ·Π°ΠΉΠ½ CSS Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, самый популярный. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ страницу с Ρ‚Π°ΠΊΠΈΠΌ располоТСниСм ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ двумя способами, рассмотрим ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

Бвойство float для создания эффСкта ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ элСмСнта

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½Ρ‹Π΅ Π½Π° рис. 1: шапка (Π±ΠΎΡ€Π΄ΠΎΠ²Ρ‹ΠΉ), мСню (свСтло-сСрый), ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (Π±Π΅Π»Ρ‹ΠΉ), ΠΏΠΎΠ΄Π²Π°Π» (Ρ‚Π΅ΠΌΠ½ΠΎ-сСрый).

Рис. 1. Π Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта Π² Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

Π›Π΅Π²ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠΌ с фиксированным Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, Π° правая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π°, Ρ‡Ρ‚ΠΎ ΠΈ обСспСчит Β«Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΡΡ‚ΡŒΒ» Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ свойства

1. Β«Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌΒ» всС основныС элСмСнты страницы Π½Π° Π±Π»ΠΎΠΊΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<div>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ сайта</div>
  <div>
   Бсылка 1<br>
   Бсылка 2<br>
   Бсылка 3<br>
   Бсылка 4<br>
  </div>
  <div>
   <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</h2>
   <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad 
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
ea commodo consequat.  Duis te feugifacilisi.
  </p>
  </div>
  <div>
   Подвал
  </div>

<div>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ сайта</div> <div> Бсылка 1<br> Бсылка 2<br> Бсылка 3<br> Бсылка 4<br> </div> <div> <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</h2> <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div> <div> Подвал </div>

2. Для Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Π΅ΠΌ свойства, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈ использовании Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°: float ΠΈ width
1 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#menu{
    float: left; 
    width: 20%;
}

#menu{ float: left; width: 20%; }

2 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#menu{
    float: left; 
    width: 200px;
}

#menu{ float: left; width: 200px; }

3. Для ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ являСтся свойство, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ внСшний отступ ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° (margin-left). Π­Ρ‚ΠΎΡ‚ отступ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ + 1px ΠΈΠ»ΠΈ 1%:
1 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#content{
    margin-left: 21%;
}

#content{ margin-left: 21%; }

2 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#content{
    margin-left: 210px;
}

#content{ margin-left: 210px; }

ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ свойства зависят ΠΎΡ‚ оформлСния сайта.

Π’Π΅ΡΡŒ ΠΊΠΎΠ΄ CSS Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

#top { /* Π¨Π°ΠΏΠΊΠ° с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ страницы */
    background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ  */
    padding: 10px 0 10px 10px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
    margin-bottom: 5px; /* РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ шапкой ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ */
    font-size: 24px; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
    font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */
}
#menu { /* МСню сайта */
    width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° мСню */
    background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */
    float: left; /* Бостыковка со слоСм ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
    padding: 3px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля */
}
#content { /* ОсновноС содСрТаниС */
    background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */
    margin-left: 210px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */
    margin-bottom: 5px /* ΠžΡ‚ΡΡ‚ΡƒΠΏ снизу */
}
#content p{
	padding: 3px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°*/
}
#bottom { /* Подвал */
    background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */
    padding: 3px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
}

#top { /* Π¨Π°ΠΏΠΊΠ° с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ страницы */ background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */ padding: 10px 0 10px 10px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-bottom: 5px; /* РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ шапкой ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ */ font-size: 24px; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */ } #menu { /* МСню сайта */ width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° мСню */ background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */ float: left; /* Бостыковка со слоСм ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ padding: 3px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля */ } #content { /* ОсновноС содСрТаниС */ background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */ margin-left: 210px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */ margin-bottom: 5px /* ΠžΡ‚ΡΡ‚ΡƒΠΏ снизу */ } #content p{ padding: 3px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°*/ } #bottom { /* Подвал */ background: #e3e8cc; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ border: solid 1px black; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ */ padding: 3px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ }

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Рис. 2. ЛСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π½Π΅ лСвая, Π° правая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°.

ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ: основныС свойства

Код html-структуры остаСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ, ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ лишь CSS-свойства.

1. Для Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Π΅ΠΌ свойства, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈ использовании Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°: float ΠΈ width
1 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#menu{
    float: right; 
    width: 20%;
}

#menu{ float: right; width: 20%; }

2 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#menu{
    float: right; 
    width: 200px;
}

#menu{ float: right; width: 200px; }

2. Для ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Π΅ΠΌ свойство, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ внСшний отступ ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° (margin-right). Π­Ρ‚ΠΎΡ‚ отступ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ + 1px ΠΈΠ»ΠΈ 1%:
1 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#content{
    margin-right: 21%;
}

#content{ margin-right: 21%; }

2 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚:

#content{
    margin-right: 210px;
}

#content{ margin-right: 210px; }

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Рис. 3. ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ позиционирования Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

ΠŸΡ€ΠΈ использовании Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Π»Π΅Π²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ устанавливаСтся Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.
НапримСр:
ЛСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°:

position:absolute;
width: ...px;
left: ...px; 
top: ...px;

position:absolute; width: …px; left: …px; top: …px;

ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°:

margin-left: ...px; /* отступ слСва, Ρ€Π°Π²Π½Ρ‹ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */

margin-left: …px; /* отступ слСва, Ρ€Π°Π²Π½Ρ‹ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */

Β«Π Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΡΡ‚ΡŒΒ» достигаСтся Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Π·Π° счСт ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-страницу Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Для Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

1. РасполоТим основныС html-элСмСнты страницы ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

 <div>
  <p>
   Бсылка 1<br>
   Бсылка 2<br>
   Бсылка 3<br>
   Бсылка 4<br>
   </p>
  </div>
  <div>
   <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </p>
  </div>

<div> <p> Бсылка 1<br> Бсылка 2<br> Бсылка 3<br> Бсылка 4<br> </p> </div> <div> <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div>

2. Для Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°Π΄Π°Π΅ΠΌ свойства, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈ использовании позиционирования Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ β€” position, width, left ΠΈ top:

#col1 { /* ЛСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ 
    position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
    width: 190px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°*/
    left: 0px; /* ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° */ 
    top: 0px; /* ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΎΠΊΠ½Π° */ 
    background: #800000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */
    padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ 
}

#col1 { /* ЛСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */ width: 190px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°*/ left: 0px; /* ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° */ top: 0px; /* ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΎΠΊΠ½Π° */ background: #800000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ }

3. Π—Π°Π΄Π°Π΅ΠΌ свойства для ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈ использовании позиционирования Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ β€” margin-left:

#col2 { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ 
    margin-left: 200px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва=ΡˆΠΈΡ€ΠΈΠ½Π΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ + padding */ 
    background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */
    padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
}

#col2 { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ margin-left: 200px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва=ΡˆΠΈΡ€ΠΈΠ½Π΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ + padding */ background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ }

4. УдаляСм лишниС отступы Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

body {
    padding: 0; /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Opera */ 
    margin: 0; /* ΠžΠ±Π½ΡƒΠ»ΡΠ΅ΠΌ значСния отступов Π½Π° Π²Π΅Π±-страницС */ 
   }

body { padding: 0; /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Opera */ margin: 0; /* ΠžΠ±Π½ΡƒΠ»ΡΠ΅ΠΌ значСния отступов Π½Π° Π²Π΅Π±-страницС */ }

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Рис. 4. Π Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

Одинаковая высота ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

На рис. 4 Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π½Π΅ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ высоту. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ высоту Π΅ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² использования Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свойств, ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… являСтся Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ (border).

1. ОбС ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² слой-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€:

<div>
  <div>
  <p>
   Бсылка 1<br>
   Бсылка 2<br>
   Бсылка 3<br>
   </p>
  </div>
  <div>
   <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </p>
  </div>
</div>

<div> <div> <p> Бсылка 1<br> Бсылка 2<br> Бсылка 3<br> </p> </div> <div> <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div> </div>

2. Для Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ устанавливаСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, внСшний отступ слСва ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния (!), Ρ€Π°Π²Π½Ρ‹ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°, ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ слСва, Ρ€Π°Π²Π½ΠΎΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°:

#col1 { /* ЛСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ 
    position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
    width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */
    left: 0px; /* ПолоТСниС ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° */ 
    top: 0px; /* ПолоТСниС ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΎΠΊΠ½Π° */
    margin-left: -200px; /* внСшний Π»Π΅Π²Ρ‹ΠΉ отступ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния */
    padding-left: 200px; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ */
    background: #800000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */
}

#col1 { /* ЛСвая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */ width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ left: 0px; /* ПолоТСниС ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° */ top: 0px; /* ПолоТСниС ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΎΠΊΠ½Π° */ margin-left: -200px; /* внСшний Π»Π΅Π²Ρ‹ΠΉ отступ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния */ padding-left: 200px; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ */ background: #800000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */ }

3. Для ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ свойства позиционирования Π½Π΅ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ свойства для оформлСния ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ:

#col2 { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ 
Β 
    background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */
    padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
}

#col2 { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° */ background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ }

4. Для слоя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° Ρ†Π²Π΅Ρ‚ β€” с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ:

#container {
    border-left: 200px solid #800000;
}

#container { border-left: 200px solid #800000; }

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Рис. 6. Колонки ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высоты

ВСрстка Π±Π»ΠΎΠΊΠ°ΠΌΠΈ DIV. Π‘ самого Π½Π°Ρ‡Π°Π»Π° — html(5), css

ВСрстка Π±Π»ΠΎΠΊΠ°ΠΌΠΈ div Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ стала стандартом ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ряд прСимущСств ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вСрсткой. Однако Π½Π° Π΄Π΅Π»Π΅ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡƒΡ‚Π°ΡŽΡ‚ΡΡ Π² ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ этих самых Π±Π»ΠΎΠΊΠΎΠ².

Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ основныС ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΡ€ΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС. БСйчас ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π±Ρ€Π°Ρ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ стандарт html5, Π° просто рассмотрим основу основ ΠΏΡ€ΠΈ вСрсткС Π±Π»ΠΎΠΊΠ°ΠΌΠΈ div, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ создании ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° страницы.

Π§Ρ‚ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтом?

ΠžΠ±Π»Π°ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ элСмСнта Π½Π° страницС прСдставлСна ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ начинаСтся с Π½ΠΎΠ²ΠΎΠΉ строки.
Π‘Π°ΠΌΡ‹ΠΌ распространённым элСмСнтом, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ Π² Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС, являСтся ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт <div>.

Π˜Ρ‚Π°ΠΊ, ΠΎΡ‚ простого ΠΊ слоТному. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, ΠΊΠ°ΠΊ отобразятся Π±Π»ΠΎΠΊΠΈ div ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Π΅Π· стилСй, Π²Π»ΠΈΡΡŽΡ‰ΠΈΡ… Π½Π° ΠΈΡ… ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Для наглядности стили ΠΊ элСмСнтам Π±ΡƒΠ΄Π΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΠΎ, Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style.

<div>Π‘Π»ΠΎΠΊ 1</div>
<div> Π‘Π»ΠΎΠΊ 2</div>
<div> Π‘Π»ΠΎΠΊ 3</div>

Π‘Π»ΠΎΠΊ 1

Π‘Π»ΠΎΠΊ 2

Π‘Π»ΠΎΠΊ 3

Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:

<div>Π‘Π»ΠΎΠΊ 1</div>
<div> Π‘Π»ΠΎΠΊ 2</div>
<div> Π‘Π»ΠΎΠΊ 3</div>

Π‘Π»ΠΎΠΊ 1

Π‘Π»ΠΎΠΊ 2

Π‘Π»ΠΎΠΊ 3

Π’ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ согласно спСцификации располагаСтся с Π½ΠΎΠ²ΠΎΠΉ строки. Π­Ρ‚ΠΎ ΠΈΡ… Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос, ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ div Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС, Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ?

Для этого сущСствуСт свойство float, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт, с ΠΊΠ°ΠΊΠΎΠΉ стороны Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½. ΠŸΡ€ΠΈ этом с Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ края, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами.

Бвойство float ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • left – блок выравниваСтся ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ справа
  • right – блок выравниваСтся ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ слСва
  • none – ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, Π±Π»ΠΎΠΊ Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠ°ΠΊ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ….

Π”ΠΎΠ±Π°Π²ΠΈΠΌ float:left ΠΊ нашим Π±Π»ΠΎΠΊΠ°ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΠ»ΠΈΡΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ:

<div>Π‘Π»ΠΎΠΊ 1</div>
<div> Π‘Π»ΠΎΠΊ 2</div>
<div> Π‘Π»ΠΎΠΊ 3</div>

Π‘Π»ΠΎΠΊ 1

Π‘Π»ΠΎΠΊ 2

Π‘Π»ΠΎΠΊ 3

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, Π±Π»ΠΎΠΊΠΈ Π²Ρ‹ΡΡ‚Ρ€ΠΎΠΈΠ»ΠΈΡΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС. Π₯ΠΎΡ€ΠΎΡˆΠΎ, допустим, ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ div снизу, ΠΈ сдСлаСм это Π±Π΅Π· указания свойства float:

<div>Π‘Π»ΠΎΠΊ 1.  Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div> Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div> Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Π‘Π»ΠΎΠΊ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Π’ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊ добавился ΠΊΠ°ΠΊ Ρ‚ΠΎ ΠΊΡ€ΠΈΠ²ΠΎ. ΠšΠ°ΠΆΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ добавился с Π½ΠΎΠ²ΠΎΠΉ строки ΠΏΠΎΠ΄ Π‘Π»ΠΎΠΊ 1. На самом Π΄Π΅Π»Π΅, Π‘Π»ΠΎΠΊ 4 Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ мСсто ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π‘Π»ΠΎΠΊΠ° 1 ΠΈ Π½Π° 450 пиксСлов Π²ΠΏΡ€Π°Π²Π°. Π’ΠΎΡ‚ посмотритС:

Π‘Π»ΠΎΠΊ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ Π²Ρ‹ΡˆΠ»ΠΎ? Π’ΠΊΡ€Π°Ρ‚Ρ†Π΅, Ρ‚Π°ΠΊ происходит, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ элСмСнты с float Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Однако, это Ρ‚Π΅ΠΌΠ° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ. Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ ΠΌΡ‹ познакомимся с Π½ΠΎΠ²Ρ‹ΠΌ свойством clear, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ управляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов:

  • left – запрСщаСт ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с Π»Π΅Π²ΠΎΠΉ стороны, всС элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ с Π½ΠΎΠ²ΠΎΠΉ строки (ΠΏΠΎΠ΄ элСмСнтом)
  • rigth – запрСщаСт ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ элСмСнта с ΠΏΡ€Π°Π²ΠΎΠΉ стороны
  • both – запрСщаСт ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ элСмСнта с ΠΎΠ±ΠΎΠΈΡ… сторон, рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° явно Π½Π°Π΄ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ элСмСнт с Π½ΠΎΠ²ΠΎΠΉ строки ΠΈΠ»ΠΈ нСизвСстно с ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ стороны Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами

Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π‘Π»ΠΎΠΊΡƒ 4 свойство clear:left, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π·Π°ΠΏΡ€Π΅Ρ‚ΠΈΡ‚ этому элСмСнту ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов с Π»Π΅Π²ΠΎΠΉ стороны.

<div>Π‘Π»ΠΎΠΊ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Π‘Π»ΠΎΠΊ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Π‘Π»ΠΎΠΊ 4 размСстился с Π½ΠΎΠ²ΠΎΠΉ строки, ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π°Π΄ΠΎ.

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ сразу ΡƒΠΊΠ°Π·Π°Π»ΠΈ clear:left. Π‘Ρ‹Π²Π°ΡŽΡ‚ ситуации, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅ Π·Π½Π°Π΅ΠΌ, с ΠΊΠ°ΠΊΠΎΠΉ стороны встрСтится ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ, поэтому Π² Ρ‚Π°ΠΊΠΈΡ… случаях стоит ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ clear:both, ΠΎΡ‚ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΉ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с ΠΎΠ±Π΅ΠΈΡ… сторон. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ div Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ.

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊΠΈ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ float Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС, Ссли позволяСт ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. Если Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Π½Π΅ ΡƒΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² ряд, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒΡΡ Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку. Если это ΠΊΡ€ΠΈΡ‚ΠΈΡ‡Π½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ вСрсткС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π½ΡƒΠΆΠ½ΠΎ это ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Ρƒ Π±Π»ΠΎΠΊΠΎΠ² с float ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ β€“Β Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ (px) ΠΈΠ»ΠΈ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΡƒΡŽ (%, rem ΠΈ Ρ‚.Π΄.). Π”Π°Π»ΡŒΡˆΠ΅ посмотрим Π½Π° Ρ‚Π°ΠΊΠΈΠ΅ ситуации.

Как ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π±Π»ΠΎΠΊΠΈ, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ эти Π±Π»ΠΎΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ?

ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°ΠΌ родитСля ΠΈ использованиС свойства margin: 0 auto;

ΠŸΠΎΡ‡Π΅ΠΌΡƒ собствСнно Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ ΠΌΡ‹ Π΄Π°Π»ΠΈ класс .wrapper ? Β«wrapperΒ» Π² ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Β«ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ°Β».Β Π­Ρ‚ΠΎ нСкая общСпризнанная ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π°Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈ Ρ‚Π΅ΠΌ самым позволяСт ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ/Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π½ΠΈΡ… посрСдством измСнСния самого родитСля.

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΡƒΠ΅ΠΌ Π΅Ρ‘.

<div>
<div>Π‘Π»ΠΎΠΊ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Π‘Π»ΠΎΠΊ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Π‘Π»ΠΎΠΊ 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Π—Π΄Π΅ΡΡŒ Π²Ρ€ΠΎΠ΄Π΅ всё просто.

А Ссли Π½Π°ΠΌ Π½Π΅ нравится, Ρ‡Ρ‚ΠΎ тСкст Π²ΠΏΠ»ΠΎΡ‚Π½ΡƒΡŽ ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°Π΅Ρ‚ ΠΊ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Ρ…ΠΎΡ‚ΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ поля Π±Π΅Π· внСсСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css. Π”ΠΎΠ±Π°Π²ΠΈΠΌ элСмСнтам свойство padding:

Π‘Π»ΠΎΠΊ 1. Lorem

Π‘Π»ΠΎΠΊ 2. Lorem ipsum

Π‘Π»ΠΎΠΊ 3. Lorem ipsum

Π‘Π»ΠΎΠΊ 4. Lorem

И Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ наша вСрстка Ρ€Π°ΡΡΡ‹ΠΏΠ°Π»Π°ΡΡŒ! Π‘Π»ΠΎΠΊ 3 ΠΊΡƒΠ΄Π° Ρ‚ΠΎ ΡƒΠ΅Ρ…Π°Π». ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ Π²Ρ‹ΡˆΠ»ΠΎ? ΠžΡ‚Π²Π΅Ρ‚ прост. Π”ΠΎΠ±Π°Π²ΠΈΠ² поля элСмСнтам ΠΌΡ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ»ΠΈ ΠΈΡ… ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ значСния Ρ‚Π°ΠΊΠΎΠ²Ρ‹:

Π‘Π»ΠΎΠΊ 1: 10 + 200 + 10 = 220px

Π‘Π»ΠΎΠΊ 2: 10 + 150 + 10 = 170px

Π‘Π»ΠΎΠΊ 3: 10 + 100 + 10 = 120px

Π‘Π»ΠΎΠΊ 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Ρ€Π΅Ρ… Π±Π»ΠΎΠΊΠΎΠ² 510, ΠΎΠ½ΠΈ Π½Π΅ ΡƒΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ родитСля (450) ΠΈ ΠΏΠΎΡ‚ΠΎΠΌΡƒ пСрСносятся Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку.

Как ΠΏΠΎΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ? МоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  1. Π—Π°Π΄Π°Ρ‚ΡŒ Π·Π°Π½ΠΎΠ²ΠΎ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΠΏΠΎΠ»Π΅ΠΉ. УмСньшив Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠΎΠ². ВсС снова Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ встанСт Π² ΠΎΠ΄Π½Ρƒ строку. Π‘ΠΎΠ³Π»Π°ΡΠΈΡ‚Π΅ΡΡŒ, это Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ? ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· Π»Π΅Π·Ρ‚ΡŒ Π² вСрстку ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ.
  2. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство box-sizing: border-box. Π§Ρ‚ΠΎΠ±Ρ‹ расчСт брался ΠΈΠ· ΠΎΠ±Ρ‰Π΅ΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±Π»ΠΎΠΊΠ°. Π‘ΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ блоковая модСль сss.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, получаСтся Ρ‚Π°ΠΊ:

<div>
<div>Π‘Π»ΠΎΠΊ 1. Lorem</div>
<div>Π‘Π»ΠΎΠΊ 2. Lorem ipsum</div>
<div>Π‘Π»ΠΎΠΊ 3. Lorem ipsum</div>
<div>Π‘Π»ΠΎΠΊ 4. Lorem</div>
</div>

Π‘Π»ΠΎΠΊ 1. Lorem

Π‘Π»ΠΎΠΊ 2. Lorem ipsum

Π‘Π»ΠΎΠΊ 3. Lorem ipsum

Π‘Π»ΠΎΠΊ 4. Lorem

Π’Π΅ΠΏΠ΅Ρ€ΡŒ собСрём всю ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠΈΠΉ Ρ‚ΠΈΠΏΠΎΠ²ΠΎΠΉ Ρ‚Ρ€Ρ‘Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ вСрсткой, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ максимально Π΄ΠΎ 900px, послС Ρ‡Π΅Π³ΠΎ вСсь ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Β Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        Π¨Π°ΠΏΠΊΠ° сайта
    </div>
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus. 
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum!
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus.
    </div>
    
    <div>
        Подвал
    </div>
</body>
</html>

ПишСм стили:

body {
    max-width: 900px; /* ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ максимальной ΡˆΠΈΡ€ΠΈΠ½Ρ‹  */
    margin: 0 auto;
}

/* для всСх Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ body измСняСм Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ расчСта ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ добавляСм всС Π±Π»ΠΎΠΊΠ°ΠΌ поля 10px */
body div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

. header {
    background: #CCA69E;
    padding: 10px;
}

.left-sidebar {
    width: 20%;
    background: #8ED9B6;
    float: left;
}

.content {
    float: left;
    width: 60%;    
}

.right-sidebar {
    width: 20%;
    background: #FF9282;
    float: left;
}

.footer {
    background: #000;
    clear: both; /* Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅ΠΌ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с ΠΎΠ±ΠΎΠΈΡ… сторон, Π±Π»ΠΎΠΊ выводится с Π½ΠΎΠ²ΠΎΠΉ строки */
    color: #ccc;
}

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Если Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ нСпонятно β€” ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅ Π² коммСнтариях.

HTML5 | Блочная вСрстка

Блочная вСрстка. Π§Π°ΡΡ‚ΡŒ 2

ПослСднСС обновлСниС: 24.04.2016

Π’ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅ Π±Ρ‹Π»ΠΎ рассмотрСно созданиС страницы с двумя ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° страницу ΠΈ большСС количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ структуру. НапримСр, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° Π²Π΅Π±-страницу Π²Ρ‚ΠΎΡ€ΠΎΠΉ сайдбар:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная вСрстка Π² HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#leftSidebar{
				background-color: #ddd;
			}
			#rightSidebar{
				background-color: #bbb;
			}
			#main{
				background-color: #eee;
				height: 200px;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div>Π¨Π°ΠΏΠΊΠ° сайта</div>
		<div>Π›Π΅Π²Ρ‹ΠΉ сайдбар</div>
		<div>ΠŸΡ€Π°Π²Ρ‹ΠΉ сайдбар</div>
		<div>ОсновноС содСрТимоС</div>
		<div>Π€ΡƒΡ‚Π΅Ρ€</div>
    </body>
</html>

Π—Π΄Π΅ΡΡŒ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅ ΠΊΠΎΠ΄ ΠΎΠ±ΠΎΠΈΡ… сайдбаров Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄Ρ‚ΠΈ Π΄ΠΎ Π±Π»ΠΎΠΊΠ° с основным содСрТимым, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΡ….

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ стили ΠΎΠ±ΠΎΠΈΡ… сайдбаров ΠΈ основного Π±Π»ΠΎΠΊΠ°:


#leftSidebar{
	background-color: #ddd;
	float: left;
	width: 150px;
}
#rightSidebar{
	background-color: #bbb;
	float: right;
	width: 150px;
}
#main{
	background-color: #eee;
	height: 200px;
	margin-left: 170px;
	margin-right: 170px;
}

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅ Ρƒ ΠΎΠ±ΠΎΠΈΡ… ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² — сайдбаров Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ свойство float — Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ left, Π° Ρƒ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ right.

HTML5 | Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ

ПослСднСС обновлСниС: 24.04.2016

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

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ сначала ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ всС Π±Π»ΠΎΠΊΠΈ Π²Π΅Π±-страницы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная вСрстка Π² HTML5</title>
        <style>
			div{
				margin: 10px;
				border: 1px solid black;
				font-size: 20px;
				height: 80px;
			}
            #header{ 
				background-color: #ccc;
			}
			#sidebar{
				background-color: #bbb;
				float: right;
				width: 150px;
			}
			#main{
				background-color: #fafafa;
				height: 200px;
				margin-right: 170px;
			}
			#menu{
				background-color: #ddd;
			}
			#content{
				background-color: #eee;
			}
			#footer{ 
				background-color: #ccc;
			}
        </style>
    </head>
    <body>
		<div>Π¨Π°ΠΏΠΊΠ° сайта</div>
		<div>ΠŸΡ€Π°Π²Ρ‹ΠΉ сайдбар</div>
		<div>
			<div>МСню</div>
			<div>ОсновноС содСрТимоС</div>
		</div>
		<div>Π€ΡƒΡ‚Π΅Ρ€</div>
    </body>
</html>

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅ Π² Π³Π»Π°Π²Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ΄ΡƒΡ‚ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ: сначала Π±Π»ΠΎΠΊ мСню, Π° ΠΏΠΎΡ‚ΠΎΠΌ Π±Π»ΠΎΠΊ основного тСкста.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊ Π±Π»ΠΎΠΊΡƒ мСню:


#menu{
	background-color: #ddd;
	float: left;
	width: 160px;
}
#content{
	background-color: #eee;
	margin-left: 180px;
}

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅ Ρƒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ элСмСнта, ΠΊΠΎΠΈΠΌ являСтся Π±Π»ΠΎΠΊ мСню, ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ свойства float ΠΈ width. А Ρƒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°ΡŽΡ‰Π΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° content устанавливаСтся отступ слСва.

Аналогично ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ мСню справа:


#menu{
	background-color: #ddd;
	float: right;
	width: 160px;
}
#content{
	background-color: #eee;
	margin-right: 180px;
}

Π‘Π»ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈ встроСнный ΠΌΠ°ΠΊΠ΅Ρ‚ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅ — CSS: каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

Π’ этом руководствС ΠΌΡ‹ исслСдуСм основы Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Π΅Π΄ΡƒΡ‚ сСбя Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС элСмСнты, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°.

ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ Π² спСцификации CSS 2.1, которая ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ Π»ΡŽΠ±Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ‡Π°ΡΡ‚ΡŒΡŽ контСкста форматирования . Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ встроСнными, Π½ΠΎ Π½Π΅ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. ΠœΡ‹ описываСм Π±Π»ΠΎΠΊΠΈ уровня Π±Π»ΠΎΠΊΠ° ΠΊΠ°ΠΊ ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π² контСкстС форматирования Π±Π»ΠΎΠΊΠ° , Π° Π±Π»ΠΎΠΊΠΈ встроСнного уровня ΠΊΠ°ΠΊ ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π²ΠΎ встроСнном контСкстС форматирования .

ПовСдСниС элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ контСкст Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ встроСнного форматирования, Ρ‚Π°ΠΊΠΆΠ΅ опрСдСляСтся Π² этой спСцификации. Для элСмСнтов с контСкстом форматирования Π±Π»ΠΎΠΊΠ° Π² спСцификации ΡƒΠΊΠ°Π·Π°Π½ΠΎ:

Β«Π’ контСкстС форматирования Π±Π»ΠΎΠΊΠ° Π±Π»ΠΎΠΊΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, начиная с Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части содСрТащСго Π±Π»ΠΎΠΊΠ°. РасстояниС ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя ΠΎΠ΄Π½ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌΠΈ полями опрСдСляСтся свойствами поля. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними Π±Π»ΠΎΠΊΠ°ΠΌΠΈ уровня Π±Π»ΠΎΠΊΠ° Π² контСкстС форматирования Π±Π»ΠΎΠΊΠ° ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ.

Π’ контСкстС форматирования Π±Π»ΠΎΠΊΠ° Π»Π΅Π²Ρ‹ΠΉ внСшний ΠΊΡ€Π°ΠΉ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° касаСтся Π»Π΅Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ° (ΠΏΡ€ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ справа Π½Π°Π»Π΅Π²ΠΎ ΠΏΡ€Π°Π²Ρ‹Π΅ края ΠΊΠ°ΡΠ°ΡŽΡ‚ΡΡ) Β». — 9.4.1

Для элСмСнтов со встроСнным контСкстом форматирования:

Β«Π’ контСкстС встроСнного форматирования боксы Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ, начиная с Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части содСрТащСго Π±Π»ΠΎΠΊΠ°. ΠœΠ΅ΠΆΠ΄Ρƒ этими полями ΡΠΎΠ±Π»ΡŽΠ΄Π°ΡŽΡ‚ΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ отступы. Π‘Π»ΠΎΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ: ΠΈΡ… ниТняя ΠΈΠ»ΠΈ вСрхняя Ρ‡Π°ΡΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π°, ΠΈΠ»ΠΈ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½ΠΈΡ… ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹.ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, содСрТащая ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ, ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‰ΠΈΠ΅ линию, называСтся Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ Β». — 9.4.2

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ спСцификация CSS 2.1 описываСт Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠ°ΠΊ находящиСся Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ записи свСрху Π²Π½ΠΈΠ·. НапримСр, описывая Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. ПовСдСниС Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… ΠΈ встроСнных элСмСнтов ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ письма, ΠΈ ΠΌΡ‹ рассмотрим это Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ руководствС ΠΏΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌ Flow Layout ΠΈ Writing.

Π‘Π»ΠΎΠΊΠΈΡ€ΡƒΠΉΡ‚Π΅ элСмСнты Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ письма, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° английском языкС, с располоТСниСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

Π’ Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ письма Ρ‚ΠΎΠ³Π΄Π° Π±Ρ‹ раскладывал ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

Π’ этом руководствС ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° английском языкС ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ письма. Однако всС описанноС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, Ссли ваш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ находится Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ письма.

Как ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Π² спСцификации, поля ΠΌΠ΅ΠΆΠ΄Ρƒ двумя Π±Π»ΠΎΠΊΠ°ΠΌΠΈ — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ создаСт Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами. ΠœΡ‹ Π²ΠΈΠ΄ΠΈΠΌ это Π½Π° ΠΎΡ‡Π΅Π½ΡŒ простом ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈΠ· Π΄Π²ΡƒΡ… Π°Π±Π·Π°Ρ†Π΅Π², ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ я Π΄ΠΎΠ±Π°Π²ΠΈΠ» Ρ€Π°ΠΌΠΊΡƒ.Π’Π°Π±Π»ΠΈΡ†Π° стилСй Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ добавляСт ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ ΠΏΡƒΡ‚Π΅ΠΌ добавлСния поля свСрху ΠΈ снизу.

Если ΠΌΡ‹ установим поля для элСмСнта Π°Π±Π·Π°Ρ†Π° Π½Π° 0 , Ρ‚ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠΏΡ€ΠΈΠΊΠ°ΡΠ°Ρ‚ΡŒΡΡ.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ элСмСнты Π±Π»ΠΎΠΊΠ° Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ всС пространство Π²ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, поэтому наши Π°Π±Π·Π°Ρ†Ρ‹ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈ становятся максимально большими Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТащСго ΠΈΡ… Π±Π»ΠΎΠΊΠ°. Если ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΈΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Ρ€Π°ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌ, Π΄Π°ΠΆΠ΅ Ссли для Π½ΠΈΡ… Π±ΡƒΠ΄Π΅Ρ‚ мСсто рядом.ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ мСсто, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ прСдлоТСния Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ Π² этом Ρ€Π΅ΠΆΠΈΠΌΠ΅ записи.

БниТСниС поля

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

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π°Π±Π·Π°Ρ†Π΅Π² составляСт 20 пиксСлСй , Π° Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅ — 40 пиксСлСй . Π Π°Π·ΠΌΠ΅Ρ€ поля ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ составляСт 40 пиксСлСй , Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ мСньшСС Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° сТимаСтся с большим Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΏΠΎΠ»Π΅ΠΌ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ сТатии ΠΌΠ°Ρ€ΠΆΠΈ Π² нашСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ ОсвоСниС свСртывания ΠΌΠ°Ρ€ΠΆΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если Π²Ρ‹ Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ Π»ΠΈ поля, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ значСния Box Model Π² DevTools вашСго Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.Π­Ρ‚ΠΎ даст Π²Π°ΠΌ фактичСский Ρ€Π°Π·ΠΌΠ΅Ρ€ поля, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит.

ВстроСнныС элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π² Ρ‚ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прСдлоТСния Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² этом ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ письма. Π₯отя ΠΌΡ‹ Π½Π΅ склонны Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ встроСнных элСмСнтах ΠΊΠ°ΠΊ ΠΎ Π±Π»ΠΎΠΊΠ΅, ΠΊΠ°ΠΊ это Π±Ρ‹Π²Π°Π΅Ρ‚ со всСм Π² CSS. Π­Ρ‚ΠΈ встроСнныС Π±Π»ΠΎΠΊΠΈ располоТСны ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ. Если Π² содСрТащСм Π±Π»ΠΎΠΊΠ΅ нСдостаточно мСста для всСх Π±Π»ΠΎΠΊΠΎΠ², Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒΡΡ Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку.Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ строчными Π±Π»ΠΎΠΊΠ°ΠΌΠΈ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ встроСнных Π±Π»ΠΎΠΊΠ°, созданных Π°Π±Π·Π°Ρ†Π΅ΠΌ с элСмСнтом Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.

Π‘Π»ΠΎΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ слов ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтом ΠΈ послС элСмСнта Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌΠΈ для обСспСчСния Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС Π±Ρ‹Π»ΠΎ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ Π² Π±Π»ΠΎΠΊ, Π½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ.

Π Π°Π·ΠΌΠ΅Ρ€ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ бокса Π² Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° (Ρ‚.Π΅. высота ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π° английском языкС) опрСдСляСтся самым высоким ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я сдСлал элСмСнт 300%; это содСрТимоС Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ опрСдСляСт высоту Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ поля Π½Π° этой строкС.

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π²Π΅Π΄ΡƒΡ‚ сСбя Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС Π±Π»ΠΎΠΊΠΈ, Π² нашСм РуководствС ΠΏΠΎ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ форматирования.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Π² CSS2.1, Π½ΠΎΠ²Ρ‹Π΅ ΡƒΡ€ΠΎΠ²Π½ΠΈ CSS Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… ΠΈ встроСнных Π±Π»ΠΎΠΊΠΎΠ². Бвойство display опрСдСляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈ Π»ΡŽΠ±Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ. На ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ отобраТСния CSS 3 ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ свойство display мСняСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚.

Π’ΠΈΠΏ отобраТСния элСмСнта опрСдСляСт Ρ‚ΠΈΠΏ внСшнСго отобраТСния; это опрСдСляСт, ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊ отобраТаСтся рядом с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ контСкстС форматирования. Он Ρ‚Π°ΠΊΠΆΠ΅ опрСдСляСт Ρ‚ΠΈΠΏ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ отобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ вСсти сСбя Π±Π»ΠΎΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ этого элСмСнта. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ясно Π²ΠΈΠ΄Π½ΠΎ ΠΏΡ€ΠΈ рассмотрСнии Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ мСня Π΅ΡΡ‚ΡŒ

, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ я Π΄Π°Π» display: flex . Π“ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт: ΠΎΠ½ отобраТаСтся Π² Π½ΠΎΠ²ΠΎΠΉ строкС ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС свободноС мСсто Π²ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ.Π­Ρ‚ΠΎ внСшний Ρ‚ΠΈΠΏ отобраТСния Π±Π»ΠΎΠΊΠ° .

Π“ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‚ Π² контСкстС Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ форматирования, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт — это элСмСнт с display: flex , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Ρ‚ΠΈΠΏ отобраТСния flex , ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ контСкст Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ форматирования для прямых Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов.

Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π² CSS, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅ΠΌ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π‘Π°ΠΌ ящик ΠΈΠΌΠ΅Π΅Ρ‚ внСшний Π²ΠΈΠ΄ отобраТСния, поэтому ΠΎΠ½ Π·Π½Π°Π΅Ρ‚, ΠΊΠ°ΠΊ вСсти сСбя вмСстС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ полями.Π—Π°Ρ‚Π΅ΠΌ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Ρ‚ΠΈΠΏ отобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ мСняСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов. Π­Ρ‚ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ внСшний ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Ρ‚ΠΈΠΏ отобраТСния. Π“ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ становятся Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ уровня, поэтому ΠΈΡ… внСшний Ρ‚ΠΈΠΏ отобраТСния опрСдСляСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ контСкста Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ форматирования. Π£ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Ρ‚ΠΈΠΏ отобраТСния , ΠΎΠ΄Π½Π°ΠΊΠΎ, , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΡ… Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‚ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π² наш Π³ΠΈΠ±ΠΊΠΈΠΉ элСмСнт, Ρ€Π°ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС элСмСнты, Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π΅ мСняСт ΠΈΡ… Ρ‚ΠΈΠΏ отобраТСния.

Π­Ρ‚Π° концСпция внСшнСго ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ Ρ‚ΠΈΠΏΠ° отобраТСния Π²Π°ΠΆΠ½Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π½Π°ΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚Π°ΠΊΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, ΠΊΠ°ΠΊ Flexbox ( display: flex ) ΠΈ Grid Layout ( display: grid ), всС Π΅Ρ‰Π΅ участвуСт Π² Π±Π»ΠΎΡ‡Π½ΠΎΠΌ ΠΈ встроСнном ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚ΠΈΠΏΠΎΠΌ внСшнСго отобраТСния этих ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² являСтся Π±Π»ΠΎΠΊ .

ИзмСнСниС контСкста форматирования, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ участвуСт элСмСнт.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ элСмСнты ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ встроСнного контСкста форматирования с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ смысл для этого элСмСнта.НапримСр, элСмСнт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для выдСлСния слова ΠΈ отобраТаСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ смысла ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ этот элСмСнт ΠΊΠ°ΠΊ элСмСнт уровня Π±Π»ΠΎΠΊΠ°, пСрСходя Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊ элСмСнты Π±Π»ΠΎΠΊΠ°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, установив display: block Π½Π° . Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ сСмантичСских HTML-элСмСнтов для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ способ Π΅Π³ΠΎ отобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π’ этом руководствС ΠΌΡ‹ рассмотрСли, ΠΊΠ°ΠΊ элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅, ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС элСмСнты. Из-Π·Π° повСдСния этих элСмСнтов ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML Π±Π΅Π· стиля CSS Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ для чтСния Π²ΠΈΠ΄Π΅. Понимая, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ, Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ для внСсСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² способ отобраТСния элСмСнтов.

Π‘Π»ΠΎΠΊ-схСма | Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ SAP Fiori

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ поиску ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ
  • Π”ΠΎΠΌ
  • ΠΠ°Ρ‡Π°Ρ‚ΡŒ
  • ΠŸΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с SAP Fiori
  • Π§Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ
  • Π€ΠΎΠ½Π΄
    • SAP Fiori
    • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ проСктирования
    • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… устройств: ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ vs.Адаптивный
    • Content Density (ΡƒΡŽΡ‚Π½Ρ‹ΠΉ ΠΈ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ)
    • Π’Π΅ΠΌΡ‹
    • Motion Design
    • Π¦Π²Π΅Ρ‚Π°
      • Π‘Π΅Π»ΠΈΠ· Π¦Π²Π΅Ρ‚Π°
      • ΠšΠ²Π°Ρ€Ρ†Π΅Π²Ρ‹Π΅ свСтлыС Ρ‚ΠΎΠ½Π°
      • ΠšΠ²Π°Ρ€Ρ† Ρ‚Π΅ΠΌΠ½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ²
    • Π˜ΠΊΠΎΠ½ΠΎΠ³Ρ€Π°Ρ„ΠΈΡ
    • Π’ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°
    • Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Π² SAP Fiori
  • ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… систСм
    • Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅
    • ΠžΠ±ΡŠΡΡΠ½ΡΠ΅ΠΌΡ‹ΠΉ AI
    • БоотвСтствиС
    • Π Π΅ΠΉΡ‚ΠΈΠ½Π³
    • Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ
    • ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ситуаций
    • ΠžΡ‚Π·Ρ‹Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ
  • ΠžΠ±Ρ‰ΠΈΠ΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ
    • SAP Fiori Launchpad
      • ΠžΠ±Π·ΠΎΡ€
      • Бнаряд
      • Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница
      • ΠœΠ΅ΡΡ‚Π°
      • ΠŸΠ»ΠΈΡ‚ΠΊΠ°
      • Поиск ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
      • ΠšΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ поиск
      • УвСдомлСния
      • Услуги
    • Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ дСйствия
    • БотрудничСство
    • ΠŸΠΎΠ³Ρ€ΡƒΠ·ΠΎΡ‡Π½ΠΎ-Ρ€Π°Π·Π³Ρ€ΡƒΠ·ΠΎΡ‡Π½Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹
    • Экспорт Π² ΡΠ»Π΅ΠΊΡ‚Ρ€ΠΎΠ½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ
    • Π€Π»Π°Π³ ΠΈ ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅
    • ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΏΠΎΠ»Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΡ‹
    • Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
      • ΠžΠ±Π·ΠΎΡ€
      • Π”Π°Ρ‚Ρ‹
      • НомСра
      • ВрСмя
      • Π•Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния
    • Π’ΠΏΠ΅Ρ€Π΅Π΄
    • ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° состояний занятости
    • Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСмантичСскиС Ρ†Π²Π΅Ρ‚Π°
    • Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ
      • ΠžΠ±Π·ΠΎΡ€
      • Копия
      • Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ со ссылкой
      • Global Flow
      • ΠœΠ΅ΡΡ‚Π½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ
      • МассовоС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
      • Части ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°
      • ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹
    • ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° сообщСний
    • Мобильная интСграция
      • ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ мобильной ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ
    • Навигация
    • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ управлСния Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ — ΠžΠ±Π·ΠΎΡ€
    • Бостояния элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса
    • ИспользованиС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок
    • ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ ΠΈ усСчСниС тСкста
  • ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΏΠ»Π°Π½Ρ‹ этаТСй ΠΈ каркасы
    • ΠžΠ±Π·ΠΎΡ€
    • Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² SAP Fiori Elements
    • ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹
      • Π‘Ρ…Π΅ΠΌΠ° сравнСния
      • ДинамичСская страница
      • ДинамичСская страница — сСмантичСская страница
      • Гибкая ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½Π½
      • ЛСттСрбокс
      • ΠœΠ½ΠΎΠ³ΠΎΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ€Π½Ρ‹ΠΉ
      • БистСма Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°
    • ΠŸΠ»Π°Π½Ρ‹ этаТСй
        АналитичСский список
      • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°
      • ΠΠ°Ρ‡Π°Π»ΡŒΠ½Π°Ρ страница
      • Бписок ΠΎΡ‚Ρ‡Π΅Ρ‚ΠΎΠ²
      • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°
      • ΠžΠ±Π·ΠΎΡ€ Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°
      • ΠœΠ°ΡΡ‚Π΅Ρ€
      • Π Π°Π±ΠΎΡ‡ΠΈΠΉ список
    • ΠšΠ°Ρ€ΠΊΠ°ΡΡ‹
      • Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΏΡƒΡ‚ΠΈ Π°Π½Π°Π»ΠΈΠ·Π°
      • SAP Smart Business Framework
    • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° инструмСнтов
      • ΠžΠ±Π·ΠΎΡ€ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ инструмСнта
      • Π‘Ρ…Π΅ΠΌΠ° Π±Π»ΠΎΠΊΠ°
      • Адаптивный Ρ€Π°Π·Π²Π΅Ρ‚Π²ΠΈΡ‚Π΅Π»ΡŒ
      • Боковая навигация
      • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
  • элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса
    • ДСйствиС
      • Лист дСйствий
      • ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари
      • Кнопка
      • Бсылка
      • Smart Link
      • Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ
    • БотрудничСство
      • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΡ€ΠΌΠ°
      • Π₯ронология
    • ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€
      • ΠšΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ
      • лайтбокс
      • ПанСль
    • Визуализация Π΄Π°Π½Π½Ρ‹Ρ…
      • Окно 3D-просмотра
      • АналитичСская ΠΊΠ°Ρ€Ρ‚Π°
      • Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° (VizFrame)
      • Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Π“Π°Π½Ρ‚Π°
      • Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Π°Ρ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°
      • ΠšΠ°Ρ€Ρ‚Π°
      • ΠœΠΈΠΊΡ€ΠΎ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°
      • Π‘Π΅Ρ‚Π΅Π²ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊ
      • Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ выполнСния
      • Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ состояния
      • Π’ Π‘Ρ‡Π΅Ρ‚
    • Π”ΠΈΠ°Π»ΠΎΠ³
    • ДисплСй
      • Аватар
      • Π“Ρ€ΡƒΠΏΠΏΠ° Π°Π²Π°Ρ‚Π°Ρ€ΠΎΠ²
      • Π’Π°Π»ΡŽΡ‚Π°
      • Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ тСкст
      • ΠžΠ±Ρ‰ΠΈΠΉ Ρ‚Π΅Π³
      • HTML
      • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
      • Π­Ρ‚ΠΈΠΊΠ΅Ρ‚ΠΊΠ°
      • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ отобраТСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°
      • ВСкст
      • НазваниС
    • ДинамичСскоС Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ содСрТимоС
    • Π€ΠΈΠ»ΡŒΡ‚Ρ€
      • ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½Ρ‹ΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€
      • Π€ΠΈΠ»ΡŒΡ‚Ρ€ Π±Π°Ρ€
      • Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ панСль
      • ПанСль Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°
    • Гибкая сСтка
    • Π€ΠΎΡ€ΠΌΠ° / ΠŸΡ€ΠΎΡΡ‚Π°Ρ Ρ„ΠΎΡ€ΠΌΠ°
    • ПанСль Π²ΠΊΠ»Π°Π΄ΠΎΠΊ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ
    • НСвидимый тСкст
    • Бписок
      • ΠžΠ±Π·ΠΎΡ€
      • ΠŸΡƒΠ½ΠΊΡ‚ списка дСйствий
      • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ элСмСнт списка
      • Π‘Π΅Ρ‚ΠΊΠ° Бписок
      • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка Π²Π²ΠΎΠ΄Π°
      • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²
      • Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ элСмСнт списка
    • Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ°
      • Занят, Π΄ΠΈΠ°Π»ΠΎΠ³
      • Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ занятости
      • БостояниС занятости
    • БообщСния
      • Окно сообщСний
      • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° сообщСния
      • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ сообщСния
      • Полоса сообщСний
      • Вост сообщСния
      • ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ сообщСния
    • ΠœΠΈΠΊΡ€ΠΎ-тСхнологичСский ΠΏΠΎΡ‚ΠΎΠΊ
    • ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Ρ‰ΠΈΠΊ PDF
    • ΠŸΠΎΠΏΠΎΠ²Π΅Ρ€
      • ΠŸΠΎΠΏΠΎΠ²Π΅Ρ€
      • Быстрый просмотр
    • Π₯ΠΎΠ΄ процСсса
    • ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠ²
    • Π‘Ρ‚ΠΎΠ»
      • ΠžΠ±Π·ΠΎΡ€
      • АналитичСский стол (ALV)
      • Π’Π°Π±Π»ΠΈΡ†Π° сСтки
      • ΠŸΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡ ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ
      • Адаптивный стол
      • Π£ΠΌΠ½Ρ‹ΠΉ стол
      • Π‘Ρ‚ΠΎΠ» ΠΈΠ· Π΄Π΅Ρ€Π΅Π²Π°
    • ПанСль инструмСнтов
      • ΠžΠ±Π·ΠΎΡ€
      • ПанСль инструмСнтов Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹
      • ПанСль инструмСнтов Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°
      • ПанСль инструмСнтов Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
      • ПанСль инструмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
      • ПанСль инструмСнтов Π΄Π΅Ρ€Π΅Π²Π°
    • Π”Π΅Ρ€Π΅Π²ΠΎ
    • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π²Π²ΠΎΠ΄

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π±Π»ΠΎΠΊΠ° — докумСнтация UIkit

Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, объСдиняя ΠΈΡ… Π² Π±Π»ΠΎΠΊΠΈ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ стилями.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс .uk-block ΠΊ элСмСнту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π‘Π»ΠΎΠΊ

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

НацСнка

  
...

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΈ отступы, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… классов. Если Π΄Π²Π° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠ° ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, отступы Π±ΡƒΠ΄ΡƒΡ‚ автоматичСски Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹.

Класс ОписаниС
.uk-block-default Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π±Π΅Π»Ρ‹ΠΉ ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ.
. uk-Π±Π»ΠΎΠΊ-Π±Π΅Π· Π·Π²ΡƒΠΊΠ° ДобавляСт свСтлый Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°.
.uk-block-primary ДобавляСт основной Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°.
.uk-Π±Π»ΠΎΠΊ-Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ ДобавляСт Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ.

ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π• Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π½Π° Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠ°Ρ…, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ .uk-Contrast класс ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Contrast.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠŸΠ΅Ρ€Π²ΠΈΡ‡Π½Ρ‹ΠΉ

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

НацСнка

  
...

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ больший отступ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ, просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс . uk-block-large . Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· .uk-padding- * классы ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Utility.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *