ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Python ΠΈ Objective-C Π² Mac OS

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Python ΠΈ Objective-C ΠΏΠΎΠ΄ Mac OS ΠΈ для iPhone / iPod Touch

Css Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтов: CSS3 | Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтов. Box-sizing

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

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 пСрСчислСны основныС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹.

    Π’Π°Π±Π». 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 ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΈΡ… список с описаниСм.

    Π’Π°Π±Π». 2. ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния
    Π•Π΄ΠΈΠ½ΠΈΡ†Π°ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
    vw1% ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ области просмотра
    vh1% ΠΎΡ‚ высоты области просмотра
    vmin1% ΠΎΡ‚ мСньшСго значСния ΠΈΠ· ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты области просмотра
    vmaxΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ большС, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ высоты области просмотра ΠΈ ΠΎΡ‚ Π½Π΅Π³ΠΎ вычисляСтся 1%
    ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹

    ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой физичСскиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ β€” Π΄ΡŽΠΉΠΌΡ‹, сантимСтры, ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, ΠΏΠΈΠΊΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ пиксСли. Для устройств с Π½ΠΈΠ·ΠΊΠΈΠΌ dpi (количСство Ρ‚ΠΎΡ‡Π΅ΠΊ приходящихся Π½Π° ΠΎΠ΄ΠΈΠ½ дюйм, опрСдСляСт ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΡ‡Π΅ΠΊ) привязка ΠΈΠ΄Ρ‘Ρ‚ ΠΊ пиксСлю. Π’ этом случаС ΠΎΠ΄ΠΈΠ½ дюйм Ρ€Π°Π²Π΅Π½ 96 пиксСлям. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ дюйм Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с дюймом Π½Π° Ρ‚Π°ΠΊΠΎΠΌ устройствС. На устройствах с высоким dpi Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ дюйм совпадаСт с дюймом Π½Π° экранС, поэтому Ρ€Π°Π·ΠΌΠ΅Ρ€ пиксСля вычисляСтся ΠΊΠ°ΠΊ 1/96 ΠΎΡ‚ дюйма. Π’ Ρ‚Π°Π±Π». 3 пСрСчислСны основныС Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹.

    Π’Π°Π±Π». 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, ex31213.511
    ch912272071
    rem912411.64.13.6
    vw, vh9122020619
    vmax1626156.119
    vmin9122015619
    px, in, cm, mm, pt, pc, em, ex
    ch4.42377.1.1
    rem2.12124
    vw, vh2.119376
    vmax4.419376.1
    vmin2.119376

    Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

    Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ обозначСния.

    • Β β€” свойство ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ со всСми допустимыми значСниями;
    • Β β€” свойство Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π½Π΅ воспринимаСтся ΠΈ игнорируСтся;
    • Β β€” ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ появлСниС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ошибок, Π»ΠΈΠ±ΠΎ свойство поддСрТиваСтся лишь частично, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ всС допустимыС значСния Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈΠ»ΠΈ свойство примСняСтся Π½Π΅ ΠΊΠΎ всСм элСмСнтам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² спСцификации.

    Число ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, начиная с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ свойство поддСрТиваСтся.

    Автор ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

    Автор: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

    ПослСднСС измСнСниС: 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 , это ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ поля ΠΈΠ»ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°; ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° области просмотра Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра.Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° области просмотра, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ встроСнный