Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
CSS3 | Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Box-sizing
Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 30.09.2021
Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π°Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² width (ΡΠΈΡΠΈΠ½Π°) ΠΈ height (Π²ΡΡΠΎΡΠ°).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² — auto
, ΡΠΎ Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ (ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, em) ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²:
width: 150px; width: 75%; height: 15em;
ΠΠΈΠΊΡΠ΅Π»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΎΡΠ½ΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ. ΠΠ΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ em Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²ΡΡΠΎΡΡ ΡΡΠΈΡΡΠ° Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. ΠΡΠ»ΠΈ
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΡΠ°Π²Π΅Π½ 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ 1 em Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π΅Π½ 16 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ.
Π’ΠΎ Π΅ΡΡΡ Π΅ΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ Π² 15em, ΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ½Π° ΡΠΎΡΡΠ°Π²ΠΈΡ 15 * 16 = 230 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΠ»ΠΈ ΠΆΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²Π·ΡΡ ΠΈΠ· ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΈΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° width Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠ»ΠΈ, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ,
ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div>
ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 75%,
ΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° <div>
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1000 * 0.75 = 750 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΈΡΠΈΠ½Π° Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π² Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° div ΡΠΎΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° height ΡΠ°Π±ΠΎΡΠ°ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ width, ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΡΠΎΡΠ° Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Π Π°Π·ΠΌΠ΅ΡΡ Π² CSS3</title> <style> div.outer{ width: 75%; height: 200px; margin: 10px; border: 1px solid #ccc; background-color: #eee; } div.inner{ width: 80%; height: 80%; margin: auto; border: 1px solid red; background-color: blue; } </style> </head> <body> <div> <div></div> </div> </body> </html>
Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠ³ΡΡ Π² ΠΈΡΠΎΠ³Π΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΠ΅Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
width
ΠΈ height
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Π Π°Π·ΠΌΠ΅ΡΡ Π² CSS3</title> <style> div.outer{ width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; } </style> </head> <body> <div> ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² CSS 3 </div> </body> </html>
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅, Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° width
— 200px — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΈΠ½Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,
Π° ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width) +
Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ padding) + ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ border-width) + Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin). Π’ΠΎ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²
230 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΡΡΠ΅ΡΠΎΠΌ Π²Π½Π΅ΡΠ½ΠΈΡ
ΠΎΡΡΡΡΠΏΠΎΠ² ΡΠΎΡΡΠ°Π²ΠΈΡ 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ°ΡΡΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ:
min-width: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°
max-width: ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°
min-height: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°
max-height: ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°
min-width: 200px; width:50%; max-width: 300px;
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°Π²Π½Π° 50% ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
content-box
: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅Π°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π±Π΅ΡΠ΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²width
ΠΈheight
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: content-box;
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠΎΡΡ Π² 100 ΠΏΠΈΠΊΡΠ΅ΠΉ.
padding-box
: ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΡΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ:
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;
ΠΠ΄Π΅ΡΡ ΡΠ΅Π°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 200px (width) — 10px (padding-left) — 10px (padding-right) = 180px.
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
border-box
: ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΡΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ:
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;
ΠΠ΄Π΅ΡΡ ΡΠ΅Π°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 200px (width) — 10px (padding-left) — 10px (padding-right) — 5px (border-left-width)
— 5px (border-right-width) = 170px.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ Π΄Π²Π° Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° box-sizing:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Π Π°Π·ΠΌΠ΅ΡΡ Π² CSS3</title> <style> div{ width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; } div.outer1{ box-sizing: content-box; } div.outer2{ box-sizing: border-box; } </style> </head> <body> <div> ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² CSS 3 </div> <div> ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² CSS 3 </div> </body> </html>
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π±Π»ΠΎΠΊΠ° ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ width ΠΈ height Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ, ΠΏΠΎΡΡΠΎΠΌΡ
ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ:
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π² CSS — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠΎΠΊΠ°Ρ Π²Ρ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π»ΠΈΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π²Π°ΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ β Π²Π°ΠΆΠ½ΠΎ, ΠΈ Π² ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΏΠΎΠ΄Π²Π΅Π΄Π΅ΠΌ ΠΈΡΠΎΠ³ ΠΏΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΠΌΠΈΠ½Π°Ρ , ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π·Π°Π΄Π°Π½Π½ΡΠ΅ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π½Π° Π½ΠΈΡ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS. ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΠ°ΠΉΠ»Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ β Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΎΠ½ ΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ· ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠ΅Π³Π° <img>
ΠΈΠ»ΠΈ CSS, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠ³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅, ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΌΠΊΡ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π°.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΏΡΡΡΠΎΠΉ <div>
Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ <div>
Π² ΡΠ²ΠΎΠΉ HTML-ΠΊΠΎΠ΄ Π±Π΅Π· ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ°ΠΌΠΊΡ, ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π»ΠΈΠ½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ ΡΡ
Π»ΠΎΠΏΠ½ΡΠ²ΡΠΈΠ΅ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π΅ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΡΠ° Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΡΠ½ΡΠΉ, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²Π°ΠΌ Π·Π½Π°ΠΊΠΎΠΌΠΎ. Π£ Π½Π΅Π³ΠΎ Π½Π΅Ρ Π²ΡΡΠΎΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΠΏΡΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΡ ΡΠ΅ΠΊΡΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΎΡ
Π²Π°ΡΠ΅Π½Π½ΡΠΌ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠ³ΠΎ <div>
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ β ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. Π Π°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ), Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ. ΠΠΎΠ·ΡΠΌΠΈΡΠ΅ Π½Π°Ρ <div>
ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΡΡΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΅ΠΌΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ width
ΠΈ height
ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ. ΠΠ°ΠΊ ΠΌΡ ΡΠ·Π½Π°Π»ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅ ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ, Π·Π°Π΄Π°Π½Π½Π°Ρ Π²ΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ·-Π·Π° ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ, ΠΆΠ΅ΡΡΠΊΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π»ΠΈΠ½Π½Ρ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ β ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ
ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ, ΠΈ, ΠΊΠ°ΠΊ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π² ΡΡΠΎΠΊΠ΅, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌ, ΠΎΠ½ΠΈ ΡΠ°ΡΡΠΎ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ Π²Π·Π°ΠΈΠΌΠΎΠ·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ Ρ Π΄Π»ΠΈΠ½ΠΎΠΉ. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ, ΠΎΡ ΡΠ΅Π³ΠΎ ΡΡΠΎΡ ΠΏΡΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ. Π ΡΠ»ΡΡΠ°Π΅ Π±Π»ΠΎΠΊΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ Π±Π»ΠΎΠΊΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π½Π°Ρ <div>
Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 100% Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°. ΠΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ ΡΠΈΡΠΈΠ½Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, ΠΎΠ½ Π·Π°ΠΉΠΌΠ΅Ρ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ.
Margins ΠΈ paddings Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ margins
ΠΈ padding
Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΡΡΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ Π±Π»ΠΎΠΊ. ΠΡ ΠΏΡΠΈΡΠ²ΠΎΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌΡ Π±Π»ΠΎΠΊΡ margin
10% ΠΈ padding
10%. Padding ΠΈ margin ΡΠ²Π΅ΡΡ
Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎ ΠΈ margins ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΆΠΈΠ΄Π°ΡΡ, ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ margins Π±ΡΠ΄Π΅Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ margins β Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ!
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ margins ΠΈ padding, Π·Π°Π΄Π°Π½Π½ΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ inline ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° β ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ·ΡΠΊΠΎΠΌ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ΅ ΠΏΠΎΠ»Ρ ΠΈ ΠΎΡΡΡΡΠΏΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 10% width. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΠΌΠ΅ΡΡ margins ΠΈ padding ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ»Ρ. ΠΡΠΎΡ ΡΠ°ΠΊΡ ΡΡΠΎΠΈΡ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠΎΠΌΠΈΠΌΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ°Π·Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ» ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height
. ΠΠ»ΠΎΠΊ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π΅ ΡΡΠ°Π½Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΌΠ΅ΡΡΠ° Π² Π±Π»ΠΎΠΊΠ΅.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΄Π²Π° Π±Π»ΠΎΠΊΠ°, ΠΎΠ±ΠΎΠΈΠΌ Π·Π°Π΄Π°Π»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ Π² 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ»ΠΎΠΊ ΡΠ»Π΅Π²Π° ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ ΡΡΠΎ Π² Π½Π΅ΠΌ Π½Π΅Ρ ΡΠ΅ΠΊΡΡΠ°. Π Π±Π»ΠΎΠΊΠ΅ ΡΠΏΡΠ°Π²Π° Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ΅ΡΡΠ°, ΡΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π·Π°Π΄Π°Π½Π½Π°Ρ Π²ΡΡΠΎΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΡΠ²Π΅Π»ΠΈΡΠΈΠ»ΡΡ.
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ΅ΠΌΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΈΠ·Π±Π΅Π³Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Π§Π°ΡΡΠΎ max-width
ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π΅ΡΠ»ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ width: 100%
Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ»Π° ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π±Ρ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π±Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ.
ΠΡΠ»ΠΈ Π±Ρ Π²Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ max-width: 100%
%, ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»Π° Π±Ρ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈΠ·Π°ΡΠΈΡ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΠΆΠ΄Ρ. ΠΠ΅ΡΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΎ Π·Π°Π΄Π°Π½ΠΎ width: 100%
ΠΈ ΠΎΠ½ΠΎ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΠΎΠ»ΡΡΠ΅ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠΎΡΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Π½ΠΎ max-width: 100%
, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΡΡΠΈΠ³Π»ΠΎ 100% ΡΠ²ΠΎΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. Π’ΡΠ΅ΡΡΠ΅ ΠΏΠΎΠ»Π΅ ΡΠ½ΠΎΠ²Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊΠΆΠ΅ Ρ max-width: 100%
Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΌΠ΅Π½ΡΡΠΈΠ»ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΌΠ΅Π½ΡΡΠ°Π»ΠΈΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Π°ΠΌ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ Π½Π΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π΄Π»Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ ΡΠ°Π±ΠΎΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΎΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π΄Π΅Π½Π΅Π³, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π»ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅.
ΠΡΡΠΏΠΎΜΡΡ β ΡΡΠΎ Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°ΠΉΡΠ°. Π CSS Ρ Π½Π°Ρ Π΅ΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ Π²ΡΡΠΏΠΎΡΡΠ° β vw
Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ° ΠΈ vh
Π²ΡΡΠΎΡΡ Π²ΡΡΠΏΠΎΡΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΏΠΎΡΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
1vh
ΡΠ°Π²Π΅Π½ 1% ΠΎΡ Π²ΡΡΠΎΡΡ Π²ΡΡΠΏΠΎΡΡΠ° ΠΈ 1vw
ΡΠ°Π²Π΅Π½ 1% ΡΠΈΡΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π±Π»ΠΎΠΊΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΠΊΡΡΠ°. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ Π±Π»ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 20vh ΠΈ 20vw. Π Π±Π»ΠΎΠΊΠ΅ Π΅ΡΡΡ Π±ΡΠΊΠ²Π° A
, ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ font-size
10vh.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ vh
ΠΈ vw
β ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΡΡΠΈΡΡ; ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²ΡΡΠΏΠΎΡΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°Π΄Π°Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΏΠΎΡΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²ΡΡΠΏΠΎΡΡΠ°, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π² Π½ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ <iframe>
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°). ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎΠ»Ρ ΠΈ ΡΠ΅ΠΊΡΡΠ°.
Π Π°Π·ΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²ΡΡΠΏΠΎΡΡΠΎΠΌ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π² Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ΅ΠΊΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΡΠΎΡΡ 100vh, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½ΠΈΠΆΠ΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΡΡ Π²Π½ΠΈΠ·.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅, Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΠ»ΠΈ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅ — ΡΠΌ. ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ²ΠΎΠΈΡ Π½Π°Π²ΡΠΊΠΎΠ²: Π·Π°Π΄Π°Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΡΠΎΡ ΡΡΠΎΠΊ Π΄Π°Π» Π²Π°ΠΌ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΡΠ΅ ΠΊ CSS ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠ΅, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΡΠ°Π½Π΅Ρ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΡΠΌ Π΄Π»Ρ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅, ΡΡΠΎΠΈΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΡ .
ΠΠ°ΠΊ Π·Π°Π΄Π°Π΅ΡΡΡ Π² css ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° width, height, padding
ΠΡ Π°Π²ΡΠΎΡΠ°: Π·Π΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠ³Π°. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Ρ ΠΎΡΡ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Ρ Π²Π°ΠΌΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎ ΡΠΎΠΌΡ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π² css ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°, ΡΠΎ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ° ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΈΠΏΡ Π΄Π΅Π»ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π΅ Π²ΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ β Π±Π»ΠΎΠΊΠΈ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΎΠΎΠ±ΡΠ΅ Π΄Π΅Π»ΡΡΡΡ Π½Π° Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΈ ΡΡΡΠΎΡΠ½ΡΠ΅. ΠΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠΏΠΎΠΊΠΎΠΉΠ½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ. ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β ΡΡΡΠ»ΠΊΠ°. ΠΠ° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ ΡΡΡΠ»ΠΎΠΊ, ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° Π½Π΅ΠΉ.
ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. ΠΠ΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ ΠΎΠ½ΠΈ Π½Π΅ ΡΠΌΠΎΠ³ΡΡ ΡΡΠ°ΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄. ΠΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° β Π°Π±Π·Π°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ΅Π³ΠΎΠΌ p. Π’Π°ΠΊ Π²ΠΎΡ, Π·Π°ΡΠ΅ΠΌ Ρ Π²Π°ΠΌ Π²ΡΠ΅ ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΡ? ΠΡΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ β ΡΠ°Π·ΠΌΠ΅Ρ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΡΠΎ ΠΌΡ ΠΈ Π±ΡΠ΄Π΅ΠΌ Π΄Π΅Π»Π°ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
Π ΠΈΡ. 1. ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΠΎΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
Π‘Π°ΠΌΡΠ΅ ΠΏΡΠΎΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ β ΡΡΠΎ width ΠΈ height. ΠΠ·Π½Π°ΡΠ°ΡΡ ΠΎΠ½ΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ. Π Π½ΠΈΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ min- ΠΈ max-. Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΈΠ»ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . ΠΠ½ΠΎΠ³Π΄Π° Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° em (Π²ΡΡΠΎΡΠ° ΡΡΠΈΡΡΠ°), Π½ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Ρ Π΅Π΅ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Π° ΡΠ΅ΠΊΡΡΠ°. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ΅ΡΠΊΠΈ (Π³Π»Π°Π²Π½ΡΠ΅ ΡΡΡΡΠΊΡΡΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΡΠ°Π±Π»ΠΎΠ½Π°), Π² ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π½Π°Π·ΡΠ²Π°ΡΡ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΌΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½, ΡΡΠΎ ΡΠΎΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ.
Π Π°Π·ΠΌΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
Π ΠΏΠΈΠΊΡΠ΅Π»ΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Π΅ΡΡ ΡΠ°ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 1000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘ΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΡΠΎΡ Π±Π»ΠΎΠΊ ΠΈ Π΅ΠΌΡ ΠΏΠΈΡΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°.
#container{
width: 1000px;
}
#container{ width: 1000px; } |
ΠΡΠ»ΠΈ Π·Π°ΠΏΠΈΡΠ°Π½ΠΎ ΡΠ°ΠΊ, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π½ΠΈ ΠΏΠΎΠ΄ ΠΊΠ°ΠΊΠΈΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠ³ΠΎΠΌ. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΠΏΡΠ΅ΠΆΠ½Π΅ΠΉ. Π Π°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΡΠ° Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡ ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΠΎ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠΎΠ² ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΡΠΈΠ°Π»ΡΠ½Π°Ρ ΡΠ΅ΡΡ ΠΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠΊΠ½Π° ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ°Π±Π»ΠΎΠ½ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Ρ ΠΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅ Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½.
Π Π²ΡΠ΅ ΠΆΠ΅ ΡΠΌΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ Π½ΠΎΠ²ΡΠ΅ ΡΠΊΡΠ°Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΡΡ ΡΠΎΠ»Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΠ°ΡΠΈΠΊ ΡΠ°ΡΡΠ΅Ρ. Π ΡΠ²ΡΠ·ΠΈ Ρ ΡΡΠΈΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π³ΠΎΠ΄Ρ Π²ΡΠ΅ ΡΠ°ΡΠ΅ Π³Π»Π°Π²Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ ΠΊΠ°ΡΠΊΠ°ΡΠ° ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π½Π΅ ΠΆΠ΅ΡΡΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ:
#container{
max-width: 1320px;
}
#container{ max-width: 1320px; } |
Π ΡΡΠΎ ΡΡΠΎ Π·Π½Π°ΡΠΈΡ? Π ΡΠΎ, ΡΡΠΎ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ. ΠΡΠ»ΠΈ ΡΠΆΠ°ΡΡ ΠΎΠΊΠ½ΠΎ, ΡΠΎ ΠΎΠ½ ΡΠΎΠΆΠ΅ ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡ. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ, ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 1320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΎΠ²Π½ΠΎ. Π£ΠΌΠ΅Π½ΡΡΠ°Ρ ΠΎΠΊΠ½ΠΎ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π».
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΡ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π΅ΡΠ΅ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠ»ΠΈ Π±Π»ΠΎΠΊΡ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΡΠΎ ΠΎΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΡΠΆΠ΅, ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
#container{
min-width: 600px;
}
#container{ min-width: 600px; } |
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ Π±Π»ΠΎΠΊ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π½Π΅Ρ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΡΠ° ΡΠ°ΠΌΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π Π°Π·ΠΌΠ΅Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΠ°Π΄Π°Π²Π°ΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ. ΠΡΠΈ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½Π΅ΡΡΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π²Ρ Π·Π°Ρ ΠΎΡΠ΅Π»ΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π²Π° Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ, Π° ΡΠΏΡΠ°Π²Π° β ΠΎΠ±Π»Π°ΡΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, Π³Π΄Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ΅ΠΊΡΡΠΎΠ²Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠ°ΡΡΡ, ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΡΠΎΠ²Π°ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠ΅ΠΌΡ Π½Π° ΡΠΎΡΡΠΌΠ΅. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌ.
#sidebar{
float: left;
width: 28%;
}
#content{
float: right;
width: 62%;
}
#sidebar{ float: left; width: 28%; } #content{ float: right; width: 62%; } |
Π ΠΈΡΠΎΠ³Π΅ ΡΠ°ΠΉΠ΄Π±Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΡ 28% ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π° Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ ΠΎΠ±ΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ), Π° ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π±Π»ΠΎΠΊ β 62%. ΠΡ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΡΠ°Π²ΠΈΡ 90%. ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ 10 ΠΎΡΡΠ°Π²ΠΈΠΌ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ, ΡΠ°ΠΌΠΊΠΈ ΠΈ Ρ.Π΄.
Π ΠΈΡ. 2. Π Π΅Π·ΠΈΠ½ΠΎΠ²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
ΠΠ°ΠΊ Π²Π»ΠΈΡΡΡ ΠΎΡΡΡΡΠΏΡ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠΎΠ²
ΠΠΎΠ³Π΄Π° Π²Ρ Π·Π°Π΄Π°Π΅ΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°ΠΊΠΎΠΌΡ-ΡΠΎ Π±Π»ΠΎΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° width, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΊ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠΉ ΡΠ°ΡΡΠΈ, Π² ΠΊΠΎΡΠΎΡΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π² css padding ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°, ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΡΠ°ΠΌΠΊΠ° (border).
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ. ΠΡ Π΄Π°Π»ΠΈ Π΅ΠΉ 28% ΠΎΡ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎ ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ Π½Π΅ ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π»ΠΎ ΠΊ ΠΊΡΠ°ΡΠΌ, Π΅ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄Π°ΡΡ ΠΊΠΎΠ΅-ΠΊΠ°ΠΊΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ. Π’Π°ΠΊΠΆΠ΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ ΡΠ°ΠΌΠΎΡΠΊΡ.
#sidebar{
padding: 10px 20px;
border: 2px solid black;
}
#sidebar{ padding: 10px 20px; border: 2px solid black; } |
ΠΠΎΡ ΡΠΆΠ΅ ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ°ΠΉΠ΄Π±Π°ΡΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΠ»Π°ΡΡ Π½Π° 44 ΠΏΠΈΠΊΡΠ΅Π»Ρ (ΠΎΡΡΡΡΠΏΡ ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ»Π΅Π²Π° ΠΏΠΎ 20 ΠΈ ΡΠ°ΠΌΠΊΠ° Ρ ΡΡΠΈΡ ΠΆΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΏΠΎ 2). ΠΡΡΡ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π½Π΅ Ρ ΠΎΡΠ΅Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π·Π°ΠΌΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Π½Π°Π΄ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ ΠΈΡ ΡΡΠ°Π·Ρ Ρ ΡΡΠ΅ΡΠΎΠΌ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΡΠ°ΠΌΠΎΠΊ. Π’ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ°ΠΊ:
*{
box-sizing: border-box;
}
*{ box-sizing: border-box; } |
ΠΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ Π² ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° (width) Π½Π°ΡΠΈΠ½Π°ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ (padding) ΠΈ ΡΠ°ΠΌΠΊΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² 62%, ΠΎΠ½ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠ°ΠΊΠΎΠ²ΡΠΌ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅. Π Π²Π΅Π΄Ρ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ, Π½ΠΎ ΠΎΠ½ΠΈ ΡΠΆΠ΅ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° Π½Π΅ Π²Π»ΠΈΡΡΡ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° ΠΎΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅ Π²Π»Π΅Π·Π΅Ρ ΠΈ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈΡΡ Π²Π½ΠΈΠ·.
Π Π΅Π·ΠΈΠ½ΠΎΠ²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
Π§ΡΠΎΠ±Ρ Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π² css ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°, Π΅ΠΉ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΌ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ»ΠΈ Π΅ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ max-width, ΡΠΎ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΈ Π±Π»ΠΎΠΊ Π±ΡΠ΄ΡΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎ, ΡΡΠΎ Π΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΎ Π΄Π»Ρ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°.
Π ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ, ΠΈΠ· ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΌΠ°ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π° ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΉ ΠΎΠΏΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
ΠΡΠΎΠ³
Π css ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΡ ΡΡΠΎΠ³ΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΎΠ½Π°. Π ΠΊΠΎΠ½ΡΠ΅ Ρ Π΅ΡΠ΅ Ρ ΠΎΡΠ΅Π» Π±Ρ Π²Π°ΠΌ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΡΡΡ, ΠΈΠ· ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΠ»ΠΎΠ²ΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
PSD to HTML
ΠΠ΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° Π½Π° HTML5 ΠΈ CSS3 Ρ Π½ΡΠ»Ρ
Π‘ΠΌΠΎΡΡΠ΅ΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ . Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ.
ΠΠ»Π°Π²Π° 7
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΏΠΎΠ»ΡΡ ΠΈ ΠΎΡΡΡΡΠΏΠ°Ρ , ΡΠ°ΡΡΠΊΠ°ΠΆΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ ΡΠ°ΠΌΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ , ΡΠΎΡΠ½Π΅Π΅ ΠΎΠ± ΠΈΡ ΡΠΈΠΏΠ°Ρ .
ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΠ΅Π³ΠΈ) ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π΅ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ: ΠΠ»ΠΎΡΠ½ΡΠ΅ ΠΈ ΡΡΡΠΎΠΊΠΎΠ²ΡΠ΅.
Π§Π΅ΠΌ ΠΎΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ?
ΠΡΠΌΠ°Ρ, ΡΠ°ΠΌΠΈ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΡΡ ΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΡΡ . ΠΠ»ΠΎΡΠ½ΡΠ΅ ΠΈΠ»ΠΈ Π±ΠΎΠΊΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ — ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ Π½Π° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° ΠΊΠΎΡΠΎΡΡΠΌ Π±Π΅Π· ΡΡΡΠ΄Π° ΠΈ Π²Π΅Π»ΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ΅ΡΠ°ΡΠ΅Π»ΡΡΡΠ²Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°Π·ΠΌΠ΅Ρ, Π²Π»ΠΎΠΆΠΈΡΡ Π² Π½ΠΈΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. Π ΡΡΡΠΎΠΊΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΎΠ΄Π½Ρ ΡΡΠΎΠΊΡ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π΅Ρ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠ»ΡΠΆΠ°Ρ Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°.
Π Π±Π»ΠΎΡΠ½ΡΠΌ (block) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ:
<div>, <dl>, <form>, <h2>- <h6>, <hr>, <noscript>, <ol>, <p>, <pre>, <table>, <ul>β¦
Π ΡΡΡΠΎΡΠ½ΡΠΌ (inline) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>β¦
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΎΡΠ»ΠΈΡΠΈΡ ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΈ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΡΡΠΎ:
ΠΠΎΠΊΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠ΅Π±Π΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ, ΡΠ°ΠΊ ΠΈ ΡΡΡΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°. Π‘ΡΡΠΎΡΠ½ΡΠ΅ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
<div>
<b>ΠΡΠΎ <i>ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ ΡΡΡΠΎΠΊΠ°</i> Π² Π±Π»ΠΎΠΊΠ΅</b>
</div>
<i><b>
<div>Π ΡΡΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ ΡΠΎΠ»ΠΈ ΡΡΡΠΎΠΊΠ° ΡΠΎΠ»ΠΈ Π±Π»ΠΎΠΊ. Π’Π°ΠΊ Π»ΡΡΡΠ΅ Π½Π΅ Π΄Π΅Π»Π°ΡΡ!!</div>
</b></i>
ΠΠΎΠΊΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ, Ρ.Π΅. Π² Π½Π°ΡΠ°Π»Π΅ ΠΈ ΠΊΠΎΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ «ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΡΠΎΠΊΠΈ», Π° ΡΡΡΠΎΠΊΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ, ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΡΠΎΠΊΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 100% ΠΈ ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΎΡΡΠ°Π²Π»ΡΡΡ Π·Π° ΡΠΎΠ±ΠΎΠΉ Π²ΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Ρ ΡΡΡΠΎΠΊΠΎΠ²ΡΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΈΡΠΈΠ½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ.
ΠΡΠΌΠ°Ρ, Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>ΠΠ»ΠΎΡΠ½ΡΠ΅ ΠΈ ΡΡΡΠΎΠΊΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ</title>
</head>
<body>
<p>ΠΠ°ΡΠ°Π³ΡΠ°Ρ</p>
<p>ΠΠ°ΡΠ°Π³ΡΠ°Ρ</p>
<p>ΠΠ°ΡΠ°Π³ΡΠ°Ρ</p>
<hr>
<span>Π‘ΡΡΠΎΠΊΠ°</span>
<span>Π‘ΡΡΠΎΠΊΠ°</span>
<span>Π‘ΡΡΠΎΠΊΠ°</span>
<hr>
<div>ΠΠ»ΠΎΠΊ</div>
<div>ΠΠ»ΠΎΠΊ</div>
<div>ΠΠ»ΠΎΠΊ</div>
</body>
</html>
Π‘Π²ΠΎΠΉΡΡΠ²Π° CSS width ΠΈ height — ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π¨ΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- auto — Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ. (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- % — Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°ΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ Π²ΡΡΠΎΡΡ/ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
- px — Π Π°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°ΡΡΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΈΠ»ΠΈ Π»ΡΠ±ΡΡ Π΄ΡΡΠ³ΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠ½ΡΡΡΡ Π² CSS.
ΠΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Π Π°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°</title>
</head>
<body>
<div>ΠΠ»ΠΎΠΊ 1</div>
<div>ΠΠ»ΠΎΠΊ 2</div>
<div>ΠΠ»ΠΎΠΊ 3</div>
</body>
</html>
ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΡΠ²ΠΎΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto, Π° Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ «Π²ΡΠΏΠΎΠ»Π·Π΅Ρ» Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ?
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½Ρ ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ (height, width) Π° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»ΠΈΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π½Π΅ Π²ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ , ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ Π½ΡΠΆΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π½Π° ΡΡΠΊΡ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΡ. ΠΠ° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π°ΡΡΠΈΠ±ΡΡ overflow, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ .
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- visible — ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- hidden — Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° «ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ» Π²ΠΈΠ΄Π½Π° Π»ΠΈΡΡ ΡΠ° Π΅Π³ΠΎ ΡΠ°ΡΡΡ ΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.
- scroll — ΠΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π²ΡΠ΅Π³Π΄Π°! Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
- auto — ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°</title>
</head>
<body>
<div>
<h4 align=»center»>ΠΠΈΠΊΡΠ°Π½Ρ</h4>
ΠΠ° Π΄ΠΎΡΠ°ΡΠΎΠΉ ΡΠ΅ΡΡΠ°ΡΠ΅, Π±Π»ΠΈΠ· ΠΊΠΎΠ½ΠΎΠΏΠ»ΡΠ½ΠΈΠΊΠ°, Π½Π΅Π±Π΅Π·ΡΠ·Π²Π΅ΡΡΠ½Π°Ρ Π²Π΄ΠΎΠ²Π° ΠΠ³ΡΠΈΠΏΠΏΠΈΠ½Π° Π‘Π°Π²Π²Π΅ΡΠ½Π°, ΠΏΠΎΡΡΠ΅Π²Π°Π»Π°, ΠΎΡΡΡΠ°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ»Π»Π΅ΠΆΡΠΊΠΎΠ³ΠΎ Π°ΡΠ΅ΡΡΠΎΡΠ° ΠΠΏΠΎΠ»Π»ΠΎΠ½Π° ΠΠ°ΡΠΏΠΎΠ²ΠΈΡΠ°, ΠΌΠΎΠ»Π»ΡΡΠΊΠ°ΠΌΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΡΡΠ²Π°ΠΌΠΈ, ΠΏΠΎΠ΄ Π°ΠΊΠΊΠΎΠΌΠΏΠ°Π½Π΅ΠΌΠ΅Π½Ρ Π²ΠΈΠΎΠ»ΠΎΠ½ΡΠ΅Π»ΠΈ.
</div>
</body>
</html>
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌ Π² Π½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ, ΡΠ΅ΠΊΡΡΠΎΠΌ, Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ.. ΠΈ Ρ.Π΄. ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ, Π²Π΅ΡΠ½Π΅Π΅, ΠΎΡΡΠ°ΡΡΡΡ «ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΌΠΈ» ΠΈ ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΎ! ΠΠΎ Ρ ΠΎΡΠΎΡΠΎ Π½Π΅ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ .. ΠΈΠ½ΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΡΡΡ «ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΡΡΡ» ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠ΅ΠΉΠΊΠ΅ ΡΠ°Π±Π»ΠΈΡΡ, ΡΡΠΎ ΡΡ ΠΌΠΎΠ», Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, ΠΌΠΎΠΆΠ΅ΡΡ Π±ΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ ΠΈ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.. ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΡΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ, Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Π΅Ρ Π²ΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ.
ΠΠΈΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
- max-height — ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
- max-width — ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
- min -height — ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
- min-width — ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΌΠΎΠ³ΡΡ Π²ΡΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ none — Π±Π΅Π· ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ.
ΠΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°</title>
</head>
<body>
<div>
ΠΡΠ°ΡΠ·Π΅Ρ Internet Explorer ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° css min-width, max-width, min-height ΠΈ max-height.
</div>
</body>
</html>
ΠΠ°ΠΊ ΠΡ ΡΠΆΠ΅ ΠΏΠΎΠ½ΡΠ»ΠΈ Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΡΡ ΠΊΠ°ΠΊ HTML ΡΠ΅Π³ΠΈ, ΡΠ°ΠΊ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS. ΠΡΠΎΠ±ΡΠΌ «Π½Π΅Π²Π΅ΠΆΠ΅ΡΡΠ²ΠΎΠΌ» ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠ°ΠΊ ΠΈ ΠΊ Π²Π΅Π± Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ ΠΎΡΠ»ΠΈΡΠΈΠ»ΡΡ Internet Explorer 6 ΠΈ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ.. ΠΠΏΡΠΎΡΠ΅ΠΌ, ΠΈ Π² ΠΎΡΡΠ°Π»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π²ΡΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π³Π»Π°Π΄ΠΊΠΎ. ΠΡΡΡΠ΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ (ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ) Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ ΠΈΡ Π²Π΅ΡΡΠΈΠΉ. Π ΡΠΎΠ²Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΎ Π±Ρ Π±ΡΠ»ΠΎ ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ — Π² ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ Π½Π° ΠΠ°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅. Π‘ΠΎΠ±Π΅ΡΠΈΡΠ΅ ΡΠ²ΠΎΡ «ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ» Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
Π Π°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° | Π£ΡΠ΅Π±Π½ΡΠ΅ ΠΊΡΡΡΡ
Π Π°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° β ΡΡΠΎ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Π°Ρ Π²Π΅Π»ΠΈΡΠΈΠ½Π° ΠΈ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ°Π·Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ². ΠΠΈΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ°.
Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°
Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΠΌΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²:
ΠΠ° ΡΠΈΡ. 1 ΡΡ Π΅ΠΌΠ°ΡΠΈΡΠ½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π²Π»ΠΈΡΡΡΠΈΠ΅ Π½Π° ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ ΠΎΡΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ.
Π ΠΈΡ. 1. Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width Π·Π°Π΄Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π° Π½Π΅ Π²ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ. ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ width Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, ΡΠΎ ΠΎΠ½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ auto. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ padding, border ΠΈ margin. ΠΠΎΠ΄ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° Π΅ΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 1 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ΅Π³ΠΎ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ.
ΠΡΠΈΠΌΠ΅Ρ 1. Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Π¨ΠΈΡΠΈΠ½Π°</title>
<style>
.block {
background: #FFFAC0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
padding: 20px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
border: 2px solid #EF8031; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
margin: 10px; /* ΠΡΡΡΡΠΏΡ */
}
</style>
</head>
<body>
<div>ΠΠ΅Π² ΡΠ΅Π²ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ, ΡΡΠΎ
ΡΠ΅ΡΡΠΈΡΠΎΡΠΈΡ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ Π΅ΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²ΠΎΠ·Π³Π»Π°ΡΠ°Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΡΡΠΌ ΠΏΡΠΈΡΠΎΠ΄Ρ.</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 2.
Π ΠΈΡ. 2. ΠΠ»ΠΎΠΊ, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠΉ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ
ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width Π·Π°Π΄Π°Π½ΠΎ, ΡΠΎ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ.
div {
width: 400px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */
padding: 10px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
border: 4px solid black; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
margin: 7px; /* ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² */
}
Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 442 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΡΡΠ° Π²Π΅Π»ΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π½ΠΈΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠ»ΡΡ ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π°, Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ»Π΅Π²Π° ΠΈ ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°, ΠΏΠ»ΡΡ ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°, Π³ΡΠ°Π½ΠΈΡΠ° ΡΠΏΡΠ°Π²Π° ΠΈ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π°. Π‘ΡΠΌΠΌΠΈΡΡΠ΅ΠΌ Π²ΡΠ΅ ΡΠΈΡΠ»Π°.
Π¨ΠΈΡΠΈΠ½Π° = 400 + 10 + 10 + 4 + 4 + 7 + 7 = 442
Π¨ΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π½ΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π²ΡΡΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ°
ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ, ΡΡΠΎ ΠΈ ΡΠΈΡΠΈΠ½Π°. Π ΠΈΠΌΠ΅Π½Π½ΠΎ, Π²ΡΡΠΎΡΠ° ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²:
ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΠΎ ΠΎΠ½ΠΎ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ auto, Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. ΠΠ° ΡΠΈΡ.Β 3 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π²Π»ΠΈΡΡΡΠΈΠ΅ Π½Π° Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ°.
Π ΠΈΡ. 3. ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ°
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΡ ΠΎΠΆΠ΅ΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ² ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Ρ Π½ΠΈΡ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ.
1. ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠΌ height, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π±Π»ΠΎΠΊΠ° (ΡΠΈΡ.Β 4).
Π ΠΈΡ. 4. ΠΡΠ΅Π²ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π±Π»ΠΎΠΊΠ°
Π§ΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height Π»ΡΡΡΠ΅ Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ, ΡΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. ΠΠΏΡΠΎΡΠ΅ΠΌ, Π±ΡΠ²Π°ΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΡΡΠΊΠΎ ΡΠΊΠ°Π·Π°Π½Π°, ΡΠΎΠ³Π΄Π° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflowΒ β Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ (ΠΏΡΠΈΠΌΠ΅ΡΒ 2), Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ hidden ΡΠΊΡΡΠ²Π°Π΅Ρ Π²ΡΡ, ΡΡΠΎ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π·Π°Π΄Π°Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ.
ΠΡΠΈΠΌΠ΅Ρ 2. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ overflow
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>ΠΡΡΠΎΡΠ°</title>
<style>
.block {
background: #C5DF94; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
height: 50px; /* ΠΡΡΠΎΡΠ° */
padding: 10px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
overflow: auto; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ */
}
</style>
</head>
<body>
<div>
<p>ΠΠ΅Π² ΡΠ΅Π²ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ, ΡΡΠΎ
ΡΠ΅ΡΡΠΈΡΠΎΡΠΈΡ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ Π΅ΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²ΠΎΠ·Π³Π»Π°ΡΠ°Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΡΡΠΌ ΠΏΡΠΈΡΠΎΠ΄Ρ.</p>
<p>ΠΡ
ΠΎΡΠ½ΠΈΡΠΈΠΉ ΡΡΠ°ΡΡΠΎΠΊ Π»ΡΠ²Π° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π»ΠΈΠ½Ρ ΠΈ ΡΠΈΡΠΈΠ½Ρ
Π΄ΠΎ ΡΡΠΈΠ΄ΡΠ°ΡΠΈ ΠΊΠΈΠ»ΠΎΠΌΠ΅ΡΡΠΎΠ².</p>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 5. ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π½Π° ΡΠ²Π½ΠΎ ΠΈ Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π±Π»ΠΎΠΊ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΡΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π ΠΈΡ. 5. ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅
2. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΡΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π΅ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π½Π°ΡΠ°Π»ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π·Π°Π΄Π°Π½Π° ΡΠ²Π½ΠΎ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΡ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .
ΠΡΠΈΠΌΠ΅Ρ 3. ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ°
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>ΠΡΡΠΎΡΠ°</title>
<style>
html, body {
height: 100%; /* ΠΡΡΠΎΡΠ° */
margin: 0; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ */
}
.block {
background: #C5DF94; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
height: 100%; /* ΠΡΡΠΎΡΠ° */
padding: 20px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
box-sizing: border-box; /* ΠΠ»Π³ΠΎΡΠΈΡΠΌ ΠΏΠΎΠ΄ΡΡΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² */
}
</style>
</head>
<body>
<div>ΠΠ΅Π² ΡΠ΅Π²ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ, ΡΡΠΎ
ΡΠ΅ΡΡΠΈΡΠΎΡΠΈΡ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ Π΅ΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²ΠΎΠ·Π³Π»Π°ΡΠ°Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΡΡΠΌ ΠΏΡΠΈΡΠΎΠ΄Ρ.</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 6. ΠΠ΄Π΅ΡΡ Π΄Π»Ρ <div> ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ Π²ΡΡΡΡΠΏΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <body>, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ height ΡΠ°Π²Π½ΡΠΌ 100%. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π° <body> Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠ΅ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΡΠΎ ΠΈ Π½Π° <div>, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ <body>, ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ <html>, ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ height ΡΠ°Π²Π½ΡΠΌ 100%. Π’ΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ Π²ΡΡΠΎΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΠΈΡ. 6. ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ
Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ width, padding, border ΠΈ margin. Π‘ΡΠΈΡΠ°ΡΡ ΠΈΡΠΎΠ³ΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ². ΠΠ»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ° ΠΏΠΎΠ΄ΡΡΡΡΠ° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-sizing ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ border-box. ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊ Π±Π»ΠΎΠΊΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ width Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ padding ΠΈ border (Π½ΠΎ Π½Π΅ margin). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π½ΡΡΠ΅. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 4 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π° ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ Π²ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅Ρ 4. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ box-sizing
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Π¨ΠΈΡΠΈΠ½Π°</title>
<style>
body {
background: #D6C2AD; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
}
[type=»search»] {
box-sizing: border-box; /* Π¨ΠΈΡΠΈΠ½Π° Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π΅Ρ padding ΠΈ border */
width: 100%; /* Π¨ΠΈΡΠΈΠ½Π° */
border: 1px solid #666; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
padding: 10px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
}
</style>
</head>
<body>
<input type=»search» placeholder=»ΠΠΎΠΈΡΠΊ ΠΏΠΎ ΡΠ°ΠΉΡΡ»>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 7.
Π ΠΈΡ. 7. Π¨ΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
Π Π°Π·ΠΌΠ΅Ρ | CSS | WebReference
ΠΠ»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π½Π΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²ΡΠ²ΠΎΠ΄Π°, Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. Π ΡΠ°Π±Π».Β 1 ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ.
ΠΠ΄ΠΈΠ½ΠΈΡΠ° | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
em | Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
ex | ΠΡΡΠΎΡΠ° ΡΠΈΠΌΠ²ΠΎΠ»Π° x |
ch | Π¨ΠΈΡΠΈΠ½Π° ΡΠΈΠΌΠ²ΠΎΠ»Π° 0 ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
rem | Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
ΠΠ΄ΠΈΠ½ΠΈΡΠ° em ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ font-size). Π ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π·Π°Π»ΠΎΠΆΠ΅Π½ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΉ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ²Π½ΠΎ Π½Π΅ Π·Π°Π΄Π°Π½. ΠΠΎΡΡΠΎΠΌΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ 1em ΡΠ°Π²Π΅Π½ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ°, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Π° em, Π² ΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ 1em ΠΈ 100% ΡΠ°Π²Π½Ρ.
ΠΠ΄ΠΈΠ½ΠΈΡΠ° ex ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π²ΡΡΠΎΡΠ° ΡΠΈΠΌΠ²ΠΎΠ»Π° Β«xΒ» Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅. ΠΠ° ex ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΡΠ΅ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΡΠΎ ΠΈ Π΄Π»Ρ em, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ, ΠΎΠ½ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ°, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΈΠ»ΠΈ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ΄ΠΈΠ½ΠΈΡΠ° ch ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΈΠΌΠ²ΠΎΠ»Π° Β«0Β» Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ em Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°.
Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ em ΠΈ rem ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ. em Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ, Π° rem ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Ρ.Β Π΅. ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html.
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π³ΡΡΠΏΠΏΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π ΡΠ°Π±Π». 2 ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΈΡ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ.
ΠΠ΄ΠΈΠ½ΠΈΡΠ° | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
vw | 1% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° |
vh | 1% ΠΎΡ Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° |
vmin | 1% ΠΎΡ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ· ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° |
vmax | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΠΎΡ Π½Π΅Π³ΠΎ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ 1% |
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ β Π΄ΡΠΉΠΌΡ, ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ, ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΡ, ΠΏΡΠ½ΠΊΡΡ, ΠΏΠΈΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΠ»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ dpi (ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΡΠ΅ΠΊ ΠΏΡΠΈΡ ΠΎΠ΄ΡΡΠΈΡ ΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½ Π΄ΡΠΉΠΌ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΡΠΎΡΠ΅ΠΊ) ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈΠ΄ΡΡ ΠΊ ΠΏΠΈΠΊΡΠ΅Π»Ρ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ΄ΠΈΠ½ Π΄ΡΠΉΠΌ ΡΠ°Π²Π΅Π½ 96 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ. ΠΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΠ΅Π°Π»ΡΠ½ΡΠΉ Π΄ΡΠΉΠΌ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ Π΄ΡΠΉΠΌΠΎΠΌ Π½Π° ΡΠ°ΠΊΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅. ΠΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ dpi ΡΠ΅Π°Π»ΡΠ½ΡΠΉ Π΄ΡΠΉΠΌ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Π΄ΡΠΉΠΌΠΎΠΌ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ 1/96 ΠΎΡ Π΄ΡΠΉΠΌΠ°. Π ΡΠ°Π±Π». 3 ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ.
ΠΠ΄ΠΈΠ½ΠΈΡΠ° | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
px | ΠΠΈΠΊΡΠ΅Π»Ρ |
in | ΠΡΠΉΠΌ (1 Π΄ΡΠΉΠΌ ΡΠ°Π²Π΅Π½ 2,54 ΡΠΌ) |
cm | Π‘Π°Π½ΡΠΈΠΌΠ΅ΡΡ |
mm | ΠΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡ |
pt | ΠΡΠ½ΠΊΡ (1 ΠΏΡΠ½ΠΊΡ ΡΠ°Π²Π΅Π½ 1/72 Π΄ΡΠΉΠΌΠ°) |
pc | ΠΠΈΠΊΠ° (1 ΠΏΠΈΠΊΠ° ΡΠ°Π²Π½Π° 12 ΠΏΡΠ½ΠΊΡΠ°ΠΌ) |
ΠΡΠΈΠΌΠ΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ</title>
<style>
h2 { font-size: 30px; }
p { font-size: 1.5em; }
</style>
</head>
<body>
<h2>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ</h2>
<p>Π Π°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° 1.5 em</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ</title>
<style>
h2 { font-size: 24pt; }
p { margin-left: 30mm; }
</style>
</head>
<body>
<h2>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 24 ΠΏΡΠ½ΠΊΡΠ°</h2>
<p>Π‘Π΄Π²ΠΈΠ³ ΡΠ΅ΠΊΡΡΠ° Π²ΠΏΡΠ°Π²ΠΎ Π½Π° 30 ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΠΎΠ²</p>
</body>
</html>
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ width:Β 30px. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π²Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ. ΠΠ΄ΠΈΠ½ΠΈΡΡ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½ΡΠ»Π΅Π²ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ (margin:Β 0).
Internet Explorer ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΅Π΄ΠΈΠ½ΠΈΡΡ vm Π²ΠΌΠ΅ΡΡΠΎ vmin.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΠ°ΠΆΠ΄Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π΄ΠΈΠΉ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ.
- Recommendation (Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π° W3C ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡ.
- Candidate Recommendation (ΠΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π³ΡΡΠΏΠΏΠ°, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ°Ρ Π·Π° ΡΡΠ°Π½Π΄Π°ΡΡ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΠΌ ΡΠ΅Π»ΡΠΌ, Π½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
- Proposed Recommendation (ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΠΎΠ½ΡΡΠ»ΡΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅ΡΠ° W3C Π΄Π»Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ.
- Working Draft (Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) β Π±ΠΎΠ»Π΅Π΅ Π·ΡΠ΅Π»Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΡΠ°Π²ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ.
- Editor’s draft (Π Π΅Π΄Π°ΠΊΡΠΎΡΡΠΊΠΈΠΉ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ) β ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ° ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΎΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
- Draft (Π§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ) β ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
ΠΡΠ°ΡΠ·Π΅ΡΡ
px, in, cm, mm, pt, pc, em, ex | 3 | 12 | 1 | 3.5 | 1 | 1 |
ch | 9 | 12 | 27 | 20 | 7 | 1 |
rem | 9 | 12 | 4 | 11.6 | 4.1 | 3.6 |
vw, vh | 9 | 12 | 20 | 20 | 6 | 19 |
vmax | 16 | 26 | 15 | 6.1 | 19 | |
vmin | 9 | 12 | 20 | 15 | 6 | 19 |
px, in, cm, mm, pt, pc, em, ex | ||||
ch | 4.4 | 2 | 37 | 7.1.1 |
rem | 2.1 | 2 | 12 | 4 |
vw, vh | 2.1 | 19 | 37 | 6 |
vmax | 4.4 | 19 | 37 | 6.1 |
vmin | 2.1 | 19 | 37 | 6 |
ΠΡΠ°ΡΠ·Π΅ΡΡ
Π ΡΠ°Π±Π»ΠΈΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ.
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ;
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π΅ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ;
- Β β ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π»ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ Π²ΡΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
Π§ΠΈΡΠ»ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 02.03.2020
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
CSS: Π¨ΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π±Π»ΠΎΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΡΠΈΡΠΈΠ½Π°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ½ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΡΠΎΠ²Π½ΠΎ Π½Π° ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΅ΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΡΡΠΎΡΠ° Π±Π»ΠΎΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Ρ.Π΅. Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΠ»ΠΎΡΡ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° width
ΠΈ height
.
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° width
ΠΈ height
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΡΠΈΡΠ»ΠΈΡΡ ΠΎΠ±ΡΡΡ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΡΠΆΠ½ΠΎ ΡΠ»ΠΎΠΆΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΡΠΈΡΠΈΠ½Ρ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΠΌΠΊΠΈ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΈ ΠΎΠ±ΡΠ΅ΠΉ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> <style> p.first { width: 150px; height: 100px; background-color: #B2FFCC; padding: 0px; /*ΠΎΠ±Π½ΡΠ»ΡΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ*/ } p.second { width: 150px; height: 100px; background-color: #C2FFFF; border: 5px ridge #0066FF; padding: 10px; margin: 5px; } </style> </head> <body> <p>ΠΠ»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ.</p> <p>ΠΡΠΎΡ Π°Π±Π·Π°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ, ΠΊΡΠΎΠΌΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ, ΡΠ°ΠΌΠΊΡ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ.</p> </body> </html>
ΠΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Β»
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ. ΠΡΠ»ΠΈ ΠΏΠΎΡΡΠΈΡΠ°ΡΡ ΠΏΠΎ Π½Π°ΡΠ΅ΠΉ ΡΠΎΡΠΌΡΠ»Π΅, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° — 150×100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π²ΡΠΎΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ°:
ΠΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π°: | 5px | + | 10px | + | 150px | + | 10px | + | 5px | = 180px |
Π»Π΅Π²Π°Ρ ΡΠ°ΠΌΠΊΠ° | Π»Π΅Π²ΡΠΉ ΠΎΡΡΡΡΠΏ | ΡΠΈΡΠΈΠ½Π° | ΠΏΡΠ°Π²ΡΠΉ ΠΎΡΡΡΡΠΏ | ΠΏΡΠ°Π²Π°Ρ ΡΠ°ΠΌΠΊΠ° |
ΠΠ±ΡΠ°Ρ Π²ΡΡΠΎΡΠ°: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΠΌΠΊΠ° | Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ | Π²ΡΡΠΎΡΠ° | Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ | Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΠΌΠΊΠ° |
ΡΠΎ Π΅ΡΡΡ 180×130 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΎΠ΄ΠΈΠ½ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ — ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π²ΡΡΠΈΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΡ
ΠΎΠ΄ΠΈΡΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΏΡΠΈΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ overflow. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠ°ΠΊ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΡΠΏΠΈΡΡ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
- visible — Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ, ΡΡΠΎ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow.
- scroll — Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
- auto — Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
- hidden — ΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> <style> div { width:150px; height:200px; border: 1px solid black; overflow:auto; } </style> </head> <body> <div><img src="tree.png"></div> </body> </html>
ΠΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Β»
Π‘ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠΎΠΉ ΡΠΌΠΎΡΡΡΡ:
CSS Π Π°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
CSS Π Π°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS box-sizing
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ Π²
ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ΅Π· CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ°
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΡΠΈΡΠΈΠ½Π° + ΠΎΡΡΡΡΠΏ + Π³ΡΠ°Π½ΠΈΡΠ° = ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π²ΡΡΠΎΡΠ° + ΠΎΡΡΡΡΠΏ + Π³ΡΠ°Π½ΠΈΡΠ° = ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ: ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ
Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π³ΡΠ°Π½ΠΈΡΠ° ΠΈ ΠΎΡΡΡΡΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ / Π²ΡΡΠΎΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠΈΡΡΠ½ΠΊΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°:
ΠΡΠΎΡ div ΠΌΠ΅Π½ΡΡΠ΅ (ΡΠΈΡΠΈΠ½Π° 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²ΡΡΠΎΡΠ° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΡΠΎΡ div Π±ΠΎΠ»ΡΡΠ΅ (ΡΠΈΡΠΈΠ½Π° ΡΠ°ΠΊΠΆΠ΅ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠΎΡΠ° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
(ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ div2 ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΡΡΡΠΏ
ΡΠΊΠ°Π·Π°Π½ΠΎ):
ΠΡΠΈΠΌΠ΅Ρ
.div1 {
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°:
100px;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
}
.div2 {
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing
ΡΠ΅ΡΠ°Π΅Ρ
ΠΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.
Π‘ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ CSS box-sizing
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ Π²
ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ box-sizing: border-box;
Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΠ°
Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ:
ΠΠ±Π° Π±Π»ΠΎΠΊΠ° ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°!
Π£ΡΠ°!
ΠΠΎΡ ΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎ ΠΈ Π²ΡΡΠ΅, Ρ box-sizing: border-box;
Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ ΠΊ ΠΎΠ±ΠΎΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
ΠΡΠΈΠΌΠ΅Ρ
.div1 {
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°:
100px;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
.div2 {
width: 300px;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ box-sizing: border-box;
Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Ρ
ΠΎΡΡΡ, ΡΡΠΎΠ±Ρ Π½Π° ΠΈΡ
ΡΡΡΠ°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠ½ΠΎΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ box-sizing: border-box;
Π΄Π»Ρ
ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌΡ (Π½ΠΎ Π½Π΅ Π²ΡΠ΅ — Π²ΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ
ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π° ΠΈ ΡΠ΅ΠΊΡΡΠ° Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΏΡΠΈ ΡΠΈΡΠΈΠ½Π΅: 100%;).
ΠΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΎ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ ΠΈ ΡΠ°Π·ΡΠΌΠ½ΠΎ:
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
ΠΠΌΡΡΠ΅ΡΡΠ²ΠΎ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°: ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ, ΠΈΠ»ΠΈ Π½Π΅Ρ |
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΎΠΊΠ°Ρ Π²Ρ Π²ΡΡΡΠ΅ΡΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π»ΠΈΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠ°ΠΊ, Π² ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΡΠΌΠΌΠΈΡΡΠ΅ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π·Π°Π΄Π°Π½Π½ΡΠΉ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π½Π° Π½ΠΈΡ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ CSS. ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π€Π°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌΡΡ ΠΊΠ°ΠΊ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ . ΠΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ , Π° Π½Π΅ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ Π² ΡΠ΅Π³Π΅
ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠ³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΏΡΠΈΠ²Π΅Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ°ΠΌΠΊΠΎΠΉ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π² ΡΠ°ΠΉΠ»Π΅.
ΠΡΡΡΠΎΠΉ
Π² ΡΠ²ΠΎΠΉ HTML Π±Π΅Π· ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ°ΠΌΠΊΡ, ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΡΠΎΠΊΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.ΠΡΠΎ ΡΠ²Π΅ΡΠ½ΡΡΠ°Ρ Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° — Π½Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π΅ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΡΠ° Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΡΡΠΈΡΠ°Π΅ΡΡΡ Π΄ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²Π°ΠΌ Π·Π½Π°ΠΊΠΎΠΌΠΎ. Π£ Π½Π΅Π³ΠΎ Π½Π΅Ρ Π²ΡΡΠΎΡΡ (ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ°), ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΠΏΡΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π΅ΠΏΠ΅ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠΎΡ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ.Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠ³ΠΎ
Π² ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° — Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. Π Π°Π·ΡΠΌΠ΅Π΅ΡΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ (ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ), ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ . ΠΠΎΠ·ΡΠΌΠΈΡΠ΅ Π½Π°Ρ
ΠΈΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° — ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π°ΡΡ Π΅ΠΌΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ width
ΠΈ height
, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½.ΠΠ°ΠΊ ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅ ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ, Π·Π°Π΄Π°Π½Π½Π°Ρ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ. ΠΠ·-Π·Π° ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π»ΠΈΠ½ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² — ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²
ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΡ
ΠΏΡΠΎΡΠ΅Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ, ΠΈ, ΠΊΠ°ΠΊ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π² ΡΡΠΎΠΊΠ΅, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌ, ΠΎΠ½ΠΈ ΡΠ°ΡΡΠΎ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΠΈΠ½ΠΎΠ½ΠΈΠΌΡ Π΄Π»ΠΈΠ½Ρ.ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ° Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΡΠΎ Π·Π° ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΎΡ . Π ΡΠ»ΡΡΠ°Π΅ Π±Π»ΠΎΠΊΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ Π±Π»ΠΎΠΊΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π½Π°Ρ
Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 100% Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΡΡΠ°Π½Π΅Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠΌ ΠΎΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ. ΠΠΎΠ»Ρ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠΎΠ»Π΅ΠΉ
ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ²
Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΡΡΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ°. ΠΡ ΠΏΡΠΈΡΠ²ΠΎΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌΡ Π±Π»ΠΎΠΊΡ ΠΌΠ°ΡΠΆΡ
10% ΠΈ padding
10%. ΠΡΡΡΡΠΏΡ ΠΈ ΠΏΠΎΠ»Ρ ΡΠ²Π΅ΡΡ
Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ ΠΏΠΎΠ»Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎ ΠΈ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΆΠΈΠ΄Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎ Π²Π΅ΡΡ
Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
Π±ΡΠ΄ΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΎΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ Π±ΡΠ΄ΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ!
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ»Π΅ΠΉ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ², Π·Π°Π΄Π°Π½Π½ΡΡ
Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° — ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ·ΡΠΊΠΎΠΌ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ΅ ΠΏΠΎΠ»Ρ ΠΈ ΠΎΡΡΡΡΠΏΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 10% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»Ρ ΠΈ ΠΎΡΡΡΡΠΏΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ»Ρ. ΠΡΠΎΡ ΡΠ°ΠΊΡ ΡΡΠΎΠΈΡ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΠΌΠΈΠΌΠΎ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΏΡΠΎΡΠΈΡΡ CSS Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΏΠΎΠ»Π΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΈ Π²Ρ Π²ΡΠ΅Π³Π΄Π° Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-height
. ΠΠΎΡΠΎΠ±ΠΊΠ° Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅ ΡΡΠΎΠΉ Π²ΡΡΠΎΡΡ, Π½ΠΎ Π·Π°ΡΠ΅ΠΌ ΡΡΠ°Π½Π΅Ρ Π²ΡΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π² ΠΊΠΎΡΠΎΠ±ΠΊΠ΅ Π΅ΡΡΡ ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΠ΅.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΄Π²Π° ΠΏΠΎΠ»Ρ, ΠΎΠ±Π° Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ
Π² 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ»Π΅ ΡΠ»Π΅Π²Π° ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π² ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π° Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ΅ΡΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Π²ΡΡΠΎΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π½Π° 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ΅ΠΌΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΈΠ·Π±Π΅Π³Π°Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΠ±ΡΡΠ½ΠΎ max-width
Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ, Π΅ΡΠ»ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΈΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡ
Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ»Π΅Π΄Ρ Π·Π° ΡΠ΅ΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ width: 100%
Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ»Π° ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π±Ρ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π±Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ.
ΠΡΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ max-width: 100%
, Π° Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Π° ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈΠ·Π°ΡΠΈΡ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΠΆΠ΄Ρ. ΠΠ΅ΡΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½Π° ΡΠΈΡΠΈΠ½Π° : 100%
, ΠΈ ΠΎΠ½ΠΎ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΠΎΠ»ΡΡΠ΅ Π΅Π³ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠΎΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ max-width: 100%
ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.Π’ΡΠ΅ΡΡΠ΅ ΠΏΠΎΠ»Π΅ ΡΠ½ΠΎΠ²Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊΠΆΠ΅ Ρ max-width: 100%
set; Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΌΠ΅Π½ΡΡΠΈΠ»ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΠΊΠΎΡΠΎΠ±ΠΊΡ.
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ, , ΡΠ°ΠΊ ΡΡΠΎ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Π°ΠΌ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΈΡ
ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ Π½Π΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π΄Π»Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ ΡΠ°Π±ΠΎΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΎΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π΄Π΅Π½Π΅Π³, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π»ΠΈΠΌΠΈΡΠ½ΠΎΠ΅ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅.
ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° — Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°ΠΉΡΠ° — ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ. Π CSS Ρ Π½Π°Ρ Π΅ΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° — Π΅Π΄ΠΈΠ½ΠΈΡΠ° vw
Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ vh
Π΄Π»Ρ Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
1vh
ΡΠ°Π²Π½ΠΎ 1% Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° 1vw
ΡΠ°Π²Π½ΠΎ 1% ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΠΎΠ»Π΅ΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΠΊΡΡΠ°. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 20vh ΠΈ 20vw. ΠΠΎΡΠΎΠ±ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π±ΡΠΊΠ²Ρ A
, ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ
10vh.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ vh
ΠΈ vw
, ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΠΈΠ»ΠΈ ΡΡΠΈΡΡΠ°; ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π²ΡΡΠ΅, ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°). ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎΠ»Ρ ΠΈ ΡΠ΅ΠΊΡΡΠ°.
Π Π°Π·ΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π² Π²Π°ΡΠΈΡ
ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π³Π΅ΡΠΎΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π²ΡΡΠΎΡΡ 100vh ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½ΠΈΠΆΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½. ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅, Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΠ»ΠΈ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅ — ΡΠΌ. ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ²ΠΎΠΈΡ
Π½Π°Π²ΡΠΊΠΎΠ²: ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΡΠΎΡ ΡΡΠΎΠΊ Π΄Π°Π» Π²Π°ΠΌ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΠΏΡΠΎΠ±Π»Π΅ΠΌ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΠΌΠ°ΠΊΠ΅ΡΡ CSS, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΡΠ°Π½Π΅Ρ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΡΠΌ Π΄Π»Ρ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅, ΡΡΠΎΠΈΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΡ
.
box-sizing — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing
CSS ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS ΡΠΈΡΠΈΠ½Π°
ΠΈ Π²ΡΡΠΎΡΠ°
, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π±Π»ΠΎΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏΡ, ΠΎΠ½ΠΈ Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΡΠΈΡΠΈΠ½Π΅
ΠΈ Π²ΡΡΠΎΡΠ΅
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π²ΡΡΠΎΡΡ
, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Π΄Π°Π΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠ΅ΡΡΡ Π»ΡΠ±ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΠΏΠΎΠ»Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ : 25%;
, Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΈΠ· Π½ΠΈΡ
ΠΈΠΌΠ΅Π΅Ρ Π»Π΅Π²ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π»Π΅Π²ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΠΎΠ½ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ:
-
content-box
Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ CSS ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π°.ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠΈΡΠΈΠ½Π° Π»ΡΠ±ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏΠ° Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ββΠΊ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ, ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΈΡΠ΅ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. -
border-box
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΡΠΈΡΡΠ²Π°ΡΡ Π»ΡΠ±ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΈ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π»ΡΠ±ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΡ Π²Π°ΠΌΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏ, Π° ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΊΡΠ°ΡΠ°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ³Π»ΠΎΡΠΈΡΡ ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ.ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
box-sizing: border-box
— ΡΡΠΎ ΡΡΠΈΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ,
ΠΈ
, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Ρ ΡΠΈΠΏΠΎΠΌ ΡΠ°Π΄ΠΈΠΎ
, ΡΠ»Π°ΠΆΠΎΠΊ
, ΡΠ±ΡΠΎΡ
, ΠΊΠ½ΠΎΠΏΠΊΠ°
, ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ
, ΡΠ²Π΅Ρ
ΠΈΠ»ΠΈ ΠΏΠΎΠΈΡΠΊ
. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π§Π°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ box-sizing
Π½Π° border-box
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠ°.ΠΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΡΡΠ°Π½ΡΠ΅Ρ ΡΡΠ΄ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΡ
ΠΊΠ°ΠΌΠ½Π΅ΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠΊΠ½ΡΡΡΡΡ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ position: relative
ΠΈΠ»ΠΈ position: absolute
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ box-sizing: content-box
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π³ΡΠ°Π½ΠΈΡ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ². , ΡΡΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ.
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: Π²Π΅ΡΠ½ΡΡΡΡΡ;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π½ΠΈΠΆΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
-
content-box
ΠΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠ°Π½Π΄Π°ΡΡΠ΅ CSS. Π‘Π²ΠΎΠΉΡΡΠ²Π° width
ΠΈ height
Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π½ΠΎ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, .box {width: 350px; border: 10px solid black;}
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π±Π»ΠΎΠΊ ΡΠΈΡΠΈΠ½ΠΎΠΉ 370 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ΄Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: ΡΠΈΡΠΈΠ½Π° = ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π²ΡΡΠΎΡΠ° = Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ .(ΠΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² ΡΠ°ΡΡΠ΅Ρ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ.)
-
Π±ΠΎΡΠ΄ΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²Π° width
ΠΈ height
Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ»Ρ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΡΡΡΡΠΏ ΠΈ Π³ΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄ΡΡ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, .box {width: 350px; border: 10px solid black;}
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π±Π»ΠΎΠΊ ΡΠΈΡΠΈΠ½ΠΎΠΉ 350 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ ΠΎΠ±Π»Π°ΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΈΡΠΈΠ½ΠΎΠΉ 330 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 0, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ border-box
Π΄Π»Ρ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ΄Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: ΡΠΈΡΠΈΠ½Π° = Π³ΡΠ°Π½ΠΈΡΠ° + ΠΎΡΡΡΡΠΏ + ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π²ΡΡΠΎΡΠ° = Π³ΡΠ°Π½ΠΈΡΠ° + ΠΎΡΡΡΡΠΏ + Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ .
Π Π°Π·ΠΌΠ΅ΡΡ Π±ΠΎΠΊΡΠ° Ρ ΠΏΠΎΠ»Π΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ ΡΠ°ΠΌΠΊΠΎΠΉ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π²ΡΡ
ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
HTML
ΠΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π Π°ΠΌΠΊΠ°
CSS
div {
ΡΠΈΡΠΈΠ½Π°: 160 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 8px;
ΡΠΎΠ½: ΠΆΠ΅Π»ΡΡΠΉ;
}
.content-box {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ;
}
.border-box {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Π’Π°Π±Π»ΠΈΡΡ BCD Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
CSS Box Sizing Module Level 3
1. ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΌ.
ΠΠ°ΠΊΠ΅Ρ
CSS ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°ΡΡΠ΅ΡΠ°Ρ
ΠΌΠ°ΠΊΠ΅ΡΠ°.
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ Π΄Π°Π½Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.
ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΠ²ΡΠ·Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ Π² Π΄ΡΡΠ³ΠΈΡ
ΠΌΠΎΠ΄ΡΠ»ΡΡ
,
ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ
ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ
ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π°Π²ΡΠΎΡΠ°ΠΌ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΠΈΡ
ΡΠ°ΡΡΠ΅ΡΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
Π’ΡΠ΅Π±ΡΡΡΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ! Π‘ΠΌ. ΠΡΠΎΠ±Π»Π΅ΠΌΡ.
1.1. ΠΠΎΠ΄ΡΠ»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ
ΠΡΠΎΡ ΠΌΠΎΠ΄ΡΠ»Ρ ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ, Π²ΡΡΠΎΡΡ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ°, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² Π³Π»Π°Π²Π΅ 10 [CSS2] ΠΈ Π² [CSS3COL]
.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ Π·Π°ΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π² [CSS-UI-3].
1.2. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡΠΌ ΠΎΠ± ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² CSS ΠΈΠ· [CSS2] Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ· [CSS-VALUES-3].Π’ΠΈΠΏΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² CSS Values ββ& Units [CSS-VALUES-3].
ΠΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΌΠΎΠ΄ΡΠ»ΡΠΌΠΈ CSS ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΡ
ΡΠΈΠΏΠΎΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ Π² ΠΈΡ
ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡΡ
,
Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΡΠ΅Π½ΠΈΡ ΠΎΠ½ΠΈ ΡΠ²Π½ΠΎ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ.
2. Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ, ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ½ΡΠΌ ΠΎΡΡΠΌ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ
ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π² CSS Writing Modes 3 Β§6 Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
- ΡΠ°Π·ΠΌΠ΅Ρ
- ΠΠ΄Π½ΠΎ- ΠΈΠ»ΠΈ Π΄Π²ΡΡ
ΠΌΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅:
ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΈ / ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ;
Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈ / ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ.
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ°
ΠΊ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ΅ΠΆΠΈΠΌΠ° Π·Π°ΠΏΠΈΡΠΈ. - Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- Π Π°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ - ΠΠ½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- Π Π°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΠΏΠΎΠ»Ρ.ΠΠ½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- Π Π°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π±Π΅Π· Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°;
ΡΠΎ Π΅ΡΡΡ <Π΄Π»ΠΈΠ½Π°>,
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° (Π±Π΅Π· ΡΡΠ΅ΡΠ° ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° ΡΡΡΠΎΠΊ),
ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°,
ΠΈΠ»ΠΈ <ΠΏΡΠΎΡΠ΅Π½Ρ> ΠΈΠ»ΠΈ Π΄ΡΡΠ³Π°Ρ ΡΠΎΡΠΌΡΠ»Π°
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, "ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌΡΠΉ" ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² [CSS2])
ΡΡΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΡΠ΅Π³Π΄Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- Π Π°Π·ΠΌΠ΅Ρ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½. ΠΠ΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎ ΡΡΡΠΈ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ.
- ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ
- Π Π°Π·ΠΌΠ΅Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ°,
ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ
ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΡΡΠ°ΡΡΠ²ΡΠ΅Ρ.
ΠΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π΄Π»Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΠΎΠ±ΡΡΠ½ΠΎ
Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (Π΅ΡΠ»ΠΈ ΡΡΠΎ ΡΠΎΡΠ½ΠΎ)
ΠΈΠ»ΠΈ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ).ΠΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π»ΠΈΠ±ΠΎ
ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π·Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΡΠΈΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΡΠΈΠΌ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ. - ΡΠ»Π°ΡΡΠΈΡΠ½Π°Ρ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ°
- Π Π°ΡΡΡΠΆΠΊΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ
ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ,
ΠΌΠΈΠ½ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»Ρ Π±Π»ΠΎΠΊΠ° (Π½Π΅ ΡΠ²Π΅ΡΠ½ΡΡΡ, auto ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π½ΠΎΠ»Ρ),
Π³ΡΠ°Π½ΠΈΡΠ° ΠΈ ΠΎΡΡΡΡΠΏ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ
(ΡΠ°ΠΊ ΡΡΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ),
ΠΈ ΠΏΠΎΠ» Π½Π° Π½ΡΠ»Π΅
(ΡΡΠΎΠ±Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅ Π±ΡΠ» ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ). ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΡΠΎ ΡΠΎΡΠΌΡΠ»Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π΄Π»Ρ ΡΠ°ΡΡΠ΅ΡΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ
Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π² CSS2.1Β§10.3.3.
- ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
Π ΡΡΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅,
ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
2.1. Π Π°Π·ΠΌΠ΅ΡΡ Π°Π²ΡΠΎ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
Π CSS Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΡΠΈΠΏΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
(ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ» Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°):
- ΡΠ»Π°ΡΡΠΈΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΠΈΠΉΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- ΡΠ»Π°ΡΡΠΈΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ, ΡΠ°Π·ΠΌΠ΅Ρ
- Π Π°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΠ» Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ;
Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠ°ΡΡΡΠΆΠΊΠ° ΡΠΌΠ΅ΡΠ°Π»Π°ΡΡ Π² Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅,
Π΅ΡΠ»ΠΈ ΡΡΠΎ ΡΠΎΡΠ½ΠΎ.ΠΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, Π΅ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΠΎΡΠΈ ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉΒ» Π² CSS2.1Β§10.3.5 ΠΈ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΏΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ CSS2.1Β§10.3.3.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π ΡΠ°ΡΡΠ΅ΡΠ°Ρ
, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ
Ρ ΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
- ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
- Β«ΠΠ΄Π΅Π°Π»ΡΠ½ΡΠΉΒ» ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΏΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ ΠΏΡΠΈ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅.ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΏΠΎ ΡΡΠΎΠΉ ΠΎΡΠΈ.
Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ Π² Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅,
ΡΠΎ Π΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΈΠ·Π±Π΅Π³Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.- ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΡΡΡΠΎΠΊΠ΅
Β«ΠΠ΄Π΅Π°Π»ΡΠ½ΡΠΉΒ» ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΏΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ ΠΎΡΠΈ.
ΠΠ±ΡΡΠ½ΠΎ ΡΠ°ΠΌΡΠΉ ΡΠ·ΠΊΠΈΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΡΡΡ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π²ΠΎΠΊΡΡΠ³ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π΅ΡΠ»ΠΈ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΌΡΠ³ΠΊΠΎΠΉ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ Π±ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ.
(Π‘ΠΌ. Β§5 ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉΒ» Π² CSS2.1Β§10.3.5 ΠΈ Β«ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠΈΒ» Π² CSS2.1Β§17.5.2.2.
- ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Β«ΠΠ΄Π΅Π°Π»ΡΠ½ΡΠΉΒ» ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ Π±Π»ΠΎΠΊΠ°.
ΠΠ±ΡΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎΡΠ»Π΅ Π²Π΅ΡΡΡΠΊΠΈ.
- ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
- ΠΠ°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ°
ΡΡΠΎ Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ, Π²ΡΠ±ΡΠ°Π² Π±ΠΎΠ»ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.(Π‘ΠΌ. Β§5 ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.)- min-content Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
Π‘Π°ΠΌΡΠΉ ΡΠ·ΠΊΠΈΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ°
ΡΡΠΎ Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ, Π²ΡΠ±ΡΠ°Π² Π±ΠΎΠ»ΡΡΠΈΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΡΠ±ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π±Ρ Π²ΠΎΠΊΡΡΠ³ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π΅ΡΠ»ΠΈ Π±ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠΉ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ Π² ΠΊΠΎΡΠΎΠ±ΠΊΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉΒ» Π² CSS2.1Β§10.3.5 ΠΈ Β«ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎΒ» Π² CSS2.1Β§17.5.2.2.
- Π Π°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π ΡΠ΅Π»ΠΎΠΌ,
ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π΄Π»Ρ Π±Π»ΠΎΡΠ½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², ΡΠ°Π±Π»ΠΈΡ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
Π±ΠΎΠΊΡΠΎΠ²,
ΡΡΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
- ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ fit-content
- ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° fit-content
- ΠΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π½Π° Π΄Π°Π½Π½ΠΎΠΉ ΠΎΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ,
ΡΠ°Π²Π΅Π½ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ)
(Ρ.Π΅.Π΅. ΠΌΠ°ΠΊΡ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ))
).
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
ΡΠ°Π²Π΅Π½ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π° ΡΡΠΎΠΉ ΠΎΡΠΈ. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π CSS2.1Β§10.3.5 ΠΈ CSS Multi-column Layout Β§ 3.4 ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ Β«ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΒ».
- Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
ΡΠΎ Π΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡΠΈΠΉ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΈΠ· ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.(ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΡΠΌΠΈΠ½Π° ΠΌΠΎΠ³ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ
ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠΈΡ
Π΄Π²ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².) ΠΠ°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ· ΡΠ²ΠΎΠΈΡ
Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
2.2. ΠΠΊΠ»Π°Π΄ Π² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
- Π²ΠΊΠ»Π°Π΄ max-content
- Π Π°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π΅ Π²Π½ΠΎΡΠΈΡ Π² ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
- Π²ΠΊΠ»Π°Π΄ ΠΌΠΈΠ½-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
- Π Π°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π΅ Π²Π½ΠΎΡΠΈΡ Π² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
- Π²ΠΊΠ»Π°Π΄ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
- ΠΠΊΠ»Π°Π΄ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, Π²ΠΊΠ»Π°Π΄ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ,
ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΈΡΠ°Π½Π½ΡΠΉ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΠΊΠ»Π°Π΄ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠΊΠ»Π°Π΄Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° Π²Π½Π΅ΡΠ½Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ;
Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Ρ ΡΡΠΈΡΠ°ΡΡΡΡ Π½ΡΠ»Π΅Π²ΡΠΌΠΈ.
2.3. ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°
- ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
- ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½Π°Π»Π°Π³Π°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΠΎΠΊΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ.
- ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ min-content
- ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½Π°Π»Π°Π³Π°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΠΎΠΊΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ min-content.
- ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½
- Π‘ΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΠΏΡΠΈΡΡΡΠ΅Π΅ ΠΊΠΎΡΠΎΠ±ΠΊΠ΅,
ΡΡΠΎ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π°Π»Π³ΠΎΡΠΈΡΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΡΠΎΠΌΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½
Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠΎΠ±Π»ΡΠ΄Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
.
ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅,
ΠΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ - ΡΡΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ
ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.Π£ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΊΠΎΡΠΎΠ±ΠΎΠΊ Π½Π΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½.
3. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
3.1. Π Π°Π·ΠΌΠ΅ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π·ΠΌΠ΅ΡΠ° width, height, min-width, min-height, max-width ΠΈ max-height.
ΠΡ
ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅, Β§3.2 ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²: <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>, Π°Π²ΡΠΎ | none, min-content, max-content ΠΈ fit-content () Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ, ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΠΏΠΎΡΠΎΠΊΡ, Π΄Π»Ρ ΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² [CSS-LOGICAL-1].
ΠΡ Ρ
ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°)
Π½ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡ ΠΈΠΌΠ΅Π½ Ρ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° @page [CSS-PAGE-3],
ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΎ Π±ΡΠ»ΠΎ ΠΎΡΠ»ΠΎΠΆΠ΅Π½ΠΎ Π΄ΠΎ ΡΡΠΎΠ²Π½Ρ 4.
ΠΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ,
ΡΠΌ. ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠ΅.
3.1.1. ΠΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π·ΠΌΠ΅ΡΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ (ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅) ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ
ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
3.1.2. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° min-width ΠΈ min-height
Π‘Π²ΠΎΠΉΡΡΠ²Π° min-width ΠΈ min-height ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° (ΠΈΠ»ΠΈ Β«ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°Β»)
ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° (ΠΈΠ»ΠΈ Β«ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°Β»)
ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto Π½ΠΎΠ²ΠΎΠ΅;
Π² [CSS2] Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π½ΡΠ»Π΅Π²ΡΠΌ.
3.1.3. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° max-width ΠΈ max-height
Π‘Π²ΠΎΠΉΡΡΠ²Π° max-width ΠΈ max-height ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° (ΠΈΠ»ΠΈ Β«ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°Β»)
ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° (ΠΈΠ»ΠΈ Β«ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°Β»)
ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
3.2. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²:
<Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>, Π°Π²ΡΠΎ | Π·Π½Π°ΡΠ΅Π½ΠΈΡ none, min-content, max-content ΠΈ fit-content ()
- <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>
- ΠΠ°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
ΠΈ / ΠΈΠ»ΠΈ .
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΡΡΡ Π»ΠΈ Π±Π»ΠΎΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡΠ°. ΠΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ / Π²ΡΡΠΎΡΠ΅, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΡΠ°ΡΠΈΠΈ,
Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΊΠΎΡΠΎΠ±ΠΊΡ.ΠΡΠ»ΠΈ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΎΡΠΈ
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ,
ΡΠΌ. ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°
Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ
ΠΏΡΠ°Π²ΠΈΠ» ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ.
ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡ.
- Π°Π²ΡΠΎ
- ΠΠ»Ρ ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ Π·Π°Π΄Π°Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ( Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° / Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ).
Π‘ΠΌ. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°ΡΡΡΠΈΡΠ°ΡΡ. ΠΠ»Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ / ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ,
Π·Π°Π΄Π°Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ .ΠΡΠ»ΠΈ ΠΈΠ½ΠΎΠ΅ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ,
ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½ΠΈΠ΅,
ΠΎΠ½ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ 0.
ΠΠ»Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ
ΡΠ°Π·ΡΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΡΠ°Π²Π½ΠΎ Π½ΡΠ»Ρ
Π΄Π»Ρ ΡΡΠΈΠΊΠΎΠ² Π²ΡΠ΅Ρ
ΡΠΈΠΏΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ [CSS2]:
Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π±ΠΎΠΊΡΡ,
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ,
ΠΈ Π²ΡΠ΅ ΠΏΠΎΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΠΎΠ»Π°.
ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΊ Π½ΡΠ»Ρ
ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»Π΅ Π½Π΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ.
- Π½Π΅Ρ
- ΠΠ΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
- ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΡΠΈ;
Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ,
Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅,
ΡΡΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ Π΅Π³ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ. - ΠΌΠ°ΠΊΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΡΠΈ;
Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ,
Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅,
ΡΡΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ Π΅Π³ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ. - fit-content (
) - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΡΠΌΡΠ»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ
Ρ Π·Π°ΠΌΠ΅Π½ΠΎΠΉ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠΌ,
ΡΠΎ Π΅ΡΡΡ ΠΌΠΈΠ½ (ΠΌΠ°ΠΊΡ-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅, ΠΌΠ°ΠΊΡ (ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅, <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>))
,
Π³Π΄Π΅ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½
ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ . ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ> Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡ.
ΠΠΎ Π²ΡΠ΅Ρ
ΡΠ»ΡΡΠ°ΡΡ
,
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ Π½Π΅ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ min-content, max-content ΠΈ fit-content ()
ΡΠ²Π»ΡΡΡΡΡ Π½ΠΎΠ²ΡΠΌΠΈ Π½Π° ΡΡΠΎΠ²Π½Π΅ 3.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ flex-basic ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΡΠΈ Π½ΠΎΠ²ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°,
ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° .
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠ°Π½Π΅Π΅ Π±ΡΠ»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ stretch ΠΈ fit-content ΠΊΠ°ΠΊ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ stretch-fit ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ fit-content,
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.ΠΡΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π±ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΠ΅Π½Ρ Π½Π° ΡΡΠΎΠ²Π΅Π½Ρ 4.
(Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΡΠ»ΠΎΠ²ΠΎΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ, Π½ΠΎ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΠΎΠ΅ ΠΈΠΌΠ΅Π΅ΡΡΡ)
ΡΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡ Π² ΡΠΈΡΡΠ°ΡΠΈΡΡ
Ρ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΠΌ.
3.2.1. Β«ΠΠ΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π°Π²ΡΠΎΒ»
Π§ΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΡΠΈΠΉ ΡΠ΅ΡΠΌΠΈΠ½ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ
ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° / Π²ΡΡΠΎΡΠ° Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ auto, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, ΡΡΠΎΠ±Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ auto
(ΠΊΠ°ΠΊ Π² ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° Π½Π° Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ,
ΡΠΌ. CSS2Β§10.5),
Π² ΠΎΠ±ΠΎΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ auto .
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π£ΡΡΠ°ΡΠ΅Π²ΡΠ°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π² [CSS2],
ΠΌΠΎΠΆΠ΅Ρ ΡΠ²Π½ΠΎ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ Ρ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ auto ΠΊΠ°ΠΊ Π½Π° ΡΡΠ»ΠΎΠ²ΠΈΠ΅;
Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΠΈΡ
ΡΠ»ΡΡΠ°Π΅Π² ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π°Π²ΡΠΎ,
ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Ρ Π² ΡΠ°Π±ΠΎΡΡΡ Π³ΡΡΠΏΠΏΡ CSS Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ.
ΠΠ°ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΡΠΌΠΈΠ½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
3.2.2. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΡΠΊΠ»ΡΡΠ°ΡΡΠΈΠ΅ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ
ΠΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΌ.
Π₯ΠΎΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ° Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΠ½ΠΈΡΠ°Π΅ΠΌΡ Π΄Π»Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ²,
ΠΈΠ½ΠΎΠ³Π΄Π° Π°Π²ΡΠΎΡΡ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π»ΠΈ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ (ΠΏΠΎΡΠΎΠΌΠΊΠΈ) ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ
ΠΈΠ»ΠΈ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ ΠΈΠ·Π²Π½Π΅.
ΠΠ»Ρ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°
ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ display: flow-root ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΏΠΎΠ»Π΅ ΠΊΠΎΡΠ½Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ,
ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ»ΠΎΠΊΠΈ, ΡΡΠ°ΡΡΠ²ΡΡΡΠΈΠ΅ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ Flex, Grid ΠΈΠ»ΠΈ Table, Π±ΡΠ΄ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
3.3. ΠΡΠ°Ρ Π±Π»ΠΎΠΊΠ° Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ box-sizing ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ,
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, s ΠΈ s)
Π½Π°Π·Π½Π°ΡΠ°ΡΡΡΡ Π±Π»ΠΎΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΊΠ΅.ΠΡΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΡ Π²ΡΠ΅Ρ
ΠΊΠ°Π»ΠΈΠ±ΡΠΎΠ²ΠΎΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²,
Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΡΠ»Π΅ΠΊΡ-ΠΎΡΠ½ΠΎΠ²Π°.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
- Π Π°Π·ΠΌΠ΅ΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠ°ΠΊ
, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ,
ΠΈΡΠΊΠ»ΡΡΠ°Ρ ΠΏΠΎΠ»Ρ / Π³ΡΠ°Π½ΠΈΡΡ / ΠΎΡΡΡΡΠΏΡ:
ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π±Π»ΠΎΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΠΎΠ»Ρ
Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΈ ΡΠΈΡΡΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² CSS2.1,
ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
- Π±ΠΎΡΠ΄ΡΡ
- Π Π°Π·ΠΌΠ΅ΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°Ρ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠ°ΠΊ
, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ,
Π²ΠΊΠ»ΡΡΠ°Ρ Π³ΡΠ°Π½ΠΈΡΡ / ΠΎΡΡΡΡΠΏΡ (Π½ΠΎ Π½Π΅ ΠΏΠΎΠ»Ρ):
ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΡΠ°ΠΌΠΊΠ΅.
ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΠΎΠ»Ρ
Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΈ ΡΠΈΡΡΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ,
Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ,
Π½Π°ΡΡΠΈΠ» Π½Π° Π½ΡΠ»Π΅. Π Π°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΏΡΡΠ΅ΠΌ Π²ΡΡΠΈΡΠ°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
ΡΡΠΎΡΠΎΠ½
ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ .
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ,
ΡΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ ΡΠ°Π²Π½ΠΎ Π½ΡΠ»Ρ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΡΠ΅Π· getComputedStyle ()
,
ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΠ°ΠΌΠΊΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π»ΠΈΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, Π²ΠΊΠ»ΡΡΠ°ΡΡ
ΠΎΠ±Π° Π½Π΅ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΈ ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ
ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡΡ
, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ fit-content ().ΠΠ°ΠΎΠ±ΠΎΡΠΎΡ,
Π½Π΅ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ auto ΠΈ min-content, Π½Π΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° box-sizing
(Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅).
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ
ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ - 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠ°ΠΌΠΊΠΈ, ΡΠ°Π²Π½ΡΠΌ 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
.box {box-sizing: content-box; / * ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ * /
width: 100px; padding-left: 10px; border-left: 10px solid;}
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΏΠΎΠ»Π΅ Π½Π° Π³ΡΠ°Π½ΠΈΡΡ,
ΡΠ°ΠΌΠΊΠ° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΠ°Π²Π½ΡΠΌ 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
.box {box-sizing: border-box; width: 100px; padding-left: 10px; border-left: 10px solid;}
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ Π½ΡΠ»Ρ,
ΠΏΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ ΠΎΡΡΡΡΠΏ + Π³ΡΠ°Π½ΠΈΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ°ΠΌΠΊΠΈ,
ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°Π½ΠΎ.
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΡΡΡΡ 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΌΠΊΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π΅Π½ 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΊΠ°Π·Π°Π½Π° Π΄Π»Ρ ΡΠ°ΠΌΠΊΠΈ:
.box {box-sizing: border-box; width: 100px; padding-left: 60px; border-left: 60px solid; / * padding + border = 120px * /}
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° Π΄Π»Ρ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
Π΄Π²Π° Π±Π»ΠΎΠΊΠ° div Ρ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° div,
ΡΡΠΎ Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎ Π±Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
ΠΎΠ±ΡΠ°Π·Π΅Ρ CSS:
div.container {width: 38em; border: 1em ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ;}
div.split {box-sizing: border-box; width: 50%; border: 1em silver rridge; float: left;}
ΠΎΠ±ΡΠ°Π·Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° HTML:
ΠΡΠΎΡ div Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π»Π΅Π²ΡΡ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ. ΠΡΠΎΡ div Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΠ°Π²ΡΡ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ.
Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² CSS ΠΈ HTML:
ΠΡΠΎΡ div Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π»Π΅Π²ΡΡ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ.
ΠΡΠΎΡ div Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΏΡΠ°Π²ΡΡ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ.
ΠΠ²Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ
Π²ΡΡΠ΅ Π±Π»ΠΎΠΊΠ° div Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ, ΠΊΠ°ΠΆΠ΄ΡΠΉ (Π²ΠΊΠ»ΡΡΠ°Ρ Π³ΡΠ°Π½ΠΈΡΡ) Π½Π° 50% ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML,
Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΊΠ°
,
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ - ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ°ΠΌΠΊΠΈ.
Π‘ΠΌ. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² HTML.
Π ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ
ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΡ
CSS
ΡΠ΅ΡΠΌΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ) ΡΠΈΡΠΈΠ½Π°, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ) Π²ΡΡΠΎΡΠ°, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ) ΡΠΈΡΠΈΠ½Π° ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ) Π²ΡΡΠΎΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ
(ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ)
ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅.
Π‘ΠΌ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ CSS 3 Β§3.1 ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-sizing Π΄Π»Ρ ΡΠ²Π½ΠΎΠ³ΠΎ ΡΡΡΡΠ°Π½Π΅Π½ΠΈΡ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎΡΡΠΈ ΡΡΠΈΡ
ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ².
Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π° Π΄Π΅ΡΠ°Π»Π΅ΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ [CSS2].
Π§ΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π΄Π²ΡΡΠΌΡΡΠ»Π΅Π½Π½ΠΎΡΡΠΈ,
Π°Π²ΡΠΎΡΠ°ΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ·Π±Π΅Π³Π°ΡΡ Π΄Π²ΡΡΠΌΡΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ
ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ², ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π° ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ°, Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΡΠΎΡΠ½Π΅Π½ΠΈΠΉ,
ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ²Π½ΠΎ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π°
Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ,
Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ,
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΌΠΊΠΈ,
Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ°Π·ΠΌΠ΅ΡΠ°,
ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅,
Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Ρ.
3.4. ΠΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΎΠ»Π±ΡΠ°: Π·Π½Π°ΡΠ΅Π½ΠΈΡ min-content, max-content ΠΈ fit-content ()
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ°,
Π½ΠΎΠ²ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ°:
- ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- ΠΠ°Π΄Π°Π΅Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° min-content Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
- ΠΌΠ°ΠΊΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- ΠΠ°Π΄Π°Π΅Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
- fit-content (
) - ΠΠ°Π΄Π°Π΅Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ° ΠΊΠ°ΠΊ
ΠΌΠΈΠ½ (ΠΌΠ°ΠΊΡ. Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΌΠ°ΠΊΡ. (Π Π°Π·ΠΌΠ΅Ρ ΠΌΠΈΠ½. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>))
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π¨ΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠ° Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΡΠΎΠ»Π±ΡΠ°.
ΠΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
(ΠΊΠ°ΠΊ Π² ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ²Π°Ρ
Π²ΡΡΠ΅),
Π²ΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅
ΠΈ ΡΠ°ΡΡΡΠΈΡΠ°Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
4.ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΠ½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,
Π±Π΅Π·ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ.
4.1. ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
ΠΡΠΎΡΠ΅Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅:
Π±ΡΠ΄Π΅Ρ 30em Π²ΡΡΠΎΡΠΎΠΉ
= 50% ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ 60em
Π±ΡΠ΄Π΅Ρ 15em Π²ΡΡΠΎΡΠΎΠΉ
= 50% ΠΎΡ Π²ΡΡΠΎΡΡ
'
(ΡΡΠΎ ΡΠ°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π΄Π»ΠΈΠ½Π΅)
Π‘ΠΌ. Β§5.2.1 ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄Ρ ΡΡΠ΅Π΅ΠΊ Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π²ΡΡΠΈΡΠ»ΠΈΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ
ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ.
5. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,
Π±Π΅Π· ΠΎΠ³Π»ΡΠ΄ΠΊΠΈ Π½Π° Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ.
5.1. ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ
ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΈΠΌΠ΅Π» Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»
ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎ ΡΡΠΎΠΉ ΠΎΡΠΈ
(ΠΈ Π½Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΡΡΠΎΠΉ ΠΎΡΠΈ)
ΠΈ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ» Π½ΡΠ»Π΅Π²ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎ ΡΡΠΎΠΉ ΠΎΡΠΈ.(ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Β«Ρ ΡΡΠ°Π΄ΠΊΠΎΠΉΒ».)
ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΠΎΠΊΡΠ° ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ
ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΈΠΌΠ΅Π» Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»
ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎ ΡΡΠΎΠΉ ΠΎΡΠΈ
(ΠΈ Π½Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΡΡΠΎΠΉ ΠΎΡΠΈ),
ΠΈ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ» Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎ ΡΡΠΎΠΉ ΠΎΡΠΈ.
(ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Β«Ρ ΡΡΠ°Π΄ΠΊΠΎΠΉΒ».)
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π²ΠΌΠ΅ΡΡΠ΅ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ
ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Ρ ΠΎΠΊΠ½Π° ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½,
ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π·
ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ Π°Π²ΡΠΎ Π² ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΌ.
Π‘ΠΌ. CSS2Β§10.
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ².
Π‘ΠΌ. [CSS2].
ΠΠ΄Π½Π°ΠΊΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±Π΅Π· Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π½ΠΈΠΆΠ΅:
- ΠΡΠ»ΠΈ Ρ Π½Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½:
- ΠΠ»Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½ΠΎΠ»Ρ.
ΠΠ»Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ:
ΠΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ ΠΎΡΠΈ,
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°ΡΡΡΠΆΠΊΡ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΈ ΡΠ°ΡΡΡΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅
Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ min-width ΠΈΠ»ΠΈ min-height,
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ Π²ΡΡΠΈΡΠ»ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½;
Π΅ΡΠ»ΠΈ ΠΎΠ±Π° ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠΌΠ΅ΡΡ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ,
Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΎΠ±ΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ Π±ΡΠ» ΡΠ°Π½Π΅Π΅ ΡΠ°ΡΡΡΠΈΡΠ°Π½ ΠΈΠ· ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 300 x 150,
Π° Π½Π΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
Π‘ΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ Π»ΡΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅,
ΠΈ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ Π²Π΅Π±-ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΌ,
Π½ΠΎ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ ΠΎΡΠ·ΡΠ² Π² CSSWG, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π²ΡΡΠΈΡΠ»ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½.
- ΠΡΠ»ΠΈ Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½:
- ΠΠ»Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ:
ΠΡΠ»ΠΈ ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (min-width / min-height) Π² ΡΡΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ,
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ Π°Π²ΡΠΎΡΠΎΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΠ°Π»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ
Π½ΠΎΠ²ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ auto Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
Π‘ΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ Π»ΡΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅,
Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅ ΡΡΠ½ΠΎ, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Π»ΠΈ ΠΎΠ½ Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ,
ΠΏΠΎΡΡΠΎΠΌΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ ΠΎΡΠ·ΡΠ² Π² CSSWG, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅,
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ
ΠΈ / ΠΈΠ»ΠΈ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ Π²ΡΡΠΎΡΡ
ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ Π½Π° ΡΡΠΎΠ²Π½Π΅ ΡΡΡΠΎΠΊΠΈ
Π²ΡΡΠΎΡΠ° ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ auto, ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (CSS2Β§10.3.2),
ΡΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° Π²ΡΡΠ΅
ΠΊ Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠ»ΡΡΠ°Ρ Π·Π°ΠΌΠ΅Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΡΡΡ Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π°Π²ΡΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ.
Π‘ΠΌ. [CSS2],
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ,
ΠΈ / ΠΈΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
Π Π±ΡΠ΄ΡΡΠΈΡ
ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΡ
ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ,
Π·Π°ΠΌΠ΅Π½ΡΡ Β«ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β» CSS2,
ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Π΅ΡΡΡ.
Π₯ΠΎΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄ΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°
ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML
ΠΈ
ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ,
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡΡ
Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ².ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° min-content ΠΈ max-content Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉΡΡ Π² ΠΈΡ
ΠΏΠΎΠ»Π΅,
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠ°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΡ
Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ
Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΎΠ±ΡΡΠ½ΡΠΌ Π½Π΅Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄ΠΎΠΌ
(ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠ»ΡΡΠ°Π΅ textarea
,
ΠΈΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠ»ΡΡΠ°Π΅ Π²Π²ΠΎΠ΄
),
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΡΠΉ ΠΈ / ΠΈΠ»ΠΈ Π»ΠΎΠΊΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ,
ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄ΠΎΠΌ,
ΡΠ°Π·ΡΠ΅ΡΠ°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄ΠΎΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡ
(Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ UA).ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄ΠΎΠΌ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ
Π΄Π»Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ,
Π·Π°ΡΠ΅ΠΌ ΡΡΠΎΡ ΡΠ΅ΠΊΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΡΡΡ Ρ ΡΠ΅Π»ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ - Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π²ΠΈΠ΄Π΅Π½ Π»ΠΈ ΡΠ΅ΠΊΡΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
(Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄ΠΎΠΌ
- ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡΡ-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ, ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.)
UA ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΌΠ²ΠΎΠ»Π° Π½ΡΠ»Π΅Π²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ,
ΠΈΠ»ΠΈ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠΉ ΠΌΠΈΡΠ΅Π½ΠΈ)
Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
min-content ΠΈ max-content ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΊΡΡΡΠΎΡΠ°
ΠΈ ΠΈΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΎ Π΄ΠΎ iframe
ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
Π·Π°ΠΌΠ΅Π½Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
(ΡΠΌ. ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΠ΅),
Π½ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π²Π²ΠΎΠ΄ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ;
ΠΈ ΡΠ²Π»ΡΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ,
ΠΈΠΌΠ΅ΡΡ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΡΠ»ΠΎΠΆΠ½Π΅Π½ΠΈΡ.
5.2. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²Π·Π½ΠΎΡΡ
ΠΠΊΠ»Π°Π΄ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ / Π²ΠΊΠ»Π°Π΄ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ
ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π³ΠΈΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ
ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ,
Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΡΠΎΠ³ΠΎ Π³ΠΈΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ ΠΈΠΌΠ΅Π΅Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ / Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π Π΄Π°Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΎΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ.
Π‘ΠΌ. [CSS2],
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ,
ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² (Π½ΠΈΠΆΠ΅),
ΠΈ / ΠΈΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
5.2.1. ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ Π²ΠΊΠ»Π°Π΄ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ
ΠΊΠΎΡΠΎΠ±ΠΎΠΊ
ΠΠ½ΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π±Π»ΠΎΠΊΠ° ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°,
ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΎΠΉ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ.ΠΡΠΈ ΡΠ°ΡΡΠ΅ΡΠ΅ Π²ΠΊΠ»Π°Π΄Π° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
(Π²ΠΊΠ»ΡΡΠ°Ρ Π»ΡΠ±ΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ),
ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ ΡΠ°Π·ΠΌΠ΅ΡΡ
Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΠΎΡΠΈ, ΡΡΠΎ ΠΈ Π²ΠΊΠ»Π°Π΄ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ )
ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ:
- ΠΡΠ»ΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π½Π΅ Π·Π°ΠΌΠ΅Π½Π΅Π½Π°,
Π·Π°ΡΠ΅ΠΌ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΡΠΈΡΠΈΠ½Π° / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° / Π²ΡΡΠΎΡΠ° / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°)
Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ ΠΏΡΠΎΡΠ΅Π½Ρ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 10% ΠΈΠ»ΠΈ calc (10px + 0%))
ΡΠΎ Π΅ΡΡΡ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ Ρ ΡΠ΅Π»ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ Π²ΠΊΠ»Π°Π΄ΠΎΠ² Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΏΠΎΠ»Π΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ: calc (20px + 50%),
Π΅Π³ΠΎ Π²ΠΊΠ»Π°Π΄ Π² ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ»Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ.
(Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΏΡΠΎΡΠ΅Π½Ρ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ,
Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΠΊΠ°Π»ΠΈΠ±ΡΠΎΠ²ΠΊΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΡΠΈΠΊΠ°; ΡΠΌ. Π½ΠΈΠΆΠ΅.)
- ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π·Π°ΠΌΠ΅Π½Π΅Π½Π°,
Π·Π°ΡΠ΅ΠΌ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ ΠΏΡΠΎΡΠ΅Π½Ρ
ΡΠΎ Π΅ΡΡΡ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ Ρ ΡΠ΅Π»ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ Π²ΠΊΠ»Π°Π΄ΠΎΠ² ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
-
ΠΡΠ»ΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΡ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ,
ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΡΠΈΡΠΈΠ½Π° / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° / Π²ΡΡΠΎΡΠ° / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°),
ΡΠ΅ΡΠ΅Π½ΠΎ ΠΏΡΠΎΡΠΈΠ² Π½ΡΠ»Ρ
ΠΏΡΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΈ Π²ΠΊΠ»Π°Π΄Π° min-content Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΡΠΈ.
(Π‘ΠΌ. Β§5.2.2 Π‘ΠΆΠΈΠΌΠ°Π΅ΠΌΡΠ΅ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ°, ΠΊ ΠΊΠ°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π² HTML ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ.)
UA ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ΅Π»ΠΊΠ° ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° Π½Π° Π²ΡΠ±Π΅ΡΠΈΡΠ΅
).ΠΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠ°ΡΡΠ΅ΡΠ΅
Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ Π²ΠΊΠ»Π°Π΄ Π² ΡΠ°Π·ΠΌΠ΅Ρ,
ΡΡΠΎ Π΄Π°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Β«ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Β».
- ΠΠ»Ρ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°,
Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΠΏΠΎΠ»Π΅ΠΉ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ² (ΠΈ ΠΆΠ΅Π»ΠΎΠ±ΠΎΠ²),
Π¦ΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΡΠΎΡΠΈΠ² Π½ΡΠ»Ρ
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²ΠΊΠ»Π°Π΄ΠΎΠ² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΠ°ΡΠ΅ΠΌ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅,
ΠΏΡΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° :
-
ΠΡΠ»ΠΈ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠ°Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ Π±ΡΠ»Π° Π²Π²Π΅Π΄Π΅Π½Π° ΠΈΠ·-Π·Π°
ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ΅
ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΡΠΈΡΠ»ΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ.
-
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΡΠ΅Π½Ρ ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
(Π Π°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ°;
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΠΏΡΡΡΠΎΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π½Π΅Π΅ Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Ρ.
Π² CSS2Β§10.2, CSS2Β§8.3,
ΠΈ CSS2Β§8.4.
Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² CSS2Β§10.5 Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΡ
Π΄Π»Ρ ΡΠ΅ΠΆΠΈΠΌΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠ°.
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ)
Π½Π΅ ΠΎΠΏΠΈΡΠ°Π½ Π² CSS2.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅:
LOOOOOOOOOOOOOOOOOOOONG
ΠΡΠΈ ΡΠ°ΡΡΠ΅ΡΠ΅ ΡΠΈΡΠΈΠ½Ρ Π²Π½Π΅ΡΠ½Π΅ΠΉ
,
Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ width: auto,
ΠΏΠΎΡΡΠΎΠΌΡ
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°Π²Π½ΡΠΌ ΡΠΈΡΠΈΠ½Π΅ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΡΠΈΠ½Π°
Π½Π΅ Π·Π°Π²ΠΈΡΠ΅Π»Π° ΠΎΡ "ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ" ΠΌΠ°ΠΊΠ΅ΡΠ°,
ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ
,
ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²Π΄Π²ΠΎΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ
.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅
, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° (Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡΠΎΡΠ°) Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°
ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, ΡΡΠΎΠ±Ρ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ,
ΠΏΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π½Π°
ΠΠ°ΡΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ,
ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ
Π²ΡΡΠΎΡΠΎΠΉ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΡΠ°Π·ΡΠ΅ΡΠΈΠ» ΡΠ²ΠΎΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΡΡΠΈΡΠ°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ,
Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π΅Π³ΠΎ Π½Π° Π²ΡΡΠΎΡΡ.ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½Ρ Π½Π°
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ,
ΡΠ°ΠΊ ΡΡΠΎ
ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ±ΡΠ°Ρ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ Π²ΡΡΠΎΡΠ° Π² 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
ΠΏΠΎΡΡΠΎΠΌΡ Π²ΡΡΠΎΡΠ°
Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π° Π½Π° 180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ°ΡΠ΅ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ (100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ),
ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ Π²ΡΡΠΎΡΠ° 180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
ΡΠ°ΠΊ ΡΡΠΎ
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΡΠ΅Π½Ρ Π½Π°
ΠΡΠΎ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ΄Π°,
ΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΏΡΡΠ΅ΠΌ;
ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Ρ
ΠΎΡΠ΅Ρ Π²ΡΡΠΈΡΠ»ΠΈΡΡ Π΄ΠΎ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ
(200% ΠΎΡ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ°).
ΠΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ,
ΠΏΡΠΎΡΠ΅Π½Ρ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π°Π²ΡΠΎ,
Π·Π°ΡΡΠ°Π²ΠΈΠ² Π΅Π³ΠΎ ΡΡΠ°ΡΡ Π²ΡΡΠΎΡΠΎΠΉ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
ΠΈ ΠΎΠ±ΡΠ°Ρ Π²ΡΡΠΎΡΠ° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°
Π±ΡΡΡ 180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
Π±ΡΠ΄Π΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ Π΄ΠΎ 180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
ΠΏΡΠΎΡΠ΅Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΡΠΎΡΠΈΠ² ΡΡΠΎΠΉ Π½ΠΎΠ²ΠΎΠΉ Π²ΡΡΠΎΡΡ,
Π° Π²ΡΡΠΎΡΠ°
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ <ΡΡΠ°ΡΡΡ>
5.2.2. Π‘ΠΆΠΈΠΌΠ°Π΅ΠΌΡΠ΅ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
в HTML§14.4 [HTML],
ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΠ°ΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΌ Π²ΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°,
ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠΆΠ°ΡΡ ΠΈΡ
Π²ΠΊΠ»Π°Π΄ min-content
ΠΊΠΎΠ³Π΄Π° ΠΈΡ
ΡΠΈΡΠΈΠ½Π° / Π²ΡΡΠΎΡΠ° ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π²ΡΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°:
-
Π²Π²ΠΎΠ΄
Ρ Π»ΡΠ±ΡΠΌ ΡΠΈΠΏΠΎΠΌ
, Π½Π΅ ΠΏΠΎΡ
ΠΎΠΆΠΈΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ;
ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²Π°ΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ UA.
Π’ΠΈΠΏ ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΠΏΠΎΡ
ΠΎΠΆΠΈΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡΒ» Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ UA, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ button
,
Π³Π΄Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ΅Π΅ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ UA ΡΠΈΠΏΡ Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β», Β«ΡΠ±ΡΠΎΡΒ», Β«ΠΎΡΠΏΡΠ°Π²ΠΈΡΡΒ» ΠΈ Β«ΡΠ²Π΅ΡΒ» ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ;
ΡΠΈΠΏ "ΡΠ°ΠΉΠ»" ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΠΏΠΎΡ
ΠΎΠΆ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
UA,
ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π²Π²ΠΎΠ΄Π° ΡΠ΅ΠΊΡΡΠ° (ΡΠΆΠΈΠΌΠ°Π΅ΠΌΡΠΉ)
ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ (ΠΏΠΎΡ
ΠΎΠΆΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π΅ ΡΡΠ°ΠΆΠΈΠ²Π°Π΅ΠΌΡΡ).
-
Π²ΡΠ±Π΅ΡΠΈΡΠ΅
, textarea
, progress
, meter
.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π²Π½Π΅ΡΠ΅Π½Π½ΡΠ΅ Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΡ 18 Π΄Π΅ΠΊΠ°Π±ΡΡ 2020 Π³., Π²ΠΊΠ»ΡΡΠ°ΡΡ:
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π²Π½Π΅ΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΡ 22 ΠΌΠ°Ρ 2019 Π³., Π²ΠΊΠ»ΡΡΠ°ΡΡ:
- ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, ΡΡΠΎ min-content ΠΈ max-content Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅ (ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΌ Π²Π΅ΡΡΡΠΊΠΈ).
(ΠΡΠΈΠ±ΠΊΠ° 3973).
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ Π²ΠΊΠ»Π°Π΄ fit-content (), ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π΅Π³ΠΎ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΡΡΠΎΡ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ
Π΄Π»Ρ ΡΠ°ΡΡΠ΅ΡΠ° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΠΊΠ»Π°Π΄Π°
ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠΈΡΠ΅ ΡΠΎΡΠΌΡΠ»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ,
Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ fit-content ()
ΠΏΡΠΈ ΡΠ°ΡΡΠ΅ΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ
Π²Π·Π½ΠΎΡΠΎΠ².(ΠΡΠΈΠ±ΠΊΠ° 3731).
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ
ΡΡΠΈΠΊΠΎΠ².
Π±Π΅Π· Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΎ ICB ΠΈΠ»ΠΈ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Γ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ <Π΄Π»ΠΈΠ½Π°>,
ΡΠΌ. Β§5.1 ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ.
(ΠΡΠΈΠ±ΠΊΠ° 4217).
- ΠΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½
ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ICB Π²ΠΌΠ΅ΡΡΠΎ 300 Γ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
(ΠΡΠΈΠ±ΠΊΠ° 4218).
- ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΅Π³ΠΎ Π²ΠΌΠ΅ΡΡΠΎ Β«Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½Β», Π³Π΄Π΅ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ.
- ΠΡΠΎΡΠΈΠ΅ ΠΌΠ΅Π»ΠΊΠΈΠ΅ / ΡΠ΅Π΄Π°ΠΊΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π²Π½Π΅ΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΡ 4 ΠΌΠ°ΡΡΠ° 2018 Π³., Π²ΠΊΠ»ΡΡΠ°ΡΡ:
- ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π»ΠΎΠΊΠ° ΠΈΠ· CSS UI ΡΡΠΎΠ²Π½Ρ 3.
- ΠΠΎΠ»Π΅Π΅ ΡΡΡΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ².
(1132, 2384, 2297, 2674)
- ΠΠ·ΠΌΠ΅Π½Π΅Π½Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ * -content, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΊ ΠΎΡΠΈ Π±ΠΎΠΊΡΠ°
ΡΡΠΎΠ±Ρ Π½Π΅ Π²ΡΡΠΈΡΠ»ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°,
Π° ΡΠΊΠΎΡΠ΅Π΅ Β«Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊΒ» ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΡΠΎΠΈΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°.(# 2708)
- ΠΡΠΏΡΠ°Π²Π»Π΅Π½Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ²ΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π²Π½Π΅ΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΡ 7 ΡΠ΅Π²ΡΠ°Π»Ρ 2017 Π³ΠΎΠ΄Π°, Π²ΠΊΠ»ΡΡΠ°ΡΡ:
- ΠΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄Π»Ρ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
- ΠΡΡΠΈΡΠ»ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° ΠΏΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π° Π½Π΅ ΠΏΠΎ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ Π½Π΅ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌΡ Π°Π²ΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΎΡΠΈ Π±Π»ΠΎΠΊΠ°.
- Π£ΠΊΠ°ΠΆΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π·Π°ΠΌΠ΅Π½Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ±Π½ΡΠ»ΡΡΡ ΠΈΡ
Π²ΠΊΠ»Π°Π΄ Π² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅.
- ΠΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠ±ΠΈΠ²Π°ΡΡΠ΅Π΅ Ρ ΡΠΎΠ»ΠΊΡ / Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
(ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.)
- ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΌ ΠΈ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΠ΅Π½Ρ Π½Π° ΡΡΠΎΠ²Π΅Π½Ρ 4
ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΈΡ
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π² Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
Π±Π»ΠΎΠΊΠ°Ρ
.
- ΠΡΡΡΠ½ΡΡΡ ΠΏΠΎΠ»Π½ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² (Π° Π½Π΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ): ΡΠΈΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°, ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΡΠΎΠ²Π½Ρ CSS 2
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ Π΄Π΅ΡΠ°Π»Π΅ΠΉ
ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°ΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²,
ΠΏΠΎΡΠ»Π΅ [CSS2] Π±ΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ:
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΠ½ΠΎΡΡΠΈ
ΠΡΠΎΠ±Π°Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½ΠΎΡΡΡ
Π. ΠΡΠ²ΠΈΠ΄ ΠΠ°ΡΠΎΠ½,
ΠΠ°ΡΠΎΠ½ ΠΡΡΡΠ°ΡΡΠΎΠ½,
ΠΠ°Π½ΠΈΡΠ»Ρ Π₯ΠΎΠ»Π±Π΅ΡΡ,
Π° ΡΠ°ΠΊΠΆΠ΅
ΠΠΎΠ²ΡΠΈΠΊΠΈ Palmgren
Π·Π° ΠΈΡ
Π²ΠΊΠ»Π°Π΄ Π² ΡΡΠΎΡ ΠΌΠΎΠ΄ΡΠ»Ρ.
ΠΠΎΠΏΡΠΎΡΡ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ
ΠΠ»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°,
CSS ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠΎΠ»Π΅ΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.Π ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ API [DOM] ΠΈ [CSSOM]
ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²Π΅ΡΠ½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡ
ΡΡΠΈΠΊΠΎΠ² Π² ΡΠΊΡΠΈΠΏΡ,
ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΠΊΡΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΡΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΡΠΌΠ°Ρ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½Π°Ρ.
ΠΏΡΠΎΠ²Π΅ΡΠΈΠ² DOM Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
Π° Π½Π΅ ΠΊΠΎΡΠ²Π΅Π½Π½ΠΎ ΡΠ΅ΡΠ΅Π· ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΡΡ
Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΡΠ΅ΠΊΡΠ΅ΡΡΠ½ΠΎΠ΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ iframe
Ρ)
ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
Π½Π° Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅,
Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π·Π°ΠΌΠ΅Π½Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π²ΡΡΡΠ°Π²ΠΈΡΡ ΠΈΡ
Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ / ΠΈΠ»ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Π²ΡΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ
ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ RFC 2119. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Β«ΠΠΠΠΠΠ«Β»,
Β«ΠΠ ΠΠΠΠΠΠΒ», Β«ΠΠΠ―ΠΠΠ’ΠΠΠ¬ΠΠΒ», Β«ΠΠΠΠΠΠΒ», Β«ΠΠ ΠΠΠΠΠΠΒ», Β«ΠΠΠΠΠΠΒ», Β«ΠΠ ΠΠΠΠΠΠΒ»,
Β«Π ΠΠΠΠΠΠΠΠ£ΠΠ’Π‘Π―Β», Β«ΠΠΠΠΠ’Β» ΠΈ Β«ΠΠΠΠΠΠΠΠ’ΠΠΠ¬ΠΠΒ» Π² Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΡ
ΡΠ°ΡΡΡΡ
Π½Π°ΡΡΠΎΡΡΠ΅Π³ΠΎ
Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² RFC 2119.
ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈ ΡΠ»ΠΎΠ²Π° Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅.
Π±ΡΠΊΠ²Ρ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
ΠΠ΅ΡΡ ΡΠ΅ΠΊΡΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΌ, ΠΊΡΠΎΠΌΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ²
ΡΠ²Π½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Ρ ΠΊΠ°ΠΊ Π½Π΅Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅, ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ.[RFC2119]
ΠΡΠΈΠΌΠ΅ΡΡ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Β«Π½Π°ΠΏΡΠΈΠΌΠ΅ΡΒ»
ΠΈΠ»ΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ class = "example"
,
ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΊΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΡΠΎ ΡΠ»ΠΎΠ²Π° Β«ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅Β» ΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ
Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Ρ class = "note"
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ - ΡΡΠΎ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ, ΠΏΡΠΈΠ·Π²Π°Π½Π½ΡΠ΅ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
ΠΎΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΎΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π½ΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ
ΡΡΠΎ: UA ΠΠΠΠΠΠ« ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ.
Π’Π°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
Π΅ΡΠ»ΠΈ Π²ΡΠ΅ Π΅Π³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ
Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΠ΅ΠΉ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠΎΠΉ CSS ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠ°ΠΌΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ
ΡΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½Π°Ρ Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅.
Π‘ΡΠ΅Π΄ΡΡΠ²ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
Π΅ΡΠ»ΠΈ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ
ΠΏΠΎ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π² ΠΈΡ
ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ
UA Π΄Π»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈΠ·-Π·Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ UA Π½Π΅ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ. (ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, UA Π½Π΅
ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π½Π° ΠΌΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½ΠΎΠΌ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅.)
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΏΠΈΡΠ΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ
ΠΎΠ±ΡΠ°Ρ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠ° CSS ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π³ΡΠ°ΠΌΠΌΠ°ΡΠΈΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π²
ΡΡΠΎΡ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² ΡΡΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅.
Π§ΡΠΎΠ±Ρ Π°Π²ΡΠΎΡΡ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π° Ρ ΠΏΡΡΠΌΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡΡ, ΡΡΠΎΠ±Ρ
Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠ΅Π΄ΡΡΠ²Π° ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° CSS Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ (ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ
ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ) Π»ΡΠ±ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°,
ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
Ρ Π½ΠΈΡ
Π½Π΅Ρ ΠΏΡΠΈΠ³ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ
ΡΠ»ΡΠΆΠ±Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π°Π³Π΅Π½ΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ±ΠΎΡΠΎΡΠ½ΠΎ
ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΎΠ΄Π½ΠΎΠΌ
ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠ·Π½Π°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°: Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌ
(ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ), CSS ΡΡΠ΅Π±ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅
ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ.
ΠΠΎΠ³Π΄Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π΄ΠΎΡΡΠΈΠ³Π°Π΅Ρ ΡΡΠ°Π΄ΠΈΠΈ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°ΡΠ° Π² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ,
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ Π½Π΅ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ
Π²ΡΠΏΡΡΡΠΈΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠ° Π»ΡΠ±ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΡΠΎΠ²Π½Ρ CR, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ.
ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ CSS ΡΠ΅ΡΠ΅Π·
ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡΡ
, ΡΠ°Π±ΠΎΡΠ°Ρ Π³ΡΡΠΏΠΏΠ° CSS ΠΏΡΠΎΡΠΈΡ, ΡΡΠΎΠ±Ρ Π½Π΅ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅
Π‘ΡΠ΅Π΄ΡΡΠ²Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ CSS ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΎΡΡΠ΅Ρ ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ (ΠΈ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ,
ΡΠ΅ΡΡΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΎΡΡΠ΅ΡΠ° ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ) Π² W3C ΠΏΠ΅ΡΠ΅Π΄
Π²ΡΠΏΡΡΠΊ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ CSS Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ².Π’Π΅ΡΡΠΎΠ²ΡΠ΅ Π½Π°Π±ΠΎΡΡ
ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² W3C ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Ρ ΠΈ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Ρ CSS.
Π Π°Π±ΠΎΡΠ°Ρ Π³ΡΡΠΏΠΏΠ°.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π² CSS - Ahmad Shadeed
Π CSS Ρ Π½Π°Ρ Π΅ΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°: Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅ΡΠ²ΡΠΉ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΈΡΡΠ»Π΅Π΄ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ΅Π½Π½ΠΎΡΡΠ΅ΠΉ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·Π²Π»Π΅ΡΡ ΠΈΠ· Π½ΠΈΡ
ΠΏΠΎΠ»ΡΠ·Ρ.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ ΠΎΠ±ΡΡΡΠ½Ρ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ΅ΡΠΊΠΎΠΉ CSS ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS.
ΠΠ½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ
ΠΠ½Π΅ΡΠ½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ) Ρ ΡΠ²Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
.c-button {
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
, ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ. ΠΡΡΠ³ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ - ΡΠ»Π΅ΠΌΠ΅Π½Ρ
.ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 100%
ΠΎΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ΅Π½Π½ΠΎΡΡΠ΅ΠΉ!
ΠΠΈΠ½. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
min-content.
- ΡΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½Π° ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠ°ΠΌΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎ Π΄Π°Π½Π½ΡΠΌ Π Π°Π±ΠΎΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΡ CSS (CSSWG):
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π±Ρ Π²ΠΎΠΊΡΡΠ³ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠΉ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
Π§Π΅ΡΡΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Ρ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ½ΡΠ» ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ CSSWG, Π½ΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ ΡΠ°ΠΌΠΊΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²ΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (ΡΠ»ΠΎΠ²Π°) Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠ½ΡΡΡΡΡ, ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΌΠΎΠΉ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ. ΡΠ»ΠΎΠ²ΠΎ Π² ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠΏΡΠ°Π²ΡΡΠ΅ ΠΌΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΠ±Π°ΡΡΡ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π³Π΄Π΅ Ρ Π½Π°Ρ Π΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ
h3 {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
}
ΠΠ°ΠΊ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° min-content
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ, ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠ°ΠΌΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΌΒ».
Π‘ΠΌ. ΠΠ΅ΡΠΎ
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡ ΠΡ
ΠΌΠ°Π΄Π° Π¨Π°Π΄ΠΈΠ΄Π° (@shadeed)
Π½Π° CodePen.
ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ max-content
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½Π° ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π½ΠΎ Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΠΎΡ ΡΠ°Π·.
h3 {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠ°ΠΊΡ-ΠΊΠΎΠ½ΡΠ΅Π½Ρ;
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠ°Π»Π° ΡΠ°Π²Π½ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ.ΠΡΠ° ΡΠΈΡΠΈΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΎΠ½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
Fit Content
ΠΡΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ min-content
ΠΈ max-content
. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ½Π΅ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΡΠΎΡ ΠΎΡΠ²Π΅Ρ Π½Π° Stackoverflow:
fit-content ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ max-content, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ available
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ ΡΠ΅Π±Π΅ ΡΡΠΎ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°Π½Π΅Π΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS:
h3 {
ΡΠΈΡΠΈΠ½Π°: ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
}
Π‘ΠΌ. ΠΠΈΠ΄Π΅ΠΎ Π½ΠΈΠΆΠ΅ Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Π§ΡΠΎΠ±Ρ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΎ fit-content
, ΠΎΠ½ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ max-content
, ΡΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΡΠ°Π²Π½Π° max-content
. ΠΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ max-content
, ΡΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Ρ.ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΅ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ min-content
, ΡΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° min-content
.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ ΠΎΠ±ΡΡΡΠ½ΠΈΠ» ΠΎΡΠ½ΠΎΠ²Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΠ΅Π½Π½ΠΎΡΡΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ Can I Use, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Ρ
ΠΎΡΠΎΡΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΡΠΎΠΌΠ΅ Microsoft Edge.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Edge (Edgium), ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Ρ
ΡΠΎΠΌΠ΅.
Π‘Π»ΡΡΠ°ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ
Π ΠΈΡΡΠ½ΠΎΠΊ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡ
ΠΠΎΠ³Π΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΡ, Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ 100%
ΠΎΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
<ΡΠΈΡΡΠ½ΠΎΠΊ>
..
ΠΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΈΠ³ΡΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. max-content
ΡΠΏΠ΅ΡΠΈΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ! ΠΠΎΠ±Π°Π²ΠΈΠ² Π΅Π³ΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΈΠ³ΡΡΡ, ΠΎΠ½ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠΈΠ³ΡΡΡ ΡΠ°Π²Π½ΠΎΠΉ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.
ΡΠΈΡΡΠ½ΠΎΠΊ {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠ°ΠΊΡ-ΠΊΠΎΠ½ΡΠ΅Π½Ρ;
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: Π°Π²ΡΠΎ;
ΠΌΠ°ΡΠΆΠ°-ΠΏΡΠ°Π²ΠΎ: Π°Π²ΡΠΎ;
}
ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ΅ ΠΊΡΡΡΠΎ, ΠΏΠΎΠΊΠ° ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π²ΡΡΠΏΠΎΡΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΡΠΈΠ½Π° ΡΠΈΡΡΠ½ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
Π§ΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ fit-content
.ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ Π·Π°ΡΡΠ°Π²ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡ
ΠΎΠ΄ΠΈΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ°Ρ.
ΡΠΈΡΡΠ½ΠΎΠΊ {
ΡΠΈΡΠΈΠ½Π°: ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
}
Π‘ΠΌ. ΠΠ΅ΡΠΎ
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΡΠΈΡΡΠ½ΠΊΡ - 2, Π°Π²ΡΠΎΡ: Ahmad Shadeed (@shadeed)
Π½Π° CodePen.
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«ΠΠ»Π°Π²Π½ΡΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈΒ» Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π΅ ΡΡΡΠΎΠΊΠΈ. Π¨ΠΈΡΠΈΠ½Π° Π΅Π³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π½Π°Π·Π²Π°Π½ΠΈΡ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ΅Π½ Π² ΠΏΠ΅ΡΠ΅Π½ΠΎΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ min-content
.
span {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
}
Π‘ΠΌ. ΠΠ΅ΡΠΎ
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΎΡ ΠΡ
ΠΌΠ°Π΄Π° Π¨Π°Π΄ΠΈΠ΄Π° (@shadeed)
Π½Π° CodePen.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ - ΡΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΡΠ°ΠΌΠΊΠΎΠΉ, ΠΈΠΌΠ΅ΡΡΠ΅ΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΡΡ ΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΠΈΡΡΡ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ
, Π° Π·Π°ΡΠ΅ΠΌ Π³ΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ
.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ
h3 ΠΏΡΠΎΠ»Π΅Ρ {
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid # e2deed;
}
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π»ΡΡΡΠ΅, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ fit-content
, ΠΈ ΠΎΠ½ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ, ΠΊΠ°ΠΊ ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π‘ΠΌ. ΠΠΈΠΆΠ΅ CSS:
h3 {
ΡΠΈΡΠΈΠ½Π°: ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: Π°Π²ΡΠΎ; / * ΠΠ»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ * /
ΠΌΠ°ΡΠΆΠ°-ΠΏΡΠ°Π²ΠΎ: Π°Π²ΡΠΎ; / * ΠΠ»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ * /
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid # e2deed;
}
Π‘ΠΌ. ΠΠ΅ΡΠΎ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ ΠΡ
ΠΌΠ°Π΄Π° Π¨Π°Π΄ΠΈΠ΄Π° (@shadeed)
Π½Π° CodePen.
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ max-content
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ:
.c-nav {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠ°ΠΊΡ-ΠΊΠΎΠ½ΡΠ΅Π½Ρ;
}
ΠΠ΅ΠΌΠΎ
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Todo
ΠΠ΄Π½Π° ΠΈΠ· Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ»Π° ΠΌΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Ρ ΠΏΡΡΠ°Π»ΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΈ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ΅Π½Π½ΠΎΡΡΠ΅ΠΉ, - ΡΡΠΎ ΡΡΠ° ΡΡΠ°ΡΡΡ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.
Π£ Π½Π°Ρ Π΅ΡΡΡ ΡΠΏΠΈΡΠΎΠΊ Π΄Π΅Π» ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΠΏΠΈΡΠΎΠΊ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ».
ΠΡΡΠΎΡΠ° ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ 100% - Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» - Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°Π΄Π°Ρ Π² Π½Π΅ΠΌ Π΅ΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠΊΡ CSS ΠΈ min-content
Π΄Π»Ρ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ.
.c-todo {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΡΠΎΠΊΠΈ: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅;
Π²ΡΡΠΎΡΠ°: 100Π²Ρ
;
}
ΠΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΡΠΎ Π±Ρ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ min-content
Π΄Π»Ρ ΡΡΡΠΎΠΊ? ΠΡ Π²ΠΎΡ:
Π‘ΡΡΠΎΠΊΠΈ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ Π΄ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π±Π΅Π· ΡΡΠ΅ΡΠ° Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° min-content
Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΌΡ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°ΠΌ, ΠΈΡ
Π²ΡΡΠΎΡΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ
.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Ρ
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΎΠ±ΠΌΠ΅Π½Π° ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΠΌΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΡΡΡΠΊΡΡΡΠ° ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ° Π½Π° ΡΠΏΠΈΡΠΎΠΊ Π΄Π΅Π». ΠΡΠ»ΠΈ ΡΠ°ΡΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΈ min-content
Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ, ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ»ΠΎΠΌΠ°Π΅ΡΡΡ.
ΠΠ΅ΠΌΠΎ
Π Π°Π·Π΄Π΅Π» Π³Π΅ΡΠΎΠ΅Π²
ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π»ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ°Π·Π΄Π΅Π»Π° Π³Π΅ΡΠΎΡ.Π¦Π΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π³Π΅ΡΠΎΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
.c-section {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΡΠΎΠΊΠΈ: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ 1fr;
}
ΠΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ Π΄Π²ΡΡ
ΡΡΡΠΎΠΊ ΠΏΠ΅ΡΠ²Π°Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡΠΎΡΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° Π΅Π΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ, Π° Π²ΡΠΎΡΠ°Ρ ΡΡΡΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
Π‘ΠΌ. ΠΠ΅ΡΠΎ
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ - ΠΠ΅ΡΠΎΠΉ ΠΡ
ΠΌΠ°Π΄Π° Π¨Π°Π΄ΠΈΠ΄Π° (@shadeed)
Π½Π° CodePen.
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ
ΠΠ½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΏΠΎΡΠ΅ΠΌΡ Ρ Π½Π°Ρ Π΅ΡΡΡ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ.Π§ΡΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π·Π°Π²ΠΈΡΠ΅Π»Π° ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ? Π‘ΠΊΠ°ΠΆΠ΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ? ΠΠ°Π²Π°ΠΉ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ.
.wrapper {
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) 1fr;
ΡΠ΅ΡΠΊΠ°-Π·Π°Π·ΠΎΡ: 1Π±ΡΡ;
}
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ½ΠΊΡΠΈΡ CSS grid fit-content
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
, ΠΈ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡΡ Π½ΠΈΠΆΠ΅ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΠ»ΡΡΠ°Π΅ ΠΊΠΎΡΠΎΡΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ.
Π ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΊΠΎΡΠΎΡΠΊΠΎΠ΅, ΠΎΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ. Π‘ΠΌ. ΠΠΈΠΆΠ΅:
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π£ Π½Π°Ρ Π΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΡΠ΅ΠΊΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ. Π¨ΠΈΡΠΈΠ½Π° ΡΠ΅ΠΊΡΡΠ° ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. ΠΠ»Ρ ΠΌΠ΅Π½Ρ ΡΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π½Π΅ Π΄ΡΠΌΠ°Π», ΡΡΠΎ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
Π§ΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΠ΅ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ min-content
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π° ΠΎΠ±Π΅ΡΡΡΠ²Π°Π½ΠΈΡ ΠΈ max-content
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.
section {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠΈΠ½-ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅;
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
}
h3 {
ΡΠΈΡΠΈΠ½Π°: ΠΌΠ°ΠΊΡ-ΠΊΠΎΠ½ΡΠ΅Π½Ρ;
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ·ΠΎΠ²Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
Π‘ΠΌ. ΠΠ΅ΡΠΎ
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ - Π’Π΅ΡΡ ... ΠΡ
ΠΌΠ°Π΄ Π¨Π°Π΄ΠΈΠ΄ (@shadeed)
Π½Π° CodePen.
ΠΠΎΠ½Π΅Ρ
ΠΠΎΡ ΠΈ Π²ΡΠ΅. Π£ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅? ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π°ΠΏΠΈΡΠΈΡΠ΅ ΠΌΠ½Π΅ Π½Π° @ shadeed9.
Π Π΅ΡΡΡΡΡ
ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΡ
Π΅Π΄ΠΈΠ½ΠΈΡ CSS Β· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ WebPlatform
ΠΠΈΠ½ΡΠ΅Π½Ρ Π₯Π°ΡΠ΄ΠΈ, Π‘ΠΈΠ»ΡΠ²Π΅Π½ ΠΠ°Π»ΠΈΠ½ΠΎ
Π‘Π²ΠΎΠ΄ΠΊΠ°
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ CSS ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ CSS ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π Π°ΡΡΡΡΠ΅Π΅ ΡΠΈΡΠ»ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡ Π΄Π»ΠΈΠ½Ρ CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΎ Π²Π΅Π±-Π°Π²ΡΠΎΡΠ°ΠΌ Π½ΠΎΠ²ΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ (ΡΠΌ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ CSS). ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅Π΄ΠΈΠ½ΠΈΡΠ° Β«remΒ» (root Β«emΒ») ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²ΠΎ Π²ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΈΡΠΏΠ»Π΅Ρ.
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ Π΄ΠΈΡΠΏΠ»Π΅Ρ: Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π³ΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΡΠ΅Π΄ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°: ΡΠΌΠ°ΡΡΡΠΎΠ½Ρ, ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡΠΎΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅Π»Π΅Π²ΠΈΠ·ΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΊΡΠ°Π½Ρ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ ΡΡΠΎΡΠΎΠ½, ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΠΎΡΡΡΠΏΠ΅Π½ ΡΡΠ΄ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠ΅ΠΏΠ΅ΡΡ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ². ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°ΠΊΠΈΡ
ΡΠ°ΠΊΡΠΎΡΠΎΠ² ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ»ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½. ΠΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΡΠ΅Π΄Ρ ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠΎΡΠ½Π΅Π½ΠΈΡ ΠΈ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄ΠΈΡΠΏΠ»Π΅Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π΄ΠΈΡΠΏΠ»Π΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ
ΠΠΎΡΡΡΠΏΠ½ΠΎ Ρ CSS1, ΠΏΡΠΎΡΠ΅Π½ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΈΡ
Π±Π»ΠΎΠΊΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ΅Π»ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΊ:
ΠΊΡΠ·ΠΎΠ² {
ΡΠΈΡΠΈΠ½Π°: 80%;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: Π°Π²ΡΠΎ;
ΠΌΠ°ΡΠΆΠ°-ΠΏΡΠ°Π²ΠΎ: Π°Π²ΡΠΎ;
}
β¦ ΡΡΠΎΠ±Ρ ΡΠ΅Π»ΠΎ Π±ΡΠ»ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ 900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ 80% ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.(ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°; ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΎ ΠΏΠΎΠ·ΠΆΠ΅)
ΠΡΠΎΡΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΈΡ
ΡΠΈΠΏΠΎΠ² ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ CSS ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ
:
Π΄ΠΎ
1 em - ΡΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ font-size Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π° 3em, Π° ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡ - Π½Π° 1em, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡ, ΡΡΠΎ ΠΏΡΠΈ Π²ΡΠ΅Ρ
ΡΡΠ»ΠΎΠ²ΠΈΡΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π² 3 ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ.Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° font-size Π΅Π΄ΠΈΠ½ΠΈΡΠ° em ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π²Π½ΡΡΡΠΈ
Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ°: 2 em Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΠΊΡΡ Π² 6 ΡΠ°Π· Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π² ΡΠ΅Π»Π΅.
ΠΈΠ·
1 ex - Π²ΡΡΠΎΡΠ° ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΡΠΈΡΡΠ° ΠΏΠΎ ΠΎΡΠΈ x. ΠΡΡΠΎΡΠ° ΠΏΠΎ ΠΎΡΠΈ x ΠΎΠ±ΡΡΠ½ΠΎ (Π½ΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π² ΡΡΠΈΡΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ Β«xΒ») ΡΠ°Π²Π½Π° Π²ΡΡΠΎΡΠ΅ ΡΡΡΠΎΡΠ½ΠΎΠΉ Π±ΡΠΊΠ²Ρ Β«xΒ»
ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΡΠ΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ.ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²ΡΡΠΎΡΠΎΠΉ x ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΡΠΈΡΡΠ° Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ Π³Π°ΡΠΌΠΎΠ½ΠΈΠΈ.
ΡΠ°ΡΡΠΈ
1 ch - ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Π° Β«0Β» (Π½ΠΎΠ»Ρ) Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΡΠΈΡΡΠ΅. βChβ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Ρ
Π°ΡΠ°ΠΊΡΠ΅Ρ.
ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ ΡΡΠΈΡΡΠ° ΠΡΠ°ΠΉΠ»Ρ.
ΡΠ΅ΠΌ
1 rem - ΡΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° font-size Π΄Π»Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ°ΡΡΠΎ ΠΏΡΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΠ΅ΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ em, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π° Π½Π΅Π΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π½Π° Π΅Π΄ΠΈΠ½ΠΈΡΡ em.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° 0,5 em Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
- ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ
- ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, Π½ΠΎ
- Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΡΠΈΡΡ 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ - ΡΠ°Π·ΠΌΠ΅Ρ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° font-size Π½Π° 0,5 rem ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
- ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ
ΡΡΠΎΠ²Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ.
VW
1vw ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1% ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Β«VwΒ» ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°Β».
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΠΎΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡΡΡ ΠΊ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
vh
1vh - ΡΡΠΎ 1% Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Β«VhΒ» ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°Β».
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΠΎΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡΡΡ ΠΊ ΡΠ°Π·Π½ΠΎΠΉ Π²ΡΡΠΎΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°Π»ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
vmin
Π Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ΠΌΡ ΠΈΠ· "vw" ΠΈΠ»ΠΈ "vh"
Π‘ΠΌ. Vh / vw
vmax
Π Π°Π²Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΈΠ· "vw" ΠΈΠ»ΠΈ "vh"
Π‘ΠΌ. Vh / vw
ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ
ΠΎΠ»ΡΡΠ° ΠΈ Β«ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈΒ»?
ΠΠΎ ΡΠΈΡ
ΠΏΠΎΡ ΠΌΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠ»ΠΈΡΡ Π½Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.ΠΠ΄Π½Π°ΠΊΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π°Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Π΅ΠΎΠΈΠ³ΡΠ΅.
ΠΠ»Ρ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ
ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Canvas 2D, ΡΠ°ΠΊ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, Π° ΡΠ°ΠΊΠΆΠ΅ WebGL. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π² ΠΎΡΠ΅Π½Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Π°Ρ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΈΠ³ΡΠ°Ρ
).
Π₯ΠΎΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π΅ΡΡΡ ΡΡΠ΅Π½Π°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΡΡ
ΡΡΠΎ Π²ΡΠ΅ ΠΆΠ΅ Π»ΡΡΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΠΎ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ: ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ?
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π° Π½ΠΎΡΠΈΡΠ΅Π»Π΅ Π²ΡΠ²ΠΎΠ΄Π°, ΡΠ°ΠΊΠΎΠΌ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ½ΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠΊΡΠ°Π½, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ, Π² ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠΎΠΊΠ° ΡΠ΅ΠΊΡΡΠ° ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ Π² Π½Π°Π±ΠΎΡ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΊΠΎΠ½ΡΡΡΠΎΠ², ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΡΡ
Π΄Π°Π½Π½ΡΠΌΠΈ ΡΡΠΈΡΡΠ°; ΡΡΠΈ ΠΊΠΎΠ½ΡΡΡΡ Π·Π°ΡΠ΅ΠΌ Β«ΡΠ°ΡΡΡΠΈΡΡΡΡΡΡΒ» ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°ΡΡΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΠΈ.Π’ΠΎΡ ΠΆΠ΅ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΡΠΌΠΈ ΡΠΎΡΠΌΠ°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ (ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ° x / y) ΠΈ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ (ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ).
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π° ΠΊ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠ΅Π±ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΎΠΏΠΈΡΡΠ²Π°Π»ΠΈΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ Π½Π΅ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΎΡΠ½ΡΡ
Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ Π²ΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½ΠΎΡΠΈΡΠ΅Π»Ρ. Π¦Π΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠΌΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΌΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²ΡΠ²ΠΎΠ΄Π° Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ² Π²ΡΠ²ΠΎΠ΄Π° ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΡΠΈΡΠΎΠΊΠΎ, ΠΊΠ°ΠΊ ΠΈ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π° 96 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ (dppi = ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° Π΄ΡΠΉΠΌ) ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π»ΠΈΠ½Ρ ΠΎΠΊΠΎΠ»ΠΎ 4 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½Π° (x = 10 ΠΌΠΌ, y = 20 ΠΌΠΌ), Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΡΠΎΠ²Π½Π΅ x = 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ y = 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Π΅ 300dppi ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΠΊΠΎΠ»ΠΎ 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π² Π΄Π»ΠΈΠ½Ρ, Π° ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² x = 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ y = 240 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΈ ΡΡΠΎ Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ, ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Π΅ ΠΏΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΎΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ i.Π΅. ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 10 ΠΌΠΌ ΠΏΠΎ ΠΎΡΠΈ X ΠΈ 20 ΠΌΠΌ ΠΏΠΎ ΠΎΡΠΈ Y.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
Π§ΡΠΎΠ±Ρ Π½Π΅ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠΈΡΡΠ΅ΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°. Postscript ΠΈ PDF - ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ
Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°. ΠΠ±Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Β«ΡΠΎΡΠΊΡΒ» ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π΅Π΅ ΠΊΠ°ΠΊ 1/72 Π΄ΡΠΉΠΌΠ°.
Scalable Vector Graphics (SVG) Π΄Π΅Π»Π°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΎΡ ΠΊΠΎΡΠΎΡΠΎΠΉ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ; CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS, Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°Π·ΡΠ΅ΡΠ°ΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ (ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠ°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° SVG ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Β«pxΒ» Π² CSS).
ΠΠΎ Π²ΡΠ΅Ρ
ΡΡΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΠ²ΠΎΠ΄ΡΡΡΡ ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΡΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π° Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½Π° ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΡΠ³Π»ΡΠ±ΠΈΠΌΡΡ Π² ΠΌΠΎΠ΄ΡΠ»Ρ Β«pxΒ» CSS, ΠΎΡΠΌΠ΅ΡΠΈΠΌ, ΡΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ SVG, ΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΠΈ Π΄Π»Ρ Π²Π°ΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ - Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° Ρ 2013 Π³ΠΎΠ΄Π°.Π³ΡΠ°ΠΌΠΌ. ΡΠΌ. http://css-tricks.com/html-for-icon-font-usage/ ΠΈΠ»ΠΈ http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html. Π Π΅ΡΠ΅ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠΌΠ½ΡΠ΅ Ρ
Π°ΠΊΠΈ OpenType, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Chartwell ΠΈΠ»ΠΈ Symbolset. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΡΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ Π°ΡΡΠ΅Π½Π°Π»Π°.
Π ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
CSS, ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ
Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ
ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΠΈ
Π₯ΠΎΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Values ββand Units ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS Π² ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ CSS ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ.ΠΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½Ρ ΠΊΠ°ΠΊ:
96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ = 1 Π΄ΡΠΉΠΌ
ΠΡΠΎΡΡΠ°Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π΄Π²Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½Π½ΡΡ
ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ:
- ΠΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ - Π»Π°Π·Π΅ΡΠ½ΡΡ
ΠΏΡΠΈΠ½ΡΠ΅ΡΠ°Ρ
ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΡΠΊΡΠ°Π½Π°Ρ
Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ - ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΏΠΎΡΡΠ°Π²Π»ΡΡΡ Π΄ΡΠΉΠΌ Ρ Π΅Π³ΠΎ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ (ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«ΡΠΎΠΎΡΠ½Π΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ
Π΅Π΄ΠΈΠ½ΠΈΡ Ρ ΠΈΡ
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈΒ»). Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΠ° Β«pxΒ» CSS (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1/96 Π΄ΡΠΉΠΌΠ°) ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡΡΡ Π² Π΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΠΊΡΠ°Π½Π΅ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 300 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ (ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° Π΄ΡΠΉΠΌ) ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 300/96 = 3,125. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
β¦ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 3,125 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°ΡΡΠ΅ΡΠΈΠ·Π°ΡΠΎΡΠ° - ΡΠ°ΡΡΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡΡΠ΅ΠΉ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΠΈ - Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡΠΈΠΉ 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΡΠΈΡΠ½ΠΎΠ΅ ΠΏΠΎΠΊΡΡΡΠΈΠ΅ 4-Π³ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ Ρ ΡΠΎΠ½ΠΎΠΌ.
- ΠΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ Β«ΡΠ²ΡΠ·Π°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΡΡΠ°Π»ΠΎΠ½Π½ΡΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ ΠΎΡΠ½ΠΎΡΠΈΠ»ΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π°ΠΈΠ»ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ°Π΅ΡΡΡ ΠΊ ΡΡΠ°Π»ΠΎΠ½Π½ΠΎΠΌΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΒ». Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΈΠ½ΡΡ ΡΠ°ΠΌΠΊΠ° ΠΌΠΎΠ³Π»Π° Π±ΡΡΡ ΠΏΠΎΠ»Π½ΡΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄ ΠΏΠΈΠΊΡΠ΅Π»Ρ CSS ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΠΊΡΠ°Π½Π°. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠ΅, Π΄ΡΠΉΠΌ CSS Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ Π΄ΡΠΉΠΌΡ; Π΅ΡΠ»ΠΈ ΠΈΡΡΠΈΠ½Π½ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½ΠΎΡΡΠ±ΡΠΊΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 120 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ, Π΄ΡΠΉΠΌ Π΄Π»ΠΈΠ½ΠΎΠΉ 96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π±ΡΠ΄Π΅Ρ 96/120 = 0.8 ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ
Π΄ΡΠΉΠΌΠΎΠ²!
Π‘ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½ΠΎΠ² Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ Π΄Π²ΡΠΌΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° ΠΏΠΈΠΊΡΠ΅Π»Ρ CSS (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Apple Retina), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΈΡΠΏΠ»Π΅ΠΈ Ρ Π΄ΡΠΎΠ±Π½ΡΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (ΡΠΌ. ΠΡΡ ΡΡΠ°ΡΡΡ MDN). ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ΄ΠΈΠ½ΠΈΡΡ CSS Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
/ Π² ΡΠ΅ΡΡΠ΅
<ΡΡΠΈΠ»Ρ>
ΡΠ΅Π»ΠΎ {
ΡΠΎΠ½: # 404040;
}
.css-box> span {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
Π²ΡΡΠΎΡΠ°: 1em;
border-right: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ 1px;
}
.css-box.px> span {
ΡΠΈΡΠΈΠ½Π°: 96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: #fefefe;
}
.css-box.in> span {
ΡΠΈΡΠΈΠ½Π°: 1 Π΄ΡΠΉΠΌ;
ΡΠΎΠ½: # 4166B5;
}
Π ΠΈΡΡΠ½ΠΎΠΊ 1. ΠΡΡΠΈΡΠΎΠ²ΠΊΠ° Π² OSX Safari
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΡΠ°Π΅ΠΌΡΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π° ΡΠ°Π·Π½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ:
- ΠΠΎ Π²ΡΠ΅Ρ
ΡΠ»ΡΡΠ°ΡΡ
ΡΠ²Π΅ΡΠ»ΡΠΉ ΠΈ ΡΠΈΠ½ΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ 1 Π΄ΡΠΉΠΌ CSS Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π²Π΅Π½ 96 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ CSS; Π±Π΅Π»ΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠΈΠ½ΠΈΠ΅ - 1 Π΄ΡΠΉΠΌ. ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, ΠΈΡ
ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ²ΠΏΠ°Π»Π°.
- ΠΠ° 15-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠΌ Π΄ΠΈΡΠΏΠ»Π΅Π΅ MacBook Pro Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 110 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ: 96 * 1/110 = 0,872 Π΄ΡΠΉΠΌΠ°. ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ CSSpx / ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΡΠ°Π²Π½ΠΎ 1. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π»ΠΈΠ½Π΅ΠΉΠΊΡ Π½Π° ΠΌΠΎΠ΅ΠΌ ΡΠΊΡΠ°Π½Π΅, Ρ ΠΈΠ·ΠΌΠ΅ΡΠΈΠ» 0,88 Π΄ΡΠΉΠΌΠ°, ΠΈ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΠΌΠΎΠ΅ΠΉ ΡΡΠ΄ΠΈΠΌΠ΅Π½ΡΠ°ΡΠ½ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠΊΠ΅ ΠΈ ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ Π·ΡΠ΅Π½ΠΈΠΈ :-). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄ΡΠΉΠΌ CSS Π½Π° 22,8% ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΡΠΉΠΌΠ°.
- ΠΠ° iPhone 5 Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 326 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 96 * 2/326 = 0,589 Π΄ΡΠΉΠΌΠ°. ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π½Π° ΡΡΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ CSS px ΠΊ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ ΡΠ°Π²Π½ΠΎ 2. Π‘Π½ΠΎΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π»ΠΈΠ½Π΅ΠΉΠΊΡ, Ρ ΠΏΠΎΠ»ΡΡΠΈΠ» 1,592 Π΄ΡΠΉΠΌΠ°. ΠΠΏΡΡΡ ΠΆΠ΅ ΠΏΠΎΠ³ΡΠ΅ΡΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ΄Π΅ΡΡ Π΄ΡΠΉΠΌ CSS ΠΌΠ΅Π½ΡΡΠ΅ Π½Π° 41,1%
- ΠΠ° ΠΏΡΠΈΠ½ΡΠ΅ΡΠ΅ (Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Canon Pixma MP600) ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄ΡΠΉΠΌ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρβ¦ 1,05 Π΄ΡΠΉΠΌΠ° !! Π’Π°ΠΊ ΡΡΠΎ ΡΡΠΎ 5% ΠΎΡΠΈΠ±ΠΊΠ° Π½Π° ΡΡΠΎΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ½ΡΠ΅ΡΠ΅.
ΠΡΠ°ΠΊβ¦ ΠΏΠΈΠΊΡΠ΅Π»Ρ - ΡΡΠΎ Π½Π΅ ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° Π΄ΡΠΉΠΌ - ΡΡΠΎ Π½Π΅ Π΄ΡΠΉΠΌ?
ΠΡ, ΡΡΠΎ ΠΏΠΎΡΡΠΈ ΡΠ°ΠΊ, Π½ΠΎ Π½Π΅ ΡΠ°ΠΊ ΠΏΠ»ΠΎΡ
ΠΎ, ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΅ΡΡΡ.ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ:
- ΠΠΈΠΊΡΠ΅Π»Ρ CSS ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΡΡΠ°Π»ΠΎΠ½Π½ΡΠΌΒ» ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ, Π° Π½Π΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π° . ΠΡΠΎ Π²Π²ΠΎΠ΄ΠΈΡ Π² Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅, ΠΈ Π»ΠΈΡΠ½ΠΎ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ ΠΏΠΎΠ½ΡΡΠΈΠ΅ Β«ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠ°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Β», ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ SVG, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΠΎΠ³Π΄Π° Π»Π΅Π³ΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΠΎΠΏΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Ρ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠΎ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Β«pxΒ» Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ°Π»ΠΎΠ½ΠΎΠΌ, Π° Π½Π΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π²ΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ. Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ CSS-ΠΏΠΈΠΊΡΠ΅Π»Ρ - ΡΡΠΎ Π°Π±ΡΡΡΠ°ΠΊΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅, ΡΠΏΡΠ°Π²Π»ΡΡΡΠ΅Π΅ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½Π°: Π°) ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ Π±) ΡΠΎΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ (ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS ΠΊ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°). Π΄ΡΠΉΠΌ).
- Π΄ΡΠΉΠΌ CSS ΡΠΎΡΠ½ΠΎ ΠΈΠ»ΠΈ Β«Π±Π»ΠΈΠ·ΠΊΠΎΒ» ΠΊ Π΄ΡΠΉΠΌΡ . ΠΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π΅ΡΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π΅ ΠΌΠ΅ΡΠ°ΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS), Π΄ΡΠΉΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌ Π΄ΡΠΉΠΌΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ. ΠΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π° ΠΏΠΎΠ³ΡΠ΅ΡΠ½ΠΎΡΡΡ, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π²ΡΡΠ΅.
- ΠΠ°ΠΆΠ½Π΅Π΅ Π²ΡΠ΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΠΌΠΎΡΡΡ . ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΌ Π°ΡΠΏΠ΅ΠΊΡΠΎΠΌ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π° Π΅Π΄ΠΈΠ½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠΌ ΠΈ ΡΠ°Π·ΡΠΌΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.Π₯ΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ Π½Π° Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ, ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅, Π²ΡΠ·ΡΠ²Π°ΡΡΠ΅Π΅ ΡΠ°Π·ΠΌΡΡΠΎΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°).
ΠΠ°ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΡΡΠ»ΠΈ
ΠΡΠ°ΠΊ, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ Π² Π²ΠΈΠ΄Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΡΡΠΎΠ±Ρ Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅ΡΡ
ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎΡΠΌ-ΡΠ°ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ? ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΡΠ²ΠΎΠ΄ΠΎΠ²:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,Π³., ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΠΊΡΠ°Π½ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΏΠ»Π°Π½ΡΠ΅ΡΠ½ΡΠΉ ΡΠΈΠΏ, ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ», Π±ΠΎΠ»ΡΡΠΎΠΉ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ).
- ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π°.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π±Π»ΠΎΠΊΠΈ CSS ΠΈ ΠΌΠ°ΠΊΠ΅Ρ CSS, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΡΠΎΠΊ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½ΠΎΠ²Π΅ΠΉΡΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Β«remΒ», Β«vhΒ» ΠΈ Β«vwΒ» (ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΠΈΡ
ΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ) ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠ΅, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Β«ΠΏΡΠΎΡΠ΅Π½ΡΡΒ», Β«emΒ» ΠΈΠ»ΠΈ Β«ptΒ».
- ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΡΠΉ ΡΡΡΠ»ΠΎΡΠ½ΡΠΉ ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΈ ΡΡΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ 96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΡΡ ββΠΆΠ΅ Π΄Π»ΠΈΠ½Ρ, ΠΊΠ°ΠΊ 1 Π΄ΡΠΉΠΌ CSS .
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ SVG (ΠΈΠ»ΠΈ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ², Π±ΠΎΠ»Π΅Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠ΅, Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅) Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ (Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ / ΠΈΠ»ΠΈ Π²Π°ΡΠΈΡ
ΡΠ΅Π»Π΅Π²ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²), ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΡ
ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠ΅ΠΉ ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅
Π΅Π΄ΠΈΠ½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° CSS - ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ HTML ΠΈ CSS
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ²ΠΎΠΉΡΡΠ² CSS, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° :
-
font-size
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ°
-
border-width
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
-
ΠΠΎΠ»Π΅
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
-
Π²Π»Π΅Π²ΠΎ / Π²ΠΏΡΠ°Π²ΠΎ / Π²Π²Π΅ΡΡ
/ Π²Π½ΠΈΠ·
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ:
-
px
Π΄Π»Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
-
%
Π΄Π»Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²
-
em
Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ font-size
.
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² CSS .
ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
body {width: 400px;}
ΠΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° :
body {font-size: 20px;}
ΠΠΈΠΊΡΠ΅Π»ΠΈ Π² CSS ΠΏΡΠΎΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ : Π½Π° Π½ΠΈΡ
Π½Π΅ Π²Π»ΠΈΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS.
ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ² .
ΠΡΠΎΡΠ΅Π½ΡΡ
ΠΡΠΎΡΠ΅Π½ΡΡ - ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡ : ΠΎΠ½ΠΈ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π°Π±Π·Π°ΡΡ, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅ΠΉ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ . Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΎ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
p {width: 50%;}
ΠΡΠΎΡΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ°:
strong {font-size: 150%;}
ΠΠ΅ΡΠ΅Π΄ Π½Π°ΠΌΠΈ ΡΡΠΎΡΡ Π²Π°ΠΆΠ½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ.
ΠΠ΅ΡΠ΅Π΄ Π½Π°ΠΌΠΈ ΡΡΠΎΠΈΡ Π²Π°ΠΆΠ½ΡΡ
Π·Π°Π΄Π°Ρ.
Em
em
- ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° : ΠΎΠ½Π° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ font-size ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΈ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ font-size: 0.8em
ΠΊ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
.
ΠΠ΅ ΠΏΡΡΠ°ΠΉΡΠ΅ Π±Π»ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ° CSS em
ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ CSS em
, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π°
HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠ»ΠΎΠΊ em
ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½ ΡΠ΅ΠΌ, ΡΡΠΎ Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ.Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΡΡΠ½ΡΡ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΡΡΠΎΡΠ½Π½Π°Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½Π°Ρ Π³Π»ΡΠ±ΠΈΠ½Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°Ρ
Π±ΡΠ» Π² Π΄Π²Π° ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²Π°Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡ, Π²Π°Ρ
ΡΠΎΠ»ΡΠΊΠΎ Π² 1,5 ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅, Π° Π²Π°ΡΠ° Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅. ΠΡΠΎΠ³ΠΎ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π² CSS:
.
body {font-size: 16px;}
h2 {font-size: 2em;} / * = 32 ΠΏΠΈΠΊΡΠ΅Π»Ρ * /
h3 {font-size: 1.5em;} / * = 24 ΠΏΠΈΠΊΡΠ΅Π»Ρ * /
aside {font-size: 0.75em;} / * = 12px * /
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π²Π°ΡΠΈΡ
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ , ΠΈ Π²Π°ΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ .
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
body {font-size: 20px;}
h2 {font-size: 2em;} / * = 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
h3 {font-size: 1.5em;} / * = 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
Π² ΡΡΠΎΡΠΎΠ½Ρ {font-size: 0.75em;} / * = 16px * /
Rem
ΠΠ΄ΠΈΠ½ΠΈΡΠ° rem
Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Π° em
, Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° , ΠΎΠ½Π° ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
.
html {font-size: 18px;}
body {font-size: 1rem;} / * = 18 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
h2 {font-size: 2rem;} / * = 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
h3 {font-size: 1.5rem;} / * = 27px * /
Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ rem
ΠΈ em
Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ rem
ΡΠ°Π²Π½Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ , Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ em
ΠΌΠΎΠ³ΡΡ ΡΠΌΠ½ΠΎΠΆΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ ΠΡΡΠ³ΠΈΠ΅.
ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ html {font-size: 18px;}
:
-
2rem
Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΠΎ 36px
, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π² ΡΠ²ΠΎΠ΅ΠΌ CSS
-
2em
Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΠΎ double ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ font-size
, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ 36px
ΠΡΡΡΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π³Π΄Π΅ 2em
ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ 2rem
:
html {font-size: 20px;}
ΠΏ {ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 0.8rem;} / * = 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
p span {font-size: 2em;} / * = 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * 2 = 32 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
p strong {font-size: 2rem;} / * = 20px * 2 = 40px * /
span
ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° p
, Π° strong
ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° html
font- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°.