Css размеры элементов: CSS3 | Размеры элементов. Box-sizing — Программирование на Python и Objective-C в Mac OS

Содержание

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. Относительные единицы измерения
Единица	Описание
vw	1% от ширины области просмотра
vh	1% от высоты области просмотра
vmin	1% от меньшего значения из ширины и высоты области просмотра
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, 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 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 , это изменит размер поля или шрифта; изменение размера области просмотра также изменит их размеры, поскольку они имеют размер относительно области просмотра.Чтобы увидеть изменение примера при изменении размера области просмотра, вам нужно будет загрузить пример в новом окне браузера, размер которого можно изменить (поскольку встроенный </code>, который содержит пример, показанный выше, является его окном просмотра). Откройте пример, измените размер окна браузера и посмотрите, что происходит с размером поля и текста. </strong></p><p> Размеры объектов в соответствии с областью просмотра могут быть полезны в ваших проектах. Например, если вы хотите, чтобы полностраничный раздел героя отображался перед остальным контентом, установка этой части страницы на высоту 100vh приведет к выталкиванию остального контента ниже области просмотра, что означает, что он появится только после того, как документ будет отображен. прокручивается.</p><p> В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: определение размеров.</p><p> Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы переходите к макету CSS, изменение размеров станет очень важным для освоения различных методов макета, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.</p><h2><span class="ez-toc-section" id="box-sizing_-_CSS_%D0%BA%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9"></span> box-sizing — CSS: каскадные таблицы стилей <span class="ez-toc-section-end"></span></h2><p> Свойство <strong> <code> box-sizing </code> </strong> CSS устанавливает способ вычисления общей ширины и высоты элемента.</p><p> По умолчанию в блочной модели CSS ширина <code> </code> и высота <code> </code>, которые вы назначаете элементу, применяются только к блоку содержимого элемента. Если у элемента есть какие-либо границы или отступы, они затем добавляются к <code> ширине </code> и <code> высоте </code>, чтобы получить размер поля, отображаемого на экране.Это означает, что когда вы устанавливаете <code> ширину </code> и <code> высоту </code>, вы должны отрегулировать значение, которое вы даете, чтобы учесть любую границу или отступ, которые могут быть добавлены. Например, если у вас есть четыре поля шириной <code>: 25%; </code>, если какой-либо из них имеет левое или правое заполнение или левую или правую границу, они по умолчанию не помещаются в одну строку в рамках ограничений родительского контейнера.</p><p> Свойство </code> box-sizing </code> можно использовать для настройки этого поведения:</p><ul><li> <code> content-box </code> дает вам поведение CSS по умолчанию для изменения размера окна.Если вы установите ширину элемента на 100 пикселей, тогда ширина поля содержимого элемента будет 100 пикселей, а ширина любой границы или отступа будет добавлена к окончательной ширине отрисовки, что сделает элемент шире 100 пикселей.</li><li> <code> border-box </code> указывает браузеру учитывать любую границу и отступы в значениях, которые вы указываете для ширины и высоты элемента. Если вы установите ширину элемента на 100 пикселей, эти 100 пикселей будут включать любую добавленную вами границу или отступ, а поле содержимого будет сокращаться, чтобы поглотить эту дополнительную ширину.Обычно это значительно упрощает размер элементов.<br /> <code> box-sizing: border-box </code> — это стиль по умолчанию, который браузеры используют для элементов <code></p><table> </code>, <code> <select> </code> и <code> <button> </code>, а также для элементов <code> <input> </code> с типом <code> радио </code>, флажок <code> </code>, <code> сброс </code>, кнопка <code> </code>, <code> отправить </code>, <code> цвет </code> или <code> поиск </code>.</li></ul><p> <strong> Примечание: </strong> Часто бывает полезно установить <code> box-sizing </code> на <code> border-box </code> для элементов макета.Это значительно упрощает работу с размерами элементов и, как правило, устраняет ряд подводных камней, на которые вы можете наткнуться при размещении своего контента. С другой стороны, при использовании <code> position: relative </code> или <code> position: absolute </code>, использование <code> box-sizing: content-box </code> позволяет значениям позиционирования быть относительно содержимого и независимо от изменений размеров границ и отступов. , что иногда желательно.</p><pre> <code> размер коробки: рамка-рамка; размер коробки: коробка содержимого; размер коробки: наследовать; размер коробки: начальный; размер коробки: вернуться; размер коробки: не установлен; </code> </pre><p> Свойство </code> размера коробки <code> задается как одно ключевое слово, выбранное из списка значений ниже.</p><h4><span class="ez-toc-section" id="%D0%97%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F"></span> Значения <span class="ez-toc-section-end"></span></h4><dl><dt> <code> content-box </code></dt><dd><p> Это начальное значение и значение по умолчанию, как указано в стандарте CSS. Свойства <code> width </code> и <code> height </code> включают содержимое, но не включают заполнение, границу или поле. Например, <code> .box {width: 350px; border: 10px solid black;} </code> отображает блок шириной 370 пикселей.</p><p> Здесь размеры элемента рассчитываются следующим образом: <em> ширина = ширина содержимого </em> и <em> высота = высота содержимого </em>.(Границы и отступы в расчет не включаются.)</p></dd><dt> <code> бордюр </code></dt><dd><p> Свойства <code> width </code> и <code> height </code> включают содержимое, заполнение и границу, но не включают поля. Обратите внимание, что отступ и граница будут внутри поля. Например, <code> .box {width: 350px; border: 10px solid black;} </code> отображает блок шириной 350 пикселей с областью для содержимого шириной 330 пикселей. Поле содержимого не может быть отрицательным и имеет значение 0, что делает невозможным использование <code> border-box </code> для исчезновения элемента.</p><p> Здесь размеры элемента рассчитываются следующим образом: <em> ширина = граница + отступ + ширина содержимого </em> и <em> высота = граница + отступ + высота содержимого </em>.</p></dd></dl><h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B_%D0%B1%D0%BE%D0%BA%D1%81%D0%B0_%D1%81_%D0%BF%D0%BE%D0%BB%D0%B5%D0%BC_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE_%D0%B8_%D1%80%D0%B0%D0%BC%D0%BA%D0%BE%D0%B9"></span> Размеры бокса с полем содержимого и рамкой <span class="ez-toc-section-end"></span></h4><p> В этом примере показано, как различные значения </code> размера блока <code> изменяют визуализированный размер двух идентичных элементов.</p><h5><span class="ez-toc-section" id="HTML"></span> HTML <span class="ez-toc-section-end"></span></h5><pre> <code> <div> Поле содержимого </div> <br> <div> Рамка </div> </code> </pre><h5><span class="ez-toc-section" id="CSS"></span> CSS <span class="ez-toc-section-end"></span></h5><pre> <code> div { ширина: 160 пикселей; высота: 80 пикселей; отступ: 20 пикселей; граница: сплошной красный 8px; фон: желтый; } .content-box { размер коробки: коробка содержимого; } .border-box { размер коробки: рамка-рамка; } </code> </pre><h5><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82"></span> Результат <span class="ez-toc-section-end"></span></h5><p> Таблицы BCD загружаются только в браузере</p><h2><span class="ez-toc-section" id="CSS_Box_Sizing_Module_Level_3"></span> CSS Box Sizing Module Level 3 <span class="ez-toc-section-end"></span></h2><h3 data-level="1"><span class="ez-toc-section" id="1_%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5"></span> 1. Введение <span class="ez-toc-section-end"></span></h3><p> <em> Этот раздел не является нормативным. </em></p><p> Макет</p><p> CSS имеет несколько различных концепций автоматического изменения размера, которые используются в различных расчетах макета.<br /> В этом разделе даны более точные определения терминологии.<br /> чтобы помочь связать поведение макета этой спецификации с вычислениями, используемыми в других модулях,<br /> и несколько новых ключевых слов для свойств ширины и высоты<br /> чтобы позволить авторам присваивать элементам размеры, полученные в результате этих расчетов размеров.</p><p> Требуются иллюстрации! См. Проблему.</p><h4 data-level="1.1"><span class="ez-toc-section" id="11_%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F"></span> 1.1. Модуль взаимодействия <span class="ez-toc-section-end"></span></h4><p> Этот модуль расширяет функции ширины, высоты, минимальной ширины, минимальной высоты, максимальной ширины, максимальной высоты и ширины столбца, определенные в главе 10 [CSS2] и в [CSS3COL]</p><p>.</p><p> Определение свойства размера блока в этом модуле заменяет определение в [CSS-UI-3].</p><h4 data-level="1.2"><span class="ez-toc-section" id="12_%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B9"></span> 1.2. Определения значений <span class="ez-toc-section-end"></span></h4><p> Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].Типы значений, не определенные в этой спецификации, определены в CSS Values & Units [CSS-VALUES-3].<br /> Комбинация с другими модулями CSS может расширить определения этих типов значений.</p><p> В дополнение к значениям для конкретных свойств, перечисленным в их определениях,<br /> все свойства, определенные в этой спецификации<br /> также принимают ключевые слова CSS в качестве значения свойства.<br /> Для удобства чтения они явно не повторяются.</p><h3 data-level="2"><span class="ez-toc-section" id="2_%D0%A2%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F"></span> 2. Терминология <span class="ez-toc-section-end"></span></h3><p> Некоторые ключевые термины, относящиеся к координатным осям и размерам<br /> определено в CSS Writing Modes 3 §6 Терминология абстрактного блока.</p><dl><dt> <dfn data-dfn-type="dfn" data-export=""> размер </dfn></dt><dd> Одно- или двухмерное измерение:<br /> размер блока и / или встроенный размер;<br /> альтернативно ширину и / или высоту.<br /> Соответствует ли ширина или высота<br /> к встроенному размеру или размеру блока зависит от режима записи.</dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="inner size|inner width|inner height|inner block size|inner inline size"> внутренний размер </dfn></dt><dd> Размер блока содержимого.<br /> Внутренний размер</dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="outer size|outer width|outer height|outer block size|outer inline size"> Внешний размер </dfn></dt><dd> Размер поля поля.Внешний размер</dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="definite|definite size"> определенный размер </dfn></dt><dd> Размер, который можно определить без выполнения макета;<br /> то есть <длина>,<br /> размер текста (без учета переноса строк),<br /> размер исходного содержащего блока,<br /> или <процент> или другая формула<br /> (например, "растягиваемый" размер незамещенных блоков [CSS2])<br /> это разрешено исключительно против определенных размеров.</p><p> Кроме того, размер содержащего блока абсолютно позиционированного элемента всегда определен относительно этого элемента.</p></dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="indefinite|indefinite size"> неопределенный размер </dfn></dt><dd> Размер не определен. Неограниченное доступное пространство по сути бесконечно.</dd><dt> <dfn data-dfn-type="dfn" data-export="" data-local-lt="available" data-lt="available space|available inline space|available block space"> свободное место </dfn></dt><dd> Размер, представляющий пространство, в котором размещается коробка,<br /> как определено<br /> правила контекста форматирования, в котором он участвует.<br /> Пространство, доступное для коробки, обычно<br /> либо измерение содержащего его блока (если это точно)<br /> или бесконечный размер (когда он неопределенный).Доступное пространство альтернативно может быть либо ограничением минимального содержимого, либо<br /> ограничение максимального содержимого,<br /> что заставляет заложенные в него ящики располагаться под этим ограничением.</dd><dt> <dfn data-dfn-type="dfn" data-export=""> эластичная подгонка </dfn></dt><dd> Растяжка соответствует заданному размеру<br /> это размер,<br /> минус вычисленные поля блока (не свернуты, auto обрабатывается как ноль),<br /> граница и отступ в заданном измерении<br /> (так что внешний размер идеально подходит),<br /> и пол на нуле<br /> (чтобы внутренний размер не был отрицательным).</p><p role="note"> Примечание: это формула, используемая для расчета автоматической ширины<br /> незамещенных блоков в нормальном потоке в CSS2.1§10.3.3.</p></dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="fallback|fallback size"> резервный размер </dfn></dt><dd> Некоторые алгоритмы определения размера не работают с бесконечным размером.<br /> В этих случаях вместо этого используется резервный размер.<br /> Если не указано иное,<br /> это размер начального содержащего блока.</dd></dl><h4 data-level="2.1"><span class="ez-toc-section" id="21_%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B_%D0%B0%D0%B2%D1%82%D0%BE_%D0%BA%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B8"></span> 2.1. Размеры авто коробки <span class="ez-toc-section-end"></span></h4><p> В CSS есть четыре типа автоматически определяемых размеров.<br /> (размеры, полученные в результате правил автоматического определения размеров, в зависимости от контекста):</p><dl><dt> <dfn data-dfn-type="dfn" data-export=""> эластичный размер </dfn></p><dt> <dfn data-dfn-type="dfn" data-export=""> растягивающийся встроенный размер </dfn></p><dt> <dfn data-dfn-type="dfn" data-export=""> эластичный блок, размер </dfn></dt></dt></dt><dd> Размер коробки<br /> если его внешний размер заполнял доступное пространство по данной оси;<br /> другими словами, растяжка умещалась в доступном пространстве,<br /> если это точно.Не определено, если доступное пространство не определено.</p><p role="note"> Примечание. Для встроенной оси это называется «доступной шириной» в CSS2.1§10.3.5 и вычисляется по правилам CSS2.1§10.3.3.</p><p role="note"> Примечание. В расчетах, связанных с этим размером, необходимо указать резервное поведение.<br /> когда доступное пространство не определено, если это возможно.</p></dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="max-content | max-content size"> максимальный размер содержимого </dfn></dt><dd> «Идеальный» размер коробки по заданной оси при бесконечном доступном пространстве.Обычно это наименьший размер коробки по этой оси.<br /> в то время как все еще укладывается в его содержимое,<br /> то есть минимизировать незаполненное пространство, избегая при этом переполнения.</p><dl><dt data-md=""> <dfn data-dfn-type="dfn" data-export=""> максимальный размер в строке </dfn></dt><dd data-md=""><p> «Идеальный» размер коробки по линейной оси.<br /> Обычно самый узкий встроенный размер, который он может занять при размещении вокруг его содержимого<br /> если <em> нет </em> возможностей мягкой упаковки внутри коробки были использованы.<br /> (См. §5 Определение внутреннего размера.)</p><p role="note"> Примечание. Это называется «предпочтительной шириной» в CSS2.1§10.3.5 и «максимальной шириной ячейки» в CSS2.1§17.5.2.2.</p></dd><dt data-md=""> <dfn data-dfn-type="dfn" data-export=""> максимальный размер блока содержимого </dfn></dt><dd data-md=""><p> «Идеальный» размер коробки по оси блока.<br /> Обычно размер блока контента после верстки.</p></dd></dl></dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="min-content | min-content size"> минимальный размер содержимого </dfn></dt><dd> Наименьший размер, который может вместить коробка<br /> что не приводит к переполнению<br /> этого можно было избежать, выбрав больший размер.(См. §5 Определение внутреннего размера.)</p><dl><dt data-md=""> <dfn data-dfn-type="dfn" data-export=""> min-content встроенный размер </dfn></dt><dd data-md=""><p> Самый узкий встроенный размер, который может вместить коробка<br /> что не приводит к переполнению встроенных размеров<br /> этого можно было бы избежать, выбрав больший встроенный размер.<br /> Грубо говоря, встроенный размер, который уместился бы вокруг его содержимого<br /> если <em> были использованы все возможности мягкой упаковки </em> в коробке.</p><p role="note"> Примечание. Это называется «предпочтительной минимальной шириной» в CSS2.1§10.3.5 и «минимальная ширина содержимого» в CSS2.1§17.5.2.2.</p></dd><dt data-md=""> <dfn data-dfn-type="dfn" data-export=""> Размер блока минимального содержимого </dfn></dt><dd data-md=""><p> В целом,<br /> и определенно для блочных контейнеров, таблиц и встроенных боксов,<br /> это эквивалентно максимальному размеру блока содержимого.</p></dd></dl></dd><dt> <dfn data-dfn-type="dfn" data-export=""> подходящий размер </dfn></p><dt> <dfn data-dfn-type="dfn" data-export=""> встроенный размер fit-content </dfn></p><dt> <dfn data-dfn-type="dfn" data-export=""> размер блока fit-content </dfn></dt></dt></dt><dd> Если доступное пространство на данной оси определено,<br /> равен <code> (минимальный размер содержимого, размер растягиваемого содержимого, максимальный размер содержимого) </code> (т.е.е. <code> макс (минимальный размер содержимого, минимальный (максимальный размер содержимого, размер растягивания)) </code>).<br /> При изменении размера с ограничением минимального содержимого,<br /> равен размеру минимального содержимого.<br /> В противном случае равняется максимальному размеру содержимого на этой оси.</p><p role="note"> Примечание. В CSS2.1§10.3.5 и CSS Multi-column Layout § 3.4 это называется шириной «подгонки по размеру».</p></dd><dt> <dfn data-dfn-type="dfn" data-export=""> внутренний размер </dfn></dt><dd> Максимальный размер содержимого или минимальный размер содержимого,<br /> то есть размер, возникающий в первую очередь из размера содержимого.(Некоторые варианты использования этого термина могут также относиться к размерам<br /> происходит в основном от одного из этих двух размеров.)</p><p> Заменяемые элементы часто получают свой собственный размер из своих естественных размеров.</p></dd></dl><h4 data-level="2.2"><span class="ez-toc-section" id="22_%D0%92%D0%BA%D0%BB%D0%B0%D0%B4_%D0%B2_%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80"></span> 2.2. Вклад в собственный размер <span class="ez-toc-section-end"></span></h4><dl><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="max-content contribution|max-content inline-size contribution|max-content block-size contribution"> вклад max-content </dfn></dt><dd> Размер, который поле вносит в максимальный размер содержимого содержащего его блока.</dd><dt> <dfn data-dfn-type="dfn" data-export="" data-lt="min-content contribution|min-content inline-size contribution|min-content block-size contribution"> вклад мин-контента </dfn></dt><dd> Размер, который поле вносит в минимальный размер содержимого содержащего его блока.</dd><dt> <dfn data-dfn-type="dfn" data-export=""> вклад собственного размера </dfn></dt><dd> Вклад максимального содержания, вклад минимального содержания,<br /> или рассчитанный аналогичным образом вклад размера на основе содержимого.</dd></dl><p> Вклады внутреннего размера основаны на внешнем размере коробки;<br /> для этой цели автоматические поля считаются нулевыми.</p><h4 data-dfn-type="dfn" data-export="" data-level="2.3" data-lt="intrinsic size constraint"><span class="ez-toc-section" id="23_%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0"></span> 2.3. Внутренние ограничения размера <span class="ez-toc-section-end"></span></h4><dl><dt> <dfn data-dfn-type="dfn" data-export=""> ограничение максимального содержимого </dfn></dt><dd> Ограничение размера, налагаемое содержащим блоком бокса, которое заставляет его производить свой вклад максимального содержания.</dd><dt> <dfn data-dfn-type="dfn" data-export=""> ограничение min-content </dfn></dt><dd> Ограничение размера, налагаемое содержащим блоком бокса, которое заставляет его создавать свой вклад min-content.</dd><dt> <dfn data-dfn-type="dfn" data-export=""> предпочтительное соотношение сторон </dfn></dt><dd> Соотношение ширины и высоты, присущее коробке,<br /> что смещает различные алгоритмы определения размеров<br /> для получения размера, соответствующего этому соотношению сторон<br /> насколько это возможно, соблюдая при этом другие данные о размерах.<br /> Если не указано иное,<br /> Предпочтительное соотношение сторон коробки - это естественное соотношение сторон, если оно имеет<br /> и применяется к его блоку содержимого.У большинства коробок нет предпочтительного соотношения сторон.</dd></dl><h3 data-level="3"><span class="ez-toc-section" id="3_%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%BE%D0%B2_%D0%BA%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B8"></span> 3. Определение размеров коробки <span class="ez-toc-section-end"></span></h3><h4 data-level="3.1"><span class="ez-toc-section" id="31_%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%BD%D1%8B%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0"></span> 3.1. Размерные свойства <span class="ez-toc-section-end"></span></h4><p> В этом разделе определяются свойства размера <dfn data-dfn-type="dfn" data-export="" data-lt="sizing property"> </dfn> width, height, min-width, min-height, max-width и max-height.<br /> Их потенциальные значения определены в следующем разделе, §3.2 Значения размеров: <длина-процент>, авто | none, min-content, max-content и fit-content () значения.</p><p role="note"> Примечание. Дополнительные псевдонимы, относящиеся к потоку, для этих свойств определены в [CSS-LOGICAL-1].</p><p> Мы хотели бы определить сокращения для каждой пары свойств размеров.<br /> (например, ширина и высота)<br /> но существует конфликт имен с дескриптором размера @page [CSS-PAGE-3],<br /> так что это было отложено до уровня 4.<br /> Предложения по решению этой проблемы приветствуются,<br /> см. обсуждение.</p><h5 data-dfn-type="dfn" data-export="" data-level="3.1.1" data-lt="preferred size property"><span class="ez-toc-section" id="311_%D0%9F%D1%80%D0%B5%D0%B4%D0%BF%D0%BE%D1%87%D1%82%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B_%D0%B8_%D0%B2%D1%8B%D1%81%D0%BE%D1%82%D1%8B"></span> 3.1.1. Предпочтительные свойства размера: свойства ширины и высоты <span class="ez-toc-section-end"></span></h5><p> Свойства ширины и высоты (физические) указывают<br /> <dfn data-dfn-type="dfn" data-export="" data-lt="preferred size"> предпочтительнее </dfn> <dfn data-dfn-type="dfn" data-export="" data-lt="width | preferred width"> шириной </dfn> и <dfn data-dfn-type="dfn" data-export="" data-lt="height | preferred height"> высотой </dfn> коробки соответственно.</p><h5 data-dfn-type="dfn" data-export="" data-level="3.1.2" data-lt="min size property"><span class="ez-toc-section" id="312_%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D0%BC%D0%B8%D0%BD%D0%B8%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_min-width_%D0%B8_min-height"></span> 3.1.2. Свойства минимального размера: свойства min-width и min-height <span class="ez-toc-section-end"></span></h5><p> Свойства min-width и min-height указывают<br /> минимальная ширина <dfn data-dfn-type="dfn" data-export="" data-lt="min width | minimum width | min size | minimum size"> </dfn> (или «минимальная ширина»)<br /> и <dfn data-dfn-type="dfn" data-export="" data-lt="min height | minimum height"> минимальная высота </dfn> (или «минимальная высота»)<br /> коробки соответственно.</p><p role="note"> Примечание. Начальное значение auto новое;<br /> в [CSS2] начальное значение было нулевым.</p><h5 data-dfn-type="dfn" data-export="" data-level="3.1.3" data-lt="max size property"><span class="ez-toc-section" id="313_%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D0%BC%D0%B0%D0%BA%D1%81%D0%B8%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_max-width_%D0%B8_max-height"></span> 3.1.3. Свойства максимального размера: свойства max-width и max-height <span class="ez-toc-section-end"></span></h5><p> Свойства max-width и max-height указывают<br /> максимальная ширина <dfn data-dfn-type="dfn" data-export="" data-lt="max width | maximum width | max size | maximum size"> </dfn> (или «максимальная ширина»)<br /> и <dfn data-dfn-type="dfn" data-export="" data-lt="max height | maximum height"> максимальная высота </dfn> (или «максимальная высота»)<br /> коробки соответственно.</p><h4 data-level="3.2"><span class="ez-toc-section" id="32_%D0%97%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%BE%D0%B2"></span> 3.2. Значения размеров: <span class="ez-toc-section-end"></span></h4><p><длина-процент>, авто | значения none, min-content, max-content и fit-content ()</h4><dl><dt> <dfn data-dfn-for="width, min-width, max-width, height, min-height, max-height" data-dfn-type="value" data-export=""> <длина-процент> </dfn></dt><dd> Задает размер поля с помощью <length> и / или <percentage>.<br /> Свойство box-sizing указывает, измеряется ли блок содержимого или граница.</p><p> Процентное соотношение разрешается по ширине / высоте, в зависимости от ситуации,<br /> блока, содержащего коробку.Если на определенной оси<br /> размер содержащего блока зависит от размера коробки,<br /> см. соответствующий модуль макета<br /> для специальных правил о том, как разрешить проценты.</p><p> Отрицательные значения недопустимы.</p></dd><dt> <dfn data-dfn-for="width, height, min-width, min-height" data-dfn-type="value" data-export=""> авто </dfn></dt><dd> Для ширины / высоты задает <dfn data-dfn-for="" data-dfn-type="dfn" data-export=""> автоматический размер </dfn> (<dfn data-dfn-for="" data-dfn-type="dfn" data-export=""> автоматический размер блока </dfn>/<dfn data-dfn-for="" data-dfn-type="dfn" data-export=""> автоматический встроенный размер </dfn>).<br /> См. Соответствующий модуль макета, чтобы узнать, как это рассчитать.</p><p> Для минимальной ширины / минимальной высоты,<br /> задает автоматический минимальный размер <dfn data-dfn-for="" data-dfn-type="dfn" data-export=""> </dfn>.Если иное не определено соответствующим модулем компоновки,<br /> тем не мение,<br /> он разрешается к используемому значению 0.<br /> Для обратной совместимости<br /> разрешенное значение этого ключевого слова равно нулю<br /> для ящиков всех типов отображения [CSS2]:<br /> блочные и встроенные боксы,<br /> встроенные блоки,<br /> и все поля макета стола.<br /> Он также разрешается к нулю<br /> когда поле не создается.</p></dd><dt> <dfn data-dfn-for="max-width, max-height" data-dfn-type="value" data-export=""> нет </dfn></dt><dd> Нет ограничений по размеру коробки.</dd><dt> <dfn data-dfn-for="width, min-width, max-width, height, min-height, max-height" data-dfn-type="value" data-export=""> мин-содержание </dfn></dt><dd> Используйте размер минимального содержимого на соответствующей оси;<br /> для размера блока коробки,<br /> если не указано иное,<br /> это эквивалентно его автоматическому размеру.</dd><dt> <dfn data-dfn-for="width, min-width, max-width, height, min-height, max-height" data-dfn-type="value" data-export=""> макс. Содержание </dfn></dt><dd> Используйте максимальный размер содержимого на соответствующей оси;<br /> для размера блока коробки,<br /> если не указано иное,<br /> это эквивалентно его автоматическому размеру.</dd><dt> <dfn data-dfn-for="width, min-width, max-width, height, min-height, max-height" data-dfn-type="value" data-export=""> fit-content (<length-percentage>) </dfn></dt><dd> Используйте формулу соответствия-содержания<br /> с заменой доступного пространства указанным аргументом,<br /> то есть <code> мин (макс-содержание, макс (мин-содержание, <длина-процент>)) </code>,<br /> где аргумент <length-percentage> разрешен<br /> точно так же, как для отдельных значений <length-percentage>.</p><p> Отрицательные значения <длина-процент> недопустимы.</p></dd></dl><p> Во всех случаях,<br /> используемое значение выравнивается, чтобы сохранить неотрицательный внутренний размер.</p><p role="note"> Примечание. Значения min-content, max-content и fit-content ()<br /> являются новыми на уровне 3.</p><p role="note"> Примечание. Свойство flex-basic тем самым также получает эти новые ключевые слова,<br /> поскольку его значения определены ссылкой на <width>.</p><p role="note"> Примечание. В этом разделе ранее были определены stretch и fit-content как ключевые слова, представляющие размер stretch-fit и размер fit-content,<br /> соответственно.Эти ключевые слова были перенесены на уровень 4.<br /> (вместе с дополнительным ключевым словом, которое<br /> ведет себя аналогично растягиванию, но сохраняет предпочтительное соотношение сторон, если таковое имеется)<br /> чтобы лучше проработать последствия в ситуациях с неограниченным доступным пространством.</p><h5 data-level="3.2.1"><span class="ez-toc-section" id="321_%C2%AB%D0%92%D0%B5%D1%81%D1%82%D0%B8_%D1%81%D0%B5%D0%B1%D1%8F_%D0%BA%D0%B0%D0%BA_%D0%B0%D0%B2%D1%82%D0%BE%C2%BB"></span> 3.2.1. «Вести себя как авто» <span class="ez-toc-section-end"></span></h5><p> Чтобы иметь общий термин для обоих случаев, когда ширина / высота вычисляется как auto, и когда определено, чтобы вести себя так, как если бы было указано auto<br /> (как в случае разрешения процентной высоты блока на неопределенный размер,<br /> см. CSS2§10.5),<br /> в обоих случаях свойство <dfn data-dfn-type="dfn" data-export="" data-lt="behave as auto|behaves as auto|behaving as auto"> ведет себя как auto </dfn>.</p><p role="note"> Примечание. Устаревшая спецификация, определяющая поведение макета, особенно в [CSS2],<br /> может явно ссылаться на ширину / высоту с вычисленным значением auto как на условие;<br /> некоторые из этих случаев следует интерпретировать как значение ведет себя как авто,<br /> и переданы в рабочую группу CSS для обновления.</p><p> Заменить этот раздел ссылками на новый термин автоматический размер.</p><h5 data-level="3.2.2"><span class="ez-toc-section" id="322_%D0%A1%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%89%D0%B8%D0%B5_%D0%B8%D0%BB%D0%B8_%D0%B8%D1%81%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D1%8E%D1%89%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0_%D1%81_%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%B7%D0%B0%D0%BF%D1%8F%D1%82%D0%BE%D0%B9"></span> 3.2.2. Содержащие или исключающие числа с плавающей запятой <span class="ez-toc-section-end"></span></h5><p> <em> Этот раздел не является нормативным.</em></p><p> Хотя границы блока блоков обычно проницаемы для поплавков,<br /> иногда автору нужно, чтобы они содержали свои собственные (потомки) поплавки<br /> или исключить поплавки извне.<br /> Для блочного макета<br /> указание display: flow-root сделает поле корнем контекста форматирования,<br /> который имеет такое поведение.</p><p role="note"> Примечание. Блоки, участвующие в макете Flex, Grid или Table, будут автоматически иметь такое поведение.</p><h4 data-level="3.3"><span class="ez-toc-section" id="33_%D0%9A%D1%80%D0%B0%D1%8F_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"></span> 3.3. Края блока для определения размера: свойство размера блока <span class="ez-toc-section-end"></span></h4><p> Свойство box-sizing определяет,<br /> фиксированные размеры (например, <length> s и <percentage> s)<br /> назначаются блоку содержимого или рамке.Это влияет на интерпретацию всех калибровочных свойств,<br /> в том числе флекс-основа.</p><p> Значения имеют следующие значения:</p><dl><dt> <dfn data-dfn-for="box-sizing" data-dfn-type="value" data-export=""> поле содержимого </dfn></dt><dd> Размеры, указанные в свойствах размеров как <length-percentage>, представляют внутренние размеры коробки,<br /> исключая поля / границы / отступы:<br /> они применяются к блоку содержимого.<br /> Заполнение и граница поля<br /> выкладываются и рисуются <em> за пределами </em> указанной ширины и высоты.</p><p role="note"> Примечание. Это поведение ширины и высоты, как указано в CSS2.1,<br /> и поэтому используется по умолчанию.</p></dd><dt> <dfn data-dfn-for="box-sizing" data-dfn-type="value" data-export=""> бордюр </dfn></dt><dd> Размеры, указанные в параметрах размеров как <length-percentage>, представляют визуально видимые размеры коробки,<br /> включая границы / отступы (но не поля):<br /> они применяются к рамке.<br /> Заполнение и граница поля<br /> выкладываются и рисуются <em> внутри </em> указанной ширины и высоты,<br /> с размером поля содержимого, чтобы заполнить оставшееся пространство,<br /> настил на нуле.</p><p> Рассчитываются ширина и высота содержимого.<br /> путем вычитания ширины границы и заполнения соответствующих сторон<br /> от указанного <length-percentage>.<br /> Поскольку ширина и высота содержимого не могут быть отрицательными,<br /> это вычисление равно нулю.</p><p> Используемые значения, как показано, например, через <code> getComputedStyle () </code>,<br /> также обратитесь к рамке.</p></dd></dl><p> Значения, на которые влияет размер коробки, включают<br /> оба необработанных значения <length-percentage><br /> и те, которые используются в функциональных обозначениях, таких как fit-content ().Наоборот,<br /> неколичественные значения, такие как auto и min-content, не зависят от свойства box-sizing<br /> (если не указано иное).</p><p> Например, следующие свойства установлены<br /> размер поля содержимого - 100 пикселей,<br /> с размером рамки, равным 120 пикселей:</p><pre> .box {box-sizing: content-box; / * по умолчанию * / width: 100px; padding-left: 10px; border-left: 10px solid;} </pre><p> С другой стороны, изменив поле на границу,<br /> рамка установлена на 100 пикселей,<br /> с размером поля содержимого, равным 80 пикселей:</p><pre>.box {box-sizing: border-box; width: 100px; padding-left: 10px; border-left: 10px solid;} </pre><p> Внутренний размер не может быть меньше нуля,<br /> поэтому, если отступ + граница больше указанного размера рамки,<br /> коробка окажется больше, чем указано.<br /> В этом случае размер поля содержимого будет равняться 0 пикселей, поэтому размер рамки будет равен 120 пикселей,<br /> даже если ширина: 100 пикселей указана для рамки:</p><pre> .box {box-sizing: border-box; width: 100px; padding-left: 60px; border-left: 60px solid; / * padding + border = 120px * /} </pre><p> В этом примере используется размер блока для равномерного разделения по горизонтали.<br /> два блока div с границами фиксированного размера внутри контейнера div,<br /> что в противном случае потребовало бы дополнительной разметки.</p><p> образец CSS:</p><pre> <code> div.container {width: 38em; border: 1em сплошной черный;} div.split {box-sizing: border-box; width: 50%; border: 1em silver rridge; float: left;} </code> </pre><p> образец фрагмента HTML:</p><pre> <code> <divclass = "container"> <divclass = "split"> Этот div занимает левую половину. </div> <divclass = "split"> Этот div занимает правую половину. </div> </div> </code> </pre><p> демонстрация образцов CSS и HTML:</p><p> Этот div должен занимать левую половину.</p><p> Этот div должен занимать правую половину.</p><p> Два приведенных выше блока div должны отображаться рядом, каждый (включая границы) на 50% ширины содержимого их контейнера. Если вместо этого они накладываются друг на друга, ваш браузер не поддерживает размер блока.</p><p role="note"> Примечание. Некоторые элементы HTML,<br /> например, кнопка <code> </code>,<br /> по умолчанию - поведение рамки.<br /> См. Подробности о том, какие элементы имеют такое поведение в HTML.</p><p> В устаревших спецификациях CSS<br /> термины ширина, высота, минимальная (минимальная) ширина, минимальная (минимальная) высота, максимальная (максимальная) ширина и максимальная (максимальная) высота обычно относятся к внутреннему размеру<br /> (размер поля содержимого)<br /> коробки, если не указано иное.</p><p> См. Пользовательский интерфейс CSS 3 §3.1 Изменение блочной модели: свойство box-sizing для явного устранения неоднозначности этих терминов.<br /> для раздела деталей модели визуального форматирования [CSS2].</p><p> Чтобы избежать двусмысленности,<br /> авторам спецификаций следует избегать двусмысленного использования таких терминов, как ширина или высота, без дополнительных уточнений,<br /> и должен явно ссылаться на<br /> внутренний размер,<br /> внешний размер,<br /> размер рамки,<br /> вычисленное значение свойств размера,<br /> так далее,<br /> в зависимости от конкретного случая.</p><h4 data-level="3.4"><span class="ez-toc-section" id="34_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B5_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%81%D1%82%D0%BE%D0%BB%D0%B1%D1%86%D0%B0_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_min-content_max-content_%D0%B8_fit-content"></span> 3.4. Новые значения размера столбца: значения min-content, max-content и fit-content () <span class="ez-toc-section-end"></span></h4><p> При использовании в качестве значений ширины столбца,<br /> новые ключевые слова определяют оптимальную ширину столбца:</p><dl><dt> <dfn data-dfn-for="column-width" data-dfn-type="value" data-export=""> мин-содержание </dfn></dt><dd> Задает оптимальную ширину столбца в качестве встроенного размера min-content для содержимого контейнера с несколькими столбцами.</dd><dt> <dfn data-dfn-for="column-width" data-dfn-type="value" data-export=""> макс. Содержание </dfn></dt><dd> Задает оптимальную ширину столбца в качестве максимального встроенного размера содержимого контейнера с несколькими столбцами.</dd><dt> <dfn data-dfn-for="column-width" data-dfn-type="value" data-export=""> fit-content (<length-percentage>) </dfn></dt><dd> Задает оптимальную ширину столбца как <code> мин (макс. Размер содержимого, макс. (Размер мин. Содержимого, <длина-процент>)) </code></dd></dl><p role="note"> Примечание. Ширина столбца не зависит от столбца.<br /> Когда ширина столбца определяется содержимым контейнера с несколькими столбцами<br /> (как в ключевых словах выше),<br /> все его содержимое принимается во внимание<br /> и рассчитанная ширина разделяется всеми столбцами.</p><h3 data-level="4"><span class="ez-toc-section" id="4%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B5%D0%B3%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0"></span> 4.Определение внешнего размера <span class="ez-toc-section-end"></span></h3><p> <dfn data-dfn-type="dfn" data-export=""> Внешний размер </dfn> определяет размеры в зависимости от контекста элемента,<br /> безотносительно к его содержанию.</p><h4 data-level="4.1"><span class="ez-toc-section" id="41_%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D0%B9_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80"></span> 4.1. Процентный размер <span class="ez-toc-section-end"></span></h4><p> Проценты определяют размер блока по отношению к содержащему его блоку.</p><p> Например, в следующей разметке:</p><pre> <articlestyle = "height: 60em"> <figurestyle = "height: 50%;"> <imgstyle = "height: 50%;"> </figure> </article> </pre><ul><li data-md=""><p> <code></p><figure> </code> будет 30em высотой<br /> = 50% определенной высоты 60em <code></p><article> </code></p></li><li data-md=""><p> <code> <img> </code> будет 15em высотой<br /> = 50% от высоты <code></p><figure> </code> '<br /> (что само по себе определенно, потому что это процентное отношение к определенной длине)</p></li></ul><p> См. §5.2.1 Внутренние вклады ячеек с процентным размером для получения подробной информации о том, как вычислить процентные значения.<br /> когда размер содержащего блока зависит<br /> от размера его содержания.</p><h3 data-level="5"><span class="ez-toc-section" id="5_%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B5%D0%B3%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0"></span> 5. Определение внутреннего размера <span class="ez-toc-section-end"></span></h3><p> <dfn data-dfn-type="dfn" data-export=""> Внутренний размер </dfn> определяет размеры на основе содержимого элемента,<br /> без оглядки на его контекст.</p><h4 data-level="5.1"><span class="ez-toc-section" id="51_%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B"></span> 5.1. Внутренние размеры <span class="ez-toc-section-end"></span></h4><p> Минимальный размер блока по каждой оси<br /> это размер, который он имел бы, если бы был<br /> поплавок с автоматическим размером по этой оси<br /> (и нет минимального или максимального размера на этой оси)<br /> и если его содержащий блок был <em> нулевым размером </em> по этой оси.(Другими словами, минимальный размер, который он имеет при выборе размера «с усадкой».)</p><p> Максимальный размер содержимого бокса по каждой оси<br /> это размер, который он имел бы, если бы был<br /> поплавок с автоматическим размером по этой оси<br /> (и нет минимального или максимального размера на этой оси),<br /> и если его содержащий блок был <em> бесконечно размером </em> по этой оси.<br /> (Другими словами, максимальный размер, который он имеет при выборе размера «с усадкой».)</p><p> Минимальный размер и максимальный размер контента вместе называются<br /> как внутренние размеры.</p><p role="note"> Примечание. Если у окна предпочтительное соотношение сторон,<br /> ограничения размера в противоположном измерении будут передаваться через<br /> и может повлиять на размер авто в рассматриваемом.<br /> См. CSS2§10.</p><p> Эта спецификация не определяет, как определять размеры поплавков.<br /> См. [CSS2].<br /> Однако внутренние размеры заменяемых элементов без естественных размеров определены ниже:</p><dl><dt> Если у него предпочтительное соотношение сторон:</dt><dd> Для минимального размера содержимого используйте ноль.</p><p> Для максимального размера содержимого:</p><ul><li data-md=""><p> Если доступное пространство определено на линейной оси,<br /> используйте растяжку этого размера для встроенного размера<br /> и рассчитайте размер блока, используя соотношение сторон.</p></li><li data-md=""><p> В противном случае<br /> если поле имеет <length> в качестве вычисленного значения для min-width или min-height,<br /> используйте этот размер и вычислите другой размер, используя соотношение сторон;<br /> если оба размера имеют минимум <length>,<br /> выберите тот, который дает больший общий размер.</p><p role="note"> Примечание. Этот случай был ранее рассчитан из размера по умолчанию 300 x 150,<br /> а не минимальный размер коробки.<br /> Считается, что это лучшее поведение,<br /> и, вероятно, будет веб-совместимым,<br /> но, пожалуйста, отправьте отзыв в CSSWG, если возникнут какие-либо проблемы.</p></li><li data-md=""><p> В противном случае<br /> использовать встроенное соответствие размера<br /> соответствующее измерение исходного содержащего блока и вычислить другое измерение, используя соотношение сторон.</p></li></ul></dd><dt> Если у него нет предпочтительного соотношения сторон:</dt><dd> Для минимального и максимального размера содержимого:</p><ul><li data-md=""><p> Если поле имеет <length> в качестве вычисленного минимального размера (min-width / min-height) в этом измерении,<br /> используйте этот размер.</p><p role="note"> Примечание: это управляемое автором поведение стало возможным<br /> новым значением auto для свойств минимального размера.<br /> Считается, что это лучшее поведение,<br /> но пока не ясно, совместим ли он с Интернетом,<br /> поэтому, пожалуйста, отправьте отзыв в CSSWG, если возникнут какие-либо проблемы.</p></li><li data-md=""><p> В противном случае,<br /> используйте 300 пикселей для ширины<br /> и / или 150 пикселей для высоты<br /> по мере необходимости.</p></li></ul></dd></dl><p> Поскольку заменяемый элемент на уровне блока или на уровне строки<br /> высота или ширина которого ведет себя как auto, эффективно определяется для использования максимального размера содержимого (CSS2§10.3.2),<br /> эта спецификация применяет правила выше<br /> к неопределенному случаю замененного элемента<br /> чья высота и ширина ведут себя как авто.</p><p role="note"> Примечание. Эта спецификация не определяет, как определять<br /> размером с поплавок.<br /> См. [CSS2],<br /> соответствующая спецификация CSS для этого типа отображения,<br /> и / или существующие реализации<br /> для получения дополнительной информации.<br /> В будущих спецификациях это будет подробно определено,<br /> заменяя «определение» CSS2,<br /> такой как есть.</p><hr/><p> Хотя автоматический размер элементов управления вводом текста<br /> такие как элементы HTML <code> <input type = text> </code> и <code><textarea> </code><br /> обычно фиксированный размер,<br /> содержимое таких элементов может использоваться для определения внутреннего размера на основе содержимого,<br /> Что касается незаменимых блок-контейнеров.Ключевые слова min-content и max-content в свойствах размеров, таким образом, представляют размеры на основе содержимого.<br /> для элементов управления формы, которые отображают свое значение<br /> как текст, содержащийся в их поле,<br /> позволяя таким элементам управления изменяться по размеру, чтобы соответствовать их видимому содержимому<br /> аналогично обычным незаменяемым элементам. </p> <p> Контент в этом случае определяется как значения элемента управления вводом<br /> (исходное значение в случае <code> textarea </code>,<br /> или значение в случае <code> ввод </code>),<br /> возможно преобразование в более удобочитаемый и / или локализованный формат отображения,<br /> который затем обрабатывается как дочерний текст элемента управления вводом,<br /> разрешая возможности мягкого переноса только там, где элемент управления вводом действительно позволяет переносить<br /> (независимо от того, отключены ли свойства CSS или другие внутренние ограничения UA).Если элемент управления вводом имеет обозначенный текст-заполнитель<br /> для наложения в области отображения значений,<br /> затем этот текст также измеряется с целью вычисления размера на основе содержимого - <wbr> независимо от того, виден ли текст заполнителя в данный момент.<br /> (Таким образом, основанный на содержании внутренний размер элемента управления вводом<br /> - это больший размер, соответствующий тексту-заполнителю, и размер, соответствующий значению.) </wbr> </p> <p> UA может потребовать минимум<br /> (например, размер, необходимый для размещения одного символа нулевой ширины,<br /> или наименьший используемый размер сенсорной мишени)<br /> в размерах min-content и max-content элемента управления формы, чтобы обеспечить достаточно места для курсора<br /> и иным образом поддерживать удобство использования элемента управления формы.</p> <p role="note"> Примечание: это может быть расширено до <code> iframe </code> или других замененных элементов, содержащих контент.<br /> (см. обсуждение),<br /> но текстовый ввод является основным вариантом использования;<br /> и являясь внутренним документом,<br /> имеют наименьшие дополнительные осложнения. </p> <h4 data-level="5.2"><span class="ez-toc-section" id="52_%D0%A1%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B7%D0%BD%D0%BE%D1%81%D1%8B"></span> 5.2. Собственные взносы <span class="ez-toc-section-end"></span></h4> <p> Вклад минимального содержания / вклад максимального содержания блока на каждой оси<br /> размер поля содержимого<br /> гипотетического поплавка с автоматическим размером<br /> который содержит только эту коробку,<br /> если содержащий блок этого гипотетического числа с плавающей запятой имеет нулевой / бесконечный размер.</p> <p role="note"> Примечание. В данной спецификации не указывается точно, как определять эти размеры.<br /> См. [CSS2],<br /> соответствующая спецификация CSS для этого типа отображения,<br /> правила обработки процентов (ниже),<br /> и / или существующие реализации<br /> для получения дополнительной информации. </p> <h5 data-level="5.2.1"><span class="ez-toc-section" id="521_%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B9_%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4_%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D1%85_%D0%BA%D0%BE%D1%80%D0%BE%D0%B1%D0%BE%D0%BA"></span> 5.2.1. Внутренний вклад процентных коробок <span class="ez-toc-section-end"></span></h5> <p> Иногда размер содержащего блока блока процентного размера зависит от внутреннего размера самого блока,<br /> создание циклической зависимости.При расчете вклада внутреннего размера такой коробки<br /> (включая любые вычисления для автоматического минимального размера на основе содержимого),<br /> процентное значение, соответствующее размеру<br /> на той же оси, что и вклад внутреннего размера (циклический процентный размер <dfn data-dfn-type="dfn" data-export="" data-local-lt="cyclic percentage"> </dfn>)<br /> разрешено специально: </p> <ol type="a"> <li> Если коробка не заменена,<br /> затем все значение любого свойства максимального размера или свойства предпочтительного размера (ширина / максимальная ширина / высота / максимальная высота)<br /> задано как выражение, содержащее процент<br /> (например, 10% или calc (10px + 0%))<br /> то есть циклический, обрабатывается <em> с целью вычисления вкладов внутреннего размера блока только </em> в качестве начального значения этого свойства.Например, учитывая поле шириной: calc (20px + 50%),<br /> его вклад в максимальное содержание рассчитывается так, как если бы его ширина была автоматической.<br /> (Тем не менее, процент сохраняется как обычно,<br /> во время собственно калибровки самого ящика; см. ниже.) </li> <li> Аналогично, если коробка заменена,<br /> затем все значение любого свойства максимального размера или свойства предпочтительного размера, заданного как выражение, содержащее процент<br /> то есть циклический, обрабатывается <em> с целью вычисления вкладов максимального содержимого блока только </em> в качестве начального значения этого свойства.</li> <li> Если коробку заменить,<br /> циклический процент в значении любого свойства максимального размера или свойства предпочтительного размера (ширина / максимальная ширина / высота / максимальная высота),<br /> решено против нуля<br /> при вычислении вклада min-content на соответствующей оси.<br /> (См. §5.2.2 Сжимаемые заменяемые элементы для получения списка, к каким элементам в HTML это относится.)<br /> UA может дополнительно указать этот размер в зависимости от пользовательского интерфейса.<br /> например, обеспечение видимости определенных элементов пользовательского интерфейса.<br /> (например, стрелка раскрывающегося списка на <code> выберите </code>).Это правило также применяется при расчете<br /> автоматический минимальный размер на основе содержимого или соответствующий вклад в размер,<br /> что дает определенное «предложение указанного размера».</p> </li> <li> Для свойств минимального размера,<br /> а также для полей и отступов (и желобов),<br /> Циклический процент разрешается против нуля<br /> для определения вкладов собственного размера. </li> </ol> <p> Затем, если не указано иное,<br /> при вычислении используемых размеров и позиций содержимого содержащего блока <em> </em>: </p> <ul> <li data-md=""> <p> Если циклическая зависимость была введена из-за<br /> размер блока или максимальный размер блока в содержащем блоке<br /> что заставляет его зависеть от размера его содержимого,<br /> процентное соотношение окна не разрешается и вместо этого ведет себя как автоматически.</p> <p role="note"> Примечание. Элементы сетки и элементы гибкости в этом случае позволяют вычислять проценты. </p> </li> <li data-md=""> <p> В противном случае процент сравнивается с размером содержащего блока.<br /> (Размер содержащего блока не определяется повторно в зависимости от результирующего размера блока;<br /> содержимое может, таким образом, переполнить или опустошить содержащий блок). </p> </li> </ul> <p role="note"> Примечание. Эти правила определяют ранее неопределенное поведение этого циклического случая.<br /> в CSS2§10.2, CSS2§8.3,<br /> и CSS2§8.4.<br /> Также обратите внимание, что поведение в CSS2§10.5 заменено в соответствующих спецификациях для режимов макета.<br /> (например, гибкий макет)<br /> не описан в CSS2. </p> <p> Например, в следующей разметке:</p><pre> <articlestyle = "width: min-content"> <asidestyle = "width: 50%;"> LOOOOOOOOOOOOOOOOOOOONG </aside> </article> </pre><p> При расчете ширины внешней <code> </p> <article> </code>,<br /> внутренний <code> </p> <aside> </code> ведет себя как width: auto,<br /> поэтому <code> </p> <article> </code> устанавливает себя равным ширине длинного слова.Поскольку ширина <code> </p> <article> </code> не зависела от "реального" макета,<br /> тем не менее, это считается определенным для разрешения <code> </p> <aside> </code>,<br /> ширина которого вдвое меньше ширины <code> </p> <article> </code>. </p> <p> В этом примере</p><pre> <articlestyle = "height: auto"> <asidestyle = "height: 50%;"> <divclass = blockstyle = "height: 150px;"> </div> </aside> <sectionstyle = "height: 30px;" > </section> </article> </pre><p>, потому что процентный размер блока (в данном случае высота) на элементах уровня блока<br /> определено, чтобы не разрешаться внутри содержащихся блоков размером с контент,<br /> процентная высота на <code> </p> <aside> </code> игнорируется,<br /> то есть, он ведет себя точно так же, как если бы был указан auto.</p> <p> Разрешение процентам по-прежнему разрешаться по отношению к определенной высоте, когда минимальная высота является внутренней, - открытый вопрос.<br /> (В CSS2 есть общее утверждение о «высоте в зависимости от содержимого»,<br /> технически это так,<br /> хотя в CSS2 не было ключевых слов для min-height, зависящих от содержимого.<br /> Поскольку это новинка, мы думаем, что у нас могло бы быть другое поведение.) </p> <p> Следующие примеры иллюстрируют, как проценты по оси блоков соотносятся с содержащим блоком, размер которого зависит от его содержимого.</p><pre> <articlestyle = "height: 100px; min-height: min-content;"> <asidestyle = "height: 50%;"> <divstyle = "height: 150px;"> </div> </aside> <sectionstyle = "height: 30px;"> </section> </article> </pre><p> Начальная высота <code> </p> <article> </code> составляет 100 пикселей, как указано,<br /> что сделает <code> </p> <aside> </code> высотой 50 пикселей<br /> когда он разрешил свой процент.<br /> Однако мы должны рассчитать минимальную высоту,<br /> заменив его на высоту.Это приводит к тому, что процент на <code> </p> <aside> </code> ведет себя как автоматический,<br /> так что <code> </p> <aside> </code> имеет высоту 150 пикселей.<br /> Таким образом, общая высота содержимого составляет 180 пикселей.<br /> Это больше, чем указанная высота в 100 пикселей,<br /> поэтому высота <code> </p> <article> </code> будет изменена на 180 пикселей. </p> <p> Затем, поскольку процентное соотношение <em> может разрешиться первоначально </em> относительно высоты (100 пикселей),<br /> теперь разрешается высота 180 пикселей,<br /> так что <code> </p> <aside> </code> в итоге будет иметь высоту 90 пикселей.</p><pre> <articlestyle = "height: auto; min-height: min-content;"> <asidestyle = "height: 50%;"> <divclass = blockstyle = "height: 150px;"> </div> </aside> <sectionstyle = "height: 30px;"> </section> </article> </pre><p> В этом случае процент на <code> </p> <aside> </code> обычно не разрешается,<br /> потому что высота содержащего блока автоматическая (и, следовательно, зависит от размера его содержимого).<br /> Вместо этого он ведет себя как авто,<br /> в результате получаем высоту 150 пикселей для <code> </p> <aside> </code>,<br /> и начальная высота 180 пикселей для <code> </p> <article> </code>. Минимальная высота не меняет этого; высота: мин-содержание; действует аналогично height: auto; и приводит к тем же размерам.</p><pre> <articlestyle = "height: 100px; min-height: min-content;"> <asidestyle = "height: 200%;"> <divstyle = "height: 150px;"> </div> </aside> <sectionstyle = "height: 30px;"> </section> </article> </pre><p> Это вариант первого блока кода,<br /> и следует аналогичным путем;<br /> <code> </p> <aside> </code> изначально хочет вычислить до 200 пикселей в высоту<br /> (200% от 100 пикселей, содержащих высоту блока).<br /> Когда мы вычисляем эффекты минимальной высоты,<br /> процент ведет себя как авто,<br /> заставив его стать высотой 150 пикселей,<br /> и общая высота минимального содержимого содержащего блока<br /> быть 180 пикселей в высоту.Поскольку это больше 100 пикселей,<br /> <code> </p> <article> </code> будет ограничен до 180 пикселей,<br /> процент разрешается против этой новой высоты,<br /> а высота <code> </p> <aside> </code> составляет 360 пикселей,<br /> переполнение <code> <статья> </code> </p> <h5 data-level="5.2.2"><span class="ez-toc-section" id="522_%D0%A1%D0%B6%D0%B8%D0%BC%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B7%D0%B0%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span> 5.2.2. Сжимаемые заменяемые элементы <span class="ez-toc-section-end"></span></h5> <p> В дополнение к перечисленным заменяемым элементам<br /> в HTML§14.4 [HTML],<br /> следующие элементы HTML также считаются заменяемыми элементами в соответствии с приведенным выше правилом заменяемых элементов процентного размера,<br /> и может сжать их вклад min-content<br /> когда их ширина / высота или максимальная ширина / максимальная высота выражаются с помощью циклического процентного размера: </p> <ul> <li data-md=""> <p> <code> ввод </code> с любым типом <code> </code>, не похожим на кнопку;<br /> это может варьироваться в зависимости от UA.</p> <p> Тип является «похожим на кнопку» в конкретном UA, если он отображается аналогично элементу <code> button </code>,<br /> где он может содержать фактическое содержимое, определяющее макет элемента.<br /> В большинстве UA типы «кнопка», «сброс», «отправить» и «цвет» подобны кнопкам;<br /> тип "файл" также частично похож на кнопку в некоторых UA,<br /> когда он отображается как комбинация ввода текста (сжимаемый)<br /> и кнопку (похожую на кнопку и, следовательно, не усаживаемую). </p> </li> <li data-md=""> <p> <code> выберите </code>, <code> textarea </code>, <code> progress </code>, <code> meter </code>.</p> </li> </ul> <h3><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F"></span> Изменения <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D1%81%D0%BB%D0%B5%D0%B4%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F"></span> Последние изменения <span class="ez-toc-section-end"></span></h4> <p> Изменения, внесенные с рабочего проекта от 18 декабря 2020 г., включают: </p> <p> Основные изменения, внесенные после рабочего проекта от 22 мая 2019 г., включают: </p> <ul> <li> Определено, что min-content и max-content не обязательно ведут себя так же, как начальное значение свойства.<br /> если не указано иное (соответствующим модулем верстки).<br /> (Ошибка 3973). </li> <li> Переключен внутренний вклад fit-content (), чтобы обрабатывать его аргумент так, как этот аргумент будет обрабатываться отдельно<br /> для расчета собственного вклада<br /> и соответствующим образом разрешите формулу соответствия содержания,<br /> вместо того, чтобы иметь специальное поведение для разрешения fit-content ()<br /> при расчете собственных взносов.(Ошибка 3731). </li> <li> Изменен максимальный размер заменяемых ящиков.<br /> без внутреннего размера<br /> использовать их минимальный размер вместо ICB или 300 пикселей × 150 пикселей<br /> только когда это <длина>,<br /> см. §5.1 Внутренние размеры.<br /> (Ошибка 4217). </li> <li> Измененный размер объекта по умолчанию с естественным соотношением сторон<br /> чтобы использовать размер ICB вместо 300 × 150 пикселей.<br /> (Ошибка 4218). </li> <li> Определяет предпочтительное соотношение сторон и использует его вместо «внутреннего соотношения сторон», где это необходимо.</li> <li> Прочие мелкие / редакционные исправления. </li> </ul> <p> Основные изменения, внесенные после рабочего проекта от 4 марта 2018 г., включают: </p> <ul> <li> Импортировано определение размера блока из CSS UI уровня 3. </li> <li> Более строго определенная обработка циклических процентов.<br /> (1132, 2384, 2297, 2674) </li> <li> Изменены значения * -content, примененные к оси бокса<br /> чтобы не вычислять начальное значение свойства,<br /> а скорее «вести себя как» первоначальная стоимость свойства.(# 2708) </li> <li> Исправлены разные тривиальные ошибки. </li> </ul> <p> Основные изменения, внесенные после рабочего проекта от 7 февраля 2017 года, включают: </p> <ul> <li> Более точное определение размеров минимального и максимального содержимого для заменяемых элементов. </li> <li> Вычислить новые ключевые слова по начальному значению, а не по потенциально несуществующему авто, когда они применяются к оси блока. </li> <li> Укажите, что процентные размеры замененных элементов обнуляют их вклад в минимальное содержание.</li> <li> Исправить сбивающее с толку / неправильное определение размеров в процентах, разрешенное для зависимого содержащего блока.<br /> (Это может потребовать дополнительной работы.) </li> <li> Ключевые слова с расширенным и подходящим содержанием перенесены на уровень 4<br /> чтобы позволить дальнейшее рассмотрение их поведения в неопределенных содержащих блоках. </li> <li> Вытянуты полные определения для всех свойств размеров (а не различия): ширина, высота, минимальная ширина, минимальная высота, максимальная ширина, максимальная высота и размер блока.</li> </ul> <h4><span class="ez-toc-section" id="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BD%D0%B0%D1%87%D0%B8%D0%BD%D0%B0%D1%8F_%D1%81_%D1%83%D1%80%D0%BE%D0%B2%D0%BD%D1%8F_CSS_2"></span> Дополнения, начиная с уровня CSS 2 <span class="ez-toc-section-end"></span></h4> <p> В дополнение к значительно большему количеству деталей<br /> к различным алгоритмам автоматического и контентного определения размеров,<br /> после [CSS2] были добавлены следующие новые функции: </p> <h3><span class="ez-toc-section" id="%D0%91%D0%BB%D0%B0%D0%B3%D0%BE%D0%B4%D0%B0%D1%80%D0%BD%D0%BE%D1%81%D1%82%D0%B8"></span> Благодарности <span class="ez-toc-section-end"></span></h3> <p> Особая благодарность<br /> Л. Дэвид Барон,<br /> Аарон Густафсон,<br /> Даниэль Холберт,<br /> а также<br /> Коврики Palmgren<br /> за их вклад в этот модуль. </p> <h3><span class="ez-toc-section" id="%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B_%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B4%D0%B5%D0%BD%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%B8_%D0%B1%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8"></span> Вопросы конфиденциальности и безопасности <span class="ez-toc-section-end"></span></h3> <p> Для поддержки автоматического макета,<br /> CSS размеры полей соответствуют их содержимому.В сочетании с различными API [DOM] и [CSSOM]<br /> который может вернуть размер этих ящиков в скрипт,<br /> это может раскрыть информацию об этом содержимом.<br /> Однако эта информация более прямая и доступная.<br /> проверив DOM на предмет содержимого,<br /> а не косвенно через размер коробки.<br /> Контейнеры, содержимое которых невозможно проверить<br /> (например, перекрестное происхождение <code> iframe </code> с)<br /> также не показывать информацию о размерах на внешней странице,<br /> за исключением замененных элементов, таких как изображения<br /> выставить их естественный размер и / или соотношение сторон.</p> <p> Требования к соответствию выражаются комбинацией<br /> описательные утверждения и терминология RFC 2119. Ключевые слова «ДОЛЖНЫ»,<br /> «НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН»,<br /> «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего<br /> документ следует интерпретировать, как описано в RFC 2119.<br /> Однако для удобства чтения эти слова не отображаются в верхнем регистре.<br /> буквы в этой спецификации. </p> <p> Весь текст данной спецификации является нормативным, кроме разделов<br /> явно помечены как ненормативные, примеры и примечания.[RFC2119] </p> <p> Примеры в этой спецификации представлены словами «например»<br /> или выделяются отдельно от нормативного текста с помощью <code> class = "example" </code>,<br /> примерно так: </p> <p> Информационные заметки начинаются со слова «Примечание» и выделяются<br /> нормативный текст с <code> class = "note" </code>, например: </p> <p role="note"> Примечание, это информационное примечание. </p> <p> Рекомендации - это нормативные разделы, призванные привлечь особое внимание.<br /> отделяется от другого нормативного текста с помощью <code> <strong> </code>, например<br /> это: <strong> UA ДОЛЖНЫ предоставлять доступную альтернативу.</strong> </p> <p> Таблица стилей соответствует этой спецификации<br /> если все его утверждения, которые используют синтаксис, определенный в этом модуле, действительны<br /> в соответствии с общей грамматикой CSS и отдельными грамматиками каждого<br /> функция, определенная в этом модуле. </p> <p> Средство визуализации соответствует этой спецификации<br /> если в дополнение к интерпретации таблицы стилей, как определено<br /> соответствующие спецификации, он поддерживает все определенные функции<br /> по этой спецификации, правильно проанализировав их<br /> и соответствующим образом отрисовываем документ.Однако неспособность<br /> UA для корректной визуализации документа из-за ограничений устройства<br /> не делает UA несоответствующим. (Например, UA не<br /> требуется для воспроизведения цвета на монохромном мониторе.) </p> <p> Инструмент разработки соответствует этой спецификации.<br /> если он пишет синтаксически правильные таблицы стилей в соответствии с<br /> общая грамматика CSS и отдельные грамматики каждой функции в<br /> этот модуль и соответствовать всем остальным требованиям соответствия таблиц стилей<br /> как описано в этом модуле.</p> <p> Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью, чтобы<br /> назначать резервные значения, средства рендеринга <strong> CSS должны </strong> обрабатывать как недопустимые (и игнорировать<br /> при необходимости) любые правила, свойства, значения свойств, ключевые слова,<br /> и другие синтаксические конструкции, для которых у них нет пригодного уровня<br /> служба поддержки. В частности, пользовательские агенты <strong> не должны </strong> выборочно<br /> игнорировать неподдерживаемые значения компонентов и соблюдать поддерживаемые значения в одном<br /> объявление многозначного свойства: если какое-либо значение считается недопустимым<br /> (поскольку должны быть неподдерживаемые значения), CSS требует, чтобы все объявление<br /> игнорировать.</p> <p> Когда спецификация достигает стадии кандидата в рекомендации,<br /> возможны неэкспериментальные реализации, и разработчики должны<br /> выпустить реализацию без префикса любой функции уровня CR, которую они<br /> может продемонстрировать правильность реализации в соответствии со спецификацией. </p> <p> Для установления и поддержания взаимодействия CSS через<br /> реализациях, рабочая группа CSS просит, чтобы неэкспериментальные<br /> Средства визуализации CSS отправляют отчет о реализации (и, при необходимости,<br /> тестовые примеры, использованные для этого отчета о реализации) в W3C перед<br /> выпуск реализации каких-либо функций CSS без префиксов.Тестовые наборы<br /> отправленные в W3C могут быть проверены и исправлены CSS.<br /> Рабочая группа. </p> <h2><span class="ez-toc-section" id="%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B9_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80_%D0%B2_CSS_-_Ahmad_Shadeed"></span> Внутренний размер в CSS - Ahmad Shadeed <span class="ez-toc-section-end"></span></h2> <p> В CSS у нас есть два способа изменения размера: внутренний и внешний. Последний является наиболее распространенным, что означает использование фиксированных значений ширины или высоты элемента. Первый означает, что размер элемента зависит от размера его содержимого. </p> <p> В этой статье я исследую каждую из внутренних ценностей и посмотрю, как мы можем извлечь из них пользу.Кроме того, я объясню, как использовать эти внутренние значения в сочетании с сеткой CSS и другими свойствами CSS. </p> <h3><span class="ez-toc-section" id="%D0%92%D0%BD%D0%B5%D1%88%D0%BD%D0%B8%D0%B9_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80"></span> Внешний размер <span class="ez-toc-section-end"></span></h3> <p> Внешний размер просто означает размер элемента (с использованием ширины или высоты) с явными значениями. Рассмотрим следующий пример: </p><pre> <code> .c-button { ширина: 100 пикселей; } </code> </pre><p> Кнопка имеет ширину <code> 100 пикселей </code>, это называется внешним размером, потому что мы его установили. Другой пример - элемент <code> </p> <div> </code>.По умолчанию это блочный элемент, а это означает, что его ширина будет составлять <code> 100% </code> от его родительского элемента. </p> <p> Иногда нам нужно изменить размер элемента в зависимости от его содержимого, и в этом случае использование внешнего размера не помогает. Давайте посмотрим, как определять размер с помощью внутренних ценностей! </p> <h3><span class="ez-toc-section" id="%D0%9C%D0%B8%D0%BD_%D0%A1%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D0%B5"></span> Мин. Содержание <span class="ez-toc-section-end"></span></h3> <p> <code> min-content. </code> - это внутренняя минимальная ширина, которая означает, что она равна ширине самого длинного слова содержимого элемента. </p> <p> По данным Рабочей группы CSS (CSSWG): </p> <blockquote> <p> Встроенный размер, который поместился бы вокруг его содержимого, если бы были использованы все возможности мягкой упаковки внутри коробки.</p> </blockquote> <p> Честно говоря, я не очень хорошо понял определение CSSWG, но я думаю, что это означает, что если мы поместим рамку вокруг элемента, все его содержимое (слова) должно обернуться, и ширина рамки будет самой длинной. слово в этом элементе. Пожалуйста, поправьте меня, если я ошибаюсь. </p> <p> Рассмотрим следующий пример, где у нас есть заголовок. </p><pre> <code> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%BD%D0%BE%D0%B9_%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8"></span> Заголовок отличной статьи <span class="ez-toc-section-end"></span></h3> </code> </pre><pre> <code> h3 { ширина: мин-содержание; } </code> </pre><p> Как вы заметили, ширина элемента, когда <code> min-content </code> используется в качестве значения ширины, равна ширине самого длинного слова, что для этого примера является «потрясающим».</p> <p data-height="358" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="9cc15c2faa25beec77e6e431470c3b5c" data-pen-title="Intrinsic Sizing"> См. Перо<br /> Внутренний размер от Ахмада Шадида (@shadeed)<br /> на CodePen. </p> <h3><span class="ez-toc-section" id="%D0%9C%D0%B0%D0%BA%D1%81%D0%B8%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D0%B5"></span> Максимальное содержание <span class="ez-toc-section-end"></span></h3> <p> Значение <code> max-content </code> представляет внутреннюю предпочтительную ширину, что означает, что она равна ширине содержимого. </p> <p> Рассмотрим тот же пример для заголовка, но с максимальным содержанием <code> на этот раз. </p><pre> <code> h3 { ширина: макс-контент; } </code> </pre><p> Обратите внимание, как ширина элемента стала равной заголовку.Эта ширина является динамической, поэтому при изменении заголовка он изменится соответствующим образом. </p> <h3><span class="ez-toc-section" id="Fit_Content"></span> Fit Content <span class="ez-toc-section-end"></span></h3> <p> Это комбинация использования <code> min-content </code> и <code> max-content </code>. Во время исследования мне понравился этот ответ на Stackoverflow: </p> <blockquote> <p> fit-content использует max-content, если только available <max-content, тогда он использует available. Если не доступен <min-content, он использует min-content. </p> </blockquote> <p> Давайте представим себе это. </p> <p> Обратите внимание, что доступное означает доступное пространство в области просмотра.Давайте рассмотрим пример, чтобы увидеть, как это работает в действии. </p> <p> На основе того же примера ранее я добавил следующий CSS: </p><pre> <code> h3 { ширина: подходящее содержание; } </code> </pre><p> См. Видео ниже с подписями о том, что происходит при изменении размера области просмотра. </p> <p> Чтобы напомнить о <code> fit-content </code>, он проверяет, превышает ли доступное значение <code> max-content </code>, тогда ширина равна <code> max-content </code>. Если доступное пространство меньше <code> max-content </code>, то ширина будет равна доступному пространству.Наконец, если доступное пространство меньше <code> min-content </code>, то ширина будет равна <code> min-content </code>. </p> <p> Теперь, когда я объяснил основы каждой внутренней ценности, давайте перейдем к реальным примерам и вариантам использования. </p> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0"></span> Поддержка браузера <span class="ez-toc-section-end"></span></h3> <p> Согласно Can I Use, поддержка хороша, поскольку все основные браузеры поддерживают внутренние значения, кроме Microsoft Edge. </p> <blockquote> <p> Внутренние значения поддерживаются в Edge (Edgium), который основан на хроме.</p> </blockquote> <h3><span class="ez-toc-section" id="%D0%A1%D0%BB%D1%83%D1%87%D0%B0%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%B8_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B"></span> Случаи использования и примеры <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA_%D0%B8_%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D1%8C"></span> Рисунок и подпись <span class="ez-toc-section-end"></span></h4> <p> Когда у нас есть рисунок с подписью, его ширина будет <code> 100% </code> от его родителя, потому что это блочный элемент. </p><pre> <code> <рисунок> <img class="lazy lazy-hidden" src = "черника-чизкейк-x.png" alt = "" /><noscript><img src = "черника-чизкейк-x.png" alt = "" /></noscript> <figcaption> .. </figcaption> </figure> </code> </pre><p> Желаемое поведение состоит в том, что фигура должна переноситься по ширине изображения, при этом текст будет располагаться под изображением.<code> max-content </code> спешит на помощь! Добавив его к элементу фигуры, он сделает ширину фигуры равной ее содержимому. </p><pre> <code> рисунок { ширина: макс-контент; маржа слева: авто; маржа-право: авто; } </code> </pre><p> Однако все круто, пока ширина изображения не превышает вьюпорт. В этом случае ширина рисунка будет равна ширине изображения, что приведет к горизонтальной прокрутке. </p> <p> Чтобы решить эту проблему, следует использовать <code> fit-content </code>.Причина в том, что он не заставит изображение выходить за пределы ширины окна просмотра, если его ширина очень большая. </p><pre> <code> рисунок { ширина: подходящее содержание; } </code> </pre><p data-height="536" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="51e508f1dab73fb75522df9b2d5ef141" data-pen-title="Figure Caption - 1"> См. Перо<br /> Подпись к рисунку - 2, автор: Ahmad Shadeed (@shadeed)<br /> на CodePen. </p> <h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B8%D1%82%D0%B5%D0%BB%D1%8C_%D1%81_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%BC"></span> Разделитель с заголовком <span class="ez-toc-section-end"></span></h4> <p> В этом примере заголовок «Главные новости» необходимо разделить на две строки. Ширина его должна быть динамической, поэтому, независимо от названия, он должен быть заключен в перенос. Для этого мы можем использовать <code> min-content </code>.</p><pre> <code> span { ширина: мин-содержание; } </code> </pre><p data-height="265" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="0c16d24f6269d0fa6b302cbdfd827ea6" data-pen-title="Separator With Text"> См. Перо<br /> Разделитель с текстом от Ахмада Шадида (@shadeed)<br /> на CodePen. </p> <h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%81_%D0%BF%D0%BE%D0%B4%D1%87%D0%B5%D1%80%D0%BA%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC"></span> Заголовок с подчеркиванием <span class="ez-toc-section-end"></span></h4> <p> Еще один интересный вариант использования внутренних значений - это заголовок с рамкой, имеющей только ту же ширину, что и его содержимое. Рассмотрим следующую цифру: </p> <p> Обратите внимание, что заголовок является элементом уровня блока. Для этого мы можем использовать решение, которое оборачивает контент в элемент <code> <span> </code>, а затем границу можно применить к <code> <span> </code>.</p><pre> <code> <h3> </h3><span> Заголовок отличной статьи </span> </h3> </code> </pre><pre> <code> h3 пролет { нижняя граница: 2px solid # e2deed; } </code> </pre><p> Чтобы сделать это лучше, мы можем использовать <code> fit-content </code>, и он сделает ширину заголовка такой же длинной, как и его содержимое. См. Ниже CSS: </p><pre> <code> h3 { ширина: подходящее содержание; маржа слева: авто; / * Для центрирования * / маржа-право: авто; / * Для центрирования * / нижняя граница: 2px solid # e2deed; } </code> </pre><p data-height="262" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="a204f3ef96f52e9e775c59085a5f43d0" data-pen-title="Title With Underline"> См. Перо<br /> Заголовок с подчеркиванием от Ахмада Шадида (@shadeed)<br /> на CodePen.</p> <h3><span class="ez-toc-section" id="%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D1%8F%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F"></span> Внутренняя навигация <span class="ez-toc-section-end"></span></h3> <p> Вам может потребоваться навигация по страницам, ширина которой зависит от ее содержимого. Используя <code> max-content </code>, мы можем легко этого добиться: </p><pre> <code> .c-nav { ширина: макс-контент; } </code> </pre><p> Демо </p> <h3><span class="ez-toc-section" id="%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_Todo"></span> Внутренний список Todo <span class="ez-toc-section-end"></span></h3> <p> Одна из вещей, которая привлекла мое внимание, когда я пытался исследовать и придумать практические варианты использования внутренних ценностей, - это эта статья. </p> <p> Рассмотрим следующий пример.</p> <p> У нас есть список дел со следующими элементами: заголовок, список и нижний колонтитул. </p> <p> Высота среднего раздела должна быть <code> 100% - верхний колонтитул - нижний колонтитул </code>, независимо от того, сколько задач в нем есть. Для этого мы можем использовать сетку CSS и <code> min-content </code> для оболочки. </p><pre> <code> .c-todo { дисплей: сетка; сетка-шаблон-строки: минимальное содержимое автоматическое минимальное содержимое; высота: 100вх; } </code> </pre><p> Вам может быть интересно, что бы произошло, если бы мы не использовали <code> min-content </code> для строк? Ну вот: </p> <p> Строки расширяются до доступного пространства без учета его содержимого.Однако, когда <code> min-content </code> добавлено к верхнему и нижнему колонтитулам, их высота не будет превышать содержание каждого из них. </p> <h3><span class="ez-toc-section" id="%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B9_%D1%87%D0%B0%D1%82"></span> Внутренний чат <span class="ez-toc-section-end"></span></h3> <p> Представьте, что вы создаете приложение с системой обмена сообщениями. В приведенном ниже примере структура макета очень похожа на список дел. Если чаты недоступны и <code> min-content </code> не используется, можно ожидать, что макет сломается. </p> <p> Демо </p> <h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB_%D0%B3%D0%B5%D1%80%D0%BE%D0%B5%D0%B2"></span> Раздел героев <span class="ez-toc-section-end"></span></h3> <p> Подумайте о том, чтобы заголовок размещался внутри раздела героя.Цель состоит в том, чтобы иметь динамический макет, который заставляет контент героя занимать все доступное пространство. </p><pre> <code> .c-section { дисплей: сетка; сетка-шаблон-строки: минимальное содержание 1fr; } </code> </pre><p> При наличии двух строк первая принимает высоту, основанную на ее минимальном содержимом, а вторая строка может расширяться, чтобы заполнить доступное пространство. </p> <p data-height="399" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="1b0dcc8318079c770b2e0e450a131fde" data-pen-title="Intrinsic - Hero"> См. Перо<br /> Внутренний - Герой Ахмада Шадида (@shadeed)<br /> на CodePen. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%BE%D0%BA%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%B8_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%B0%D1%8F"></span> Боковая панель и основная <span class="ez-toc-section-end"></span></h3> <p> Мне всегда интересно, почему у нас есть боковая панель с фиксированной шириной.Что, если бы его ширина зависела от содержимого? Скажем, например, что он имеет минимальную ширину в зависимости от содержимого и максимальную ширину? Давай попробуем. </p><pre> <code> <div> <aside> </aside> <main> </main> </div> </code> </pre><pre> <code> .wrapper { сетка-шаблон-столбцы: подходящее содержимое (150 пикселей) 1fr; сетка-зазор: 1бэр; } </code> </pre><p> Используя функцию CSS grid <code> fit-content </code>, мы можем гарантировать, что ширина боковой панели не будет превышать <code> 150 пикселей </code>, и она может уменьшиться ниже этого значения в случае короткого содержания.</p> <p> А когда содержимое боковой панели короткое, оно немного сжимается. См. Ниже: </p> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8_%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5"></span> Заголовок и описание <span class="ez-toc-section-end"></span></h3> <p> У нас есть заголовок и текст описания. Ширина текста описания не должна превышать ширину основного заголовка. Для меня это интересный вариант использования, который я не думал, что это возможно сделать только с помощью CSS. </p> <p> Рассмотрим следующий макет. </p> <p> Чтобы реализовать вышеизложенное, нам нужно добавить <code> min-content </code> в качестве ширины для раздела обертывания и <code> max-content </code> в качестве ширины для элемента заголовка.</p><pre> <code> section { ширина: мин-содержание; маржа: 0 авто; выравнивание текста: центр; } h3 { ширина: макс-контент; } </code> </pre><p> Обратите внимание, что приведенное выше требует некоторой настройки на мобильном устройстве, так как это вызовет горизонтальную прокрутку. </p> <p data-height="265" data-theme-id="light" data-default-tab="result" data-user="shadeed" data-slug-hash="76bebd8fd1ec522eaea66e9d41db44ea" data-pen-title="Intrinsic - Test..."> См. Перо<br /> Внутренний - Тест ... Ахмад Шадид (@shadeed)<br /> на CodePen. </p> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D0%B5%D1%86"></span> Конец <span class="ez-toc-section-end"></span></h3> <p> Вот и все. У вас есть комментарий или предложение? Пожалуйста, напишите мне на @ shadeed9. </p> <h3><span class="ez-toc-section" id="%D0%A0%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B"></span> Ресурсы <span class="ez-toc-section-end"></span></h3> <h2><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D0%B5%D0%B9_%D0%B8_%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D1%85_%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86_CSS_%C2%B7_%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_WebPlatform"></span> Понимание пикселей и других единиц CSS · Документы WebPlatform <span class="ez-toc-section-end"></span></h2> <p> <strong> Винсент Харди, Сильвен Галино </strong> </p> <h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%BE%D0%B4%D0%BA%D0%B0"></span> Сводка <span class="ez-toc-section-end"></span></h3> <p> В этом руководстве рассматривается взаимосвязь между пикселями CSS и другими единицами измерения, а также между CSS и пикселями устройства.</p> <h3><span class="ez-toc-section" id="%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5"></span> Введение <span class="ez-toc-section-end"></span></h3> <p> Растущее число единиц длины CSS предоставило веб-авторам новую гибкость (см. Спецификацию значений и единиц CSS). Например, единица «rem» (root «em») позволяет использовать размер шрифта корневого элемента для изменения размера во всем документе. </p> <p> Они помогают разработчикам размещать контент независимо от размера и разрешения дисплея. </p> <h3><span class="ez-toc-section" id="%D0%9D%D0%B5%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%B4%D0%B8%D1%81%D0%BF%D0%BB%D0%B5%D1%8F_%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B0"></span> Независимость дисплея: адаптация макета <span class="ez-toc-section-end"></span></h3> <p> Современный контент должен быть готов для различных сред просмотра: смартфоны, планшеты, большие мониторы или даже телевизионные экраны охватывают огромный диапазон размеров, соотношений сторон, плотности пикселей и расстояний просмотра.Доступен ряд инструментов, которые помогут разработчикам оптимизировать макет для лучшего взаимодействия, например чтобы избежать или свести к минимуму неудобную прокрутку. </p> <h4><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D1%8B_%D0%B8_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B0"></span> Медиа-запросы и настройки области просмотра <span class="ez-toc-section-end"></span></h4> <p> Большинство разработчиков теперь знакомы с использованием медиа-запросов. Они позволяют применять правила CSS в зависимости от таких факторов мультимедиа, как размер или соотношение сторон. Их можно использовать для определения отдельных таблиц стилей для каждой целевой среды или для уточнения и адаптации основной таблицы стилей.</p> <p> Понимание и настройка области просмотра дисплея особенно важно для мобильных клиентов, поскольку это позволяет вашему контенту соответствовать дисплею устройства пользователя. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D0%B5_%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86%D1%8B"></span> Процентные единицы <span class="ez-toc-section-end"></span></h4> <p> Доступно с CSS1, проценты позволяют изменять размер элементов относительно содержащего их блока. Например, мы можем настроить тело документа так: </p><pre> <code> кузов { ширина: 80%; максимальная ширина: 900 пикселей; маржа слева: авто; маржа-право: авто; } </code> </pre><p>… чтобы тело было не более 900 пикселей и в противном случае занимало 80% ширины области просмотра.(Обратите внимание, что пиксели CSS не являются пикселями устройства; это будет подробно обсуждено позже) </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%87%D0%B8%D0%B5_%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D0%B5_%D0%BE%D1%82%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86%D1%8B"></span> Прочие полезные относительные единицы <span class="ez-toc-section-end"></span></h4> <p> Несколько других типов модулей CSS поддерживают адаптацию макета. В следующей таблице перечислены некоторые из них: </p> <table> <col/> <col/> <col/> <thead/> <tbody> <tr> <td align="left"> до </td> <td align="left"> 1 em - это вычисленное значение font-size для элемента, в котором он используется. </td> <td align="left"> Например, размер шрифта </p> <h2><span class="ez-toc-section" id="%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%BC%D0%BE%D0%B6%D0%B5%D1%82_%D0%B1%D1%8B%D1%82%D1%8C_%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD_%D0%BD%D0%B0_3em_%D0%B0_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D1%82%D0%B5%D0%BA%D1%81%D1%82_-_%D0%BD%D0%B0_1em_%D0%B3%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D1%80%D1%83%D1%8F_%D1%87%D1%82%D0%BE_%D0%BF%D1%80%D0%B8_%D0%B2%D1%81%D0%B5%D1%85_%D1%83%D1%81%D0%BB%D0%BE%D0%B2%D0%B8%D1%8F%D1%85_%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D1%82%D0%B5%D0%BA%D1%81%D1%82_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D1%83%D0%B4%D0%B5%D1%82_%D0%B2_3_%D1%80%D0%B0%D0%B7%D0%B0_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B5_%D1%87%D0%B5%D0%BC_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9%D0%A1%D0%BB%D0%B5%D0%B4%D1%83%D0%B5%D1%82_%D0%BE%D1%82%D0%BC%D0%B5%D1%82%D0%B8%D1%82%D1%8C_%D1%87%D1%82%D0%BE_%D0%BF%D1%80%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B8_%D0%B2_%D0%BA%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%B5_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_font-size_%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86%D0%B0_em_%D0%BE%D1%82%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D1%81%D1%8F_%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%83_%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0_%D1%80%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%BE%D0%B3%D0%BE_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%A2%D0%B0%D0%BA%D0%B8%D0%BC_%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%BE%D0%BC_%D0%B2_%D0%BD%D0%B0%D1%88%D0%B5%D0%BC_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82"></span> элементов заголовка может быть установлен на 3em, а основной текст - на 1em, гарантируя, что при всех условиях отображения текст заголовка будет в 3 раза больше, чем основной.Следует отметить, что при использовании в качестве значения свойства font-size единица em относится к размеру шрифта родительского элемента. Таким образом, в нашем примере элемент <span class="ez-toc-section-end"></span></h2> <p><span> внутри </p> <h2><span class="ez-toc-section" id="%D1%81_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%BE%D0%BC_%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0_2_em_%D0%B1%D1%83%D0%B4%D0%B5%D1%82_%D0%B8%D0%BC%D0%B5%D1%82%D1%8C_%D1%82%D0%B5%D0%BA%D1%81%D1%82_%D0%B2_6_%D1%80%D0%B0%D0%B7_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B5_%D1%87%D0%B5%D0%BC_%D0%B2_%D1%82%D0%B5%D0%BB%D0%B5"></span> с размером шрифта: 2 em будет иметь текст в 6 раз больше, чем в теле. <span class="ez-toc-section-end"></span></h2> </td> </tr> <tr> <td align="left"> из </td> <td align="left"> 1 ex - высота текущего шрифта по оси x. Высота по оси x обычно (но не всегда, например, если в шрифте отсутствует «x») равна высоте строчной буквы «x» </td> <td align="left"> На практике редко используется.Может использоваться для изменения размера встроенных изображений в соответствии с высотой x текущего шрифта для визуальной гармонии. </td> </tr> <tr> <td align="left"> шасси </td> <td align="left"> 1 ch - продвижение символа «0» (ноль) в текущем шрифте. ‘Ch’ обозначает характер. </td> <td align="left"> Может использоваться для стилизации моноширинного текста или шрифта Брайля. </td> </tr> <tr> <td align="left"> рем </td> <td align="left"> 1 rem - это вычисленное значение свойства font-size для корневого элемента документа.</p> <p> Эту единицу часто проще использовать, чем единицу em, потому что на нее не влияет наследование, как на единицы em.</p> </td> <td align="left"> Например, при заданном размере шрифта корневого элемента 20 пикселей установка размера шрифта 0,5 em для элементов </p> <li> приведет к разрешению 10 пикселей для <li> первого уровня, но <li> второго уровня будет иметь шрифт 5 пикселей - размер. Установка font-size на 0,5 rem приведет к появлению элементов <li> размером 10 пикселей независимо от их уровня вложенности. </td> </tr> <tr> <td align="left"> VW </td> <td align="left"> 1vw составляет 1% ширины области просмотра. «Vw» означает «ширина области просмотра». </td> <td align="left"> Используется для изменения размера боксов, которые адаптируются к разной ширине области просмотра.</td> </tr> <tr> <td align="left"> vh </td> <td align="left"> 1vh - это 1% высоты области просмотра. «Vh» означает «высота области просмотра». </td> <td align="left"> Используется для изменения размера боксов, которые адаптируются к разной высоте области просмотра. Например, может использоваться для установки максимальной высоты изображения, чтобы оно не превышало размеры области просмотра. </td> </tr> <tr> <td align="left"> vmin </td> <td align="left"> Равно меньшему из "vw" или "vh" </td> <td align="left"> См. Vh / vw </td> </tr> <tr> <td align="left"> vmax </td> <td align="left"> Равно большему из "vw" или "vh" </td> <td align="left"> См. Vh / vw </td> </tr> </tbody> </table> <h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%BD%D0%B0%D1%81%D1%87%D0%B5%D1%82_%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D0%BE%D0%B2_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D1%85%D0%BE%D0%BB%D1%81%D1%82%D0%B0_%D0%B8_%C2%AB%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B3%D0%BE_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8F%D0%BC%D0%B8%C2%BB"></span> Как насчет вариантов использования холста и «полного управления пикселями»? <span class="ez-toc-section-end"></span></h4> <p> До сих пор мы сосредоточились на стилизации элементов документа с помощью CSS.Однако в некоторых случаях требуется полный контроль приложения над каждым нарисованным пикселем, например в видеоигре. </p> <p> Для удовлетворения таких требований можно использовать как контекст Canvas 2D, так и масштабируемую векторную графику, а также WebGL. Также можно использовать абсолютно позиционированный контент для повышения производительности в очень специфических обстоятельствах (например, в играх). </p> <p> Хотя разработчики не должны случайно реализовывать свой собственный макет, есть сценарии использования, в которых это все же лучший вариант, чем переход к разработке собственных приложений.</p> <h3><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%BD%D0%B4%D0%B5%D1%80%D0%B8%D0%BD%D0%B3_%D0%BD%D0%B5%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE_%D0%BE%D1%82_%D1%80%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D1%8F"></span> Рендеринг независимо от разрешения <span class="ez-toc-section-end"></span></h3> <p> Но вернемся к основам: что такое независимость от разрешения и почему это важно? </p> <h4><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B5%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8_%D1%80%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D1%8F"></span> Определение независимости разрешения <span class="ez-toc-section-end"></span></h4> <p> Когда контент отрисовывается на носителе вывода, таком как принтер или экран, программное обеспечение преобразует описание того, что нужно нарисовать, в фактические пиксели. Например, строка текста сначала преобразуется в набор геометрических контуров, определяемых данными шрифта; эти контуры затем «растрируются» или превращаются в пиксели.Тот же процесс происходит с более простыми формами, такими как прямоугольник, нарисованный в определенном месте (координата x / y) и с определенным размером (шириной и высотой). </p> <p> Что касается подхода к визуализации, независимость от разрешения требует, чтобы объекты описывались таким образом, чтобы не зависеть от точных характеристик выходного носителя. Цель состоит в том, чтобы иметь возможность указать, что нужно рисовать, и позволить базовому программному обеспечению понять, как это сделать для конкретного устройства вывода во время выполнения. </p> <p> Это особенно важно, когда размер и плотность пикселей устройств вывода различаются так же широко, как и на современных устройствах просмотра.Например, при разрешении экрана 96 точек на дюйм (dppi = пиксель устройства на дюйм) миллиметр будет иметь длину около 4 пикселей устройства, поэтому прямоугольник, расположенный на (x = 10 мм, y = 20 мм), будет расположен на уровне x = 40 пикселей устройства и y = 80 пикселей устройства. В то время как на дисплее 300dppi миллиметр будет около 12 пикселей устройства в длину, а прямоугольник должен быть расположен в x = 120 пикселей устройства и y = 240 пикселей устройства. Однако, и это важная часть, прямоугольник будет отображаться в том же физическом положении на дисплее по модулю округления i.е. примерно 10 мм по оси X и 20 мм по оси Y. </p> <h4><span class="ez-toc-section" id="%D0%9C%D0%B0%D1%81%D1%88%D1%82%D0%B0%D0%B1%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5"></span> Масштабируемое содержимое <span class="ez-toc-section-end"></span></h4> <p> Чтобы не зависеть от разрешения, система должна иметь возможность масштабировать контент в зависимости от условий рендеринга. Postscript и PDF - это примеры технологий, основанных на концепции единиц, которые затем можно масштабировать по мере необходимости для соответствия доступному разрешению экрана. Оба используют «точку» и определяют ее как 1/72 дюйма. </p> <p> Scalable Vector Graphics (SVG) делает то же самое и имеет концепцию пользовательской единицы, от которой в конечном итоге происходят все остальные единицы; CSS определяет пиксели CSS, единицу измерения, к которой разрешают все остальные (пользовательская единица SVG совпадает с «px» в CSS).</p> <p> Во всех этих случаях положения и размеры объектов в конечном итоге сводятся к единой единице, которая затем может быть отображена на несколько пикселей устройства и масштабирована по желанию, например когда пользователь масштабирует контент. </p> <p> Прежде чем мы углубимся в модуль «px» CSS, отметим, что масштабируемые форматы, такие как SVG, являются очень эффективным способом достижения независимости от разрешения или отзывчивости для ваших изображений. </p> <p> <strong> Примечание. </strong> Иконочные шрифты - еще одна популярная практика с 2013 года.грамм. см. http://css-tricks.com/html-for-icon-font-usage/ или http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html. А еще есть очень умные хаки OpenType, такие как Chartwell или Symbolset. Сегодня они являются частью масштабируемого арсенала. </p> <h3><span class="ez-toc-section" id="%D0%92_%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8F%D1%85_CSS_%D1%84%D0%B8%D0%B7%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85_%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86%D0%B0%D1%85_%D0%B8%D0%B7%D0%BC%D0%B5%D1%80%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B8_%D0%BC%D0%B0%D1%81%D1%88%D1%82%D0%B0%D0%B1%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D0%BE%D1%81%D1%82%D0%B8"></span> В пикселях CSS, физических единицах измерения и масштабируемости <span class="ez-toc-section-end"></span></h3> <p> Хотя спецификация CSS Values and Units определяет все единицы CSS в одном документе, может потребоваться некоторая работа, чтобы понять, как CSS связывает свои единицы с реальными мерами или физическими единицами.Все спецификации могут быть указаны как: </p> <p> <strong> 96 пикселей = 1 дюйм </strong> </p> <p> Простая математика определяет два возможных поведения, разрешенных спецификацией: </p> <ul> <li> На устройстве с высоким разрешением - лазерных принтерах сегодня, экранах в будущем - рендеринг CSS должен сопоставлять дюйм с его физическим размером (это то, что в спецификации называется «соотнесением физических единиц с их физическими размерами»). В результате единица «px» CSS (поскольку она составляет 1/96 дюйма) может преобразоваться в дробное количество пикселей устройства.Например, на экране с разрешением 300 точек на дюйм (пикселей устройства на дюйм) соотношение пикселей устройства и пикселей CSS составляет 300/96 = 3,125. Как следствие, если вы применили стиль к элементу: </li> </ul><pre> <code> граница: сплошной синий 1 пиксель; </code> </pre><p>… его граница должна иметь ширину 3,125 пикселя устройства. В зависимости от растеризатора - части программного обеспечения, преобразующей базовые формы в пиксели - вы можете получить синий цвет, полностью покрывающий 3 пикселя, а затем частичное покрытие 4-го пикселя, используя сглаживание для смешивания с фоном.</p> <ul> <li> На устройстве с низким разрешением спецификация рекомендует «связать пиксельный блок с эталонным пикселем и дополнительно рекомендует, чтобы пиксельный блок относился ко всему количеству пикселей устройства, которое наилучшим образом приближается к эталонному пикселю». В нашем предыдущем примере синяя рамка могла быть полным пикселем устройства. </li> </ul> <p> Еще несколько лет назад пиксель CSS обычно отображался в один пиксель экрана. Как следствие, дюйм CSS не всегда соответствовал фактическому физическому дюйму; если истинное разрешение ноутбука составляет 120 точек на дюйм, дюйм длиной 96 пикселей будет 96/120 = 0.8 физических дюймов! </p> <p> С появлением экранов более высокой плотности мы видим устройства с двумя пикселями устройства на пиксель CSS (например, Apple Retina), а также дисплеи с дробным соотношением пикселей (см. Эту статью MDN). Обратите внимание, что дробное соотношение пикселей может привести к дополнительному сглаживанию при визуализации, как и при визуализации с высоким разрешением. </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80"></span> Простой пример <span class="ez-toc-section-end"></span></h3><pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta http-Equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1"> <title> Единицы CSS в пикселях / в тесте </title> <meta name = "description" content = ""> <meta name = "viewport" content = "width = ширина устройства, начальный масштаб = 1, максимальный масштаб = 1"> </head> <стиль> тело { фон: # 404040; } .css-box> span { дисплей: встроенный блок; высота: 1em; border-right: сплошной черный 1px; } .css-box.px> span { ширина: 96 пикселей; фон: #fefefe; } .css-box.in> span { ширина: 1 дюйм; фон: # 4166B5; } </style> <body> <div> </span> <span> </span> <span> </div> <div> </span> <span> </span> <span> </div> <script defer src="https://pyobjc.ru/wp-content/cache/autoptimize/js/autoptimize_d99c7dae0c07e859c6ce1a115e2a2be7.js"></script></body> </html> </code> </pre></p> <p> <em> Рисунок 1. Отрисовка в OSX Safari </em> </p> <p> Когда мы пытаемся отобразить этот документ на разных устройствах, мы видим, что: </p> <ul> <li> Во всех случаях светлый и синий прямоугольники абсолютно одинакового размера.Это потому, что 1 дюйм CSS всегда равен 96 пикселям CSS; белые прямоугольники имеют ширину 96 пикселей, а синие - 1 дюйм. Итак, как и ожидалось, их ширина совпала. </li> <li> На 15-дюймовом дисплее MacBook Pro с разрешением 110 точек на дюйм физическая ширина коробки составляет: 96 * 1/110 = 0,872 дюйма. Это потому, что соотношение CSSpx / пиксель устройства равно 1. Используя линейку на моем экране, я измерил 0,88 дюйма, и разница в моей рудиментарной линейке и приблизительном зрении :-). Таким образом, дюйм CSS на 22,8% отличается от физического дюйма.</li> <li> На iPhone 5 с разрешением 326 точек на дюйм физическая ширина коробки составляет 96 * 2/326 = 0,589 дюйма. Это потому, что на этой платформе отношение CSS px к устройству равно 2. Снова используя линейку, я получил 1,592 дюйма. Опять же погрешность измерения. Здесь дюйм CSS меньше на 41,1% </li> <li> На принтере (я использовал Canon Pixma MP600) физический дюйм коробки составляет… 1,05 дюйма !! Так что это 5% ошибка на этом конкретном принтере. </li> </ul> <h3><span class="ez-toc-section" id="%D0%98%D1%82%D0%B0%D0%BA%E2%80%A6_%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C_-_%D1%8D%D1%82%D0%BE_%D0%BD%D0%B5_%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C_%D0%B0_%D0%B4%D1%8E%D0%B9%D0%BC_-_%D1%8D%D1%82%D0%BE_%D0%BD%D0%B5_%D0%B4%D1%8E%D0%B9%D0%BC"></span> Итак… пиксель - это не пиксель, а дюйм - это не дюйм? <span class="ez-toc-section-end"></span></h3> <p> Ну, это почти так, но не так плохо, как кажется.Вот почему: </p> <ul> <li> <strong> Пиксель CSS является «эталонным» пикселем, а не пикселем устройства </strong>. Это вводит в заблуждение, и лично я предпочитаю понятие «пользовательская единица», которое использует SVG, потому что я думаю, что тогда легче объяснить сопоставление с физическими единицами и пикселями устройства. Но если понять, что «px» на самом деле является эталоном, а не пикселем устройства, все становится более понятным. Следует помнить, что CSS-пиксель - это абстрактная единица измерения, и существует соотношение, управляющее тем, как она: а) отображается на фактические пиксели устройства и б) сопоставляется с физическими единицами (фиксированное отношение всегда составляет 96 пикселей CSS к пикселям устройства). дюйм).</li> <li> <strong> дюйм CSS точно или «близко» к дюйму </strong>. На устройствах с высоким разрешением и если никакие другие параметры не мешают (например, масштабирование пользователя или преобразования CSS), дюйм будет физическим дюймом, как и ожидалось. На устройствах с низким разрешением возможна погрешность, как описано выше. </li> <li> <strong> Важнее всего масштабируемость и адаптируемость </strong>. Наиболее важным аспектом для большинства разработчиков является то, что макет контента может изменяться и адаптироваться по мере изменения масштаба единиц предсказуемым и разумным образом.Хотя концепция сохранения точного соотношения сторон на всех устройствах может показаться привлекательной, она имеет нежелательные последствия для устройств с низким разрешением (например, нежелательное сглаживание, вызывающее размытость рендеринга). </li> </ul> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BC%D1%8B%D1%81%D0%BB%D0%B8"></span> Заключительные мысли <span class="ez-toc-section-end"></span></h3> <p> Итак, что должны иметь в виду веб-разработчики, чтобы наш контент хорошо отображался на дисплеях различных размеров, форм-факторов и плотности пикселей? Вот несколько выводов: </p> <ol> <li> Используйте медиа-запросы, чтобы использовать желаемый макет в зависимости от условий рендеринга (например,г., маленький экран устройства, планшетный тип, рабочий стол, большой дисплей). </li> <li> Настройте область просмотра для отображения на мобильных устройствах с помощью метатега. </li> <li> Используйте блоки CSS и макет CSS, чтобы настроить поток и размер содержимого по желанию. Используйте новейшие единицы, такие как «rem», «vh» и «vw» (проверьте их статус реализации) или более старые, но все же полезные единицы, такие как «проценты», «em» или «pt». </li> <li> Помните, что пиксели CSS ссылаются на абстрактный ссылочный пиксель и что главное правило, которое следует помнить, состоит в том, что <strong> 96 пикселей CSS всегда имеют такую же длину, как 1 дюйм CSS </strong>.</li> <li> Используйте SVG (или шрифты значков, более ограниченные, но более широко поддерживаемые) везде, где вы можете (в зависимости от типа изображения и / или ваших целевых браузеров), чтобы иметь контент, который естественным образом масштабируется до более высоких плотностей или размеров пикселей. </li> </ol> <h3><span class="ez-toc-section" id="%D0%A1%D0%BC_%D0%A2%D0%B0%D0%BA%D0%B6%D0%B5"></span> См. Также <span class="ez-toc-section-end"></span></h3> <h2><span class="ez-toc-section" id="%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%86_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_CSS_-_%D0%91%D0%B5%D1%81%D0%BF%D0%BB%D0%B0%D1%82%D0%BD%D0%BE%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%BF%D0%BE_%D0%B8%D0%B7%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8E_HTML_%D0%B8_CSS"></span> единиц размера CSS - Бесплатное руководство по изучению HTML и CSS <span class="ez-toc-section-end"></span></h2> <p> Существует множество свойств CSS, для которых требуется <strong> единиц размера </strong>: </p> <ul> <li> <code> font-size </code> определяет размер текста </li> <li> <code> border-width </code> определяет вес границ элемента </li> <li> <code> Поле </code> определяет расстояние между элементами </li> <li> <code> влево / вправо / вверх / вниз </code> позволяет размещать и перемещать элементы </li> </ul> <p> Наиболее часто используемые единицы: </p> <ul> <li> <code> px </code> для пикселей </li> <li> <code>% </code> для процентов </li> <li> <code> em </code> для изменения размера относительно родительского значения <code> font-size </code>.</li> </ul> <h4><span class="ez-toc-section" id="%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D0%B5%D0%B9"></span> пикселей <span class="ez-toc-section-end"></span></h4> <p> Поскольку на экранах компьютеров для отображения содержимого используются пиксели, это <strong> наиболее распространенная единица размера в CSS </strong>. </p> <p> Может использоваться для фиксации <strong> ширины </strong> элемента: </p><pre> <code data-lang="css"> body {width: 400px;} </code> </pre><p> Или установите размер текста <strong> </strong>: </p><pre> <code data-lang="css"> body {font-size: 20px;} </code> </pre><p> Пиксели в CSS просты, потому что они определяют <strong> абсолютных значений </strong>: на них не влияют другие унаследованные свойства CSS.</p> <p> Они также широко используются для позиционирования <strong> </strong> и <strong> интервалов </strong>. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D1%8B"></span> Проценты <span class="ez-toc-section-end"></span></h4> <p> Проценты - это <strong> относительных единиц </strong>: они зависят от родителя и / или предка элемента. </p> <p> Например, элементы уровня блока, такие как абзацы, естественным образом занимают <strong> всей доступной ширины </strong>. Следующее правило CSS изменит их размер до <strong> на половину </strong> доступной ширины. </p><pre> <code data-lang="css"> p {width: 50%;} </code> </pre><p> Проценты могут помочь установить другие свойства CSS, например размер текста: </p><pre> <code data-lang="css"> strong {font-size: 150%;} </code> </pre><pre> <code data-lang="html"> <p> Перед нами стоят <strong> важные </strong> задачи.</p> </code> </pre><p> Перед нами стоит <strong> важных </strong> задач. </p> <h4><span class="ez-toc-section" id="Em"></span> Em <span class="ez-toc-section-end"></span></h4> <p> <code> em </code> - это относительная единица <strong> </strong>: она зависит от значения </code> font-size элемента </code>. </p> <p> Например, если родительский элемент имеет размер шрифта <code> 20 пикселей </code> и вы применяете <code> font-size: 0.8em </code> к дочернему элементу, этот дочерний элемент будет отображать размер шрифта <code> 16 пикселей </code>. </p> <p> Не путайте блок размера CSS <code> em </code> и селектор CSS <code> em </code>, который нацелен на <code> <em> </code> HTML-элементов </p> <p> Блок <code> em </code> интересен тем, что вы определяете размеры шрифта элементов HTML <em> относительно </em> друг к другу.Чтобы создать приятную и удобную для чтения веб-страницу, вам нужна постоянная визуальная глубина. Например, вы хотите, чтобы ваш <code> </p> <h2> </h2> <p></code> был в два раза больше, чем ваш основной текст, ваш <code> </p> <h3> </h3> <p></code> только в 1,5 раза больше, а ваша боковая панель немного меньше. Этого легко добиться в CSS: </p> <p>.</p><pre> <code data-lang="css"> body {font-size: 16px;} h2 {font-size: 2em;} / * = 32 пикселя * / h3 {font-size: 1.5em;} / * = 24 пикселя * / aside {font-size: 0.75em;} / * = 12px * / </code> </pre><p> Если вы решите изменить размер основного текста, относительные размеры ваших заголовков и боковой панели <strong> изменятся соответственно </strong>, и ваша веб-страница останется <strong> визуально сбалансированный </strong>.</p> <p> При изменении одного значения изменяются все остальные значения: </p><pre> <code data-lang="css"> body {font-size: 20px;} h2 {font-size: 2em;} / * = 40 пикселей * / h3 {font-size: 1.5em;} / * = 30 пикселей * / в сторону {font-size: 0.75em;} / * = 16px * / </code> </pre><h4><span class="ez-toc-section" id="Rem"></span> Rem <span class="ez-toc-section-end"></span></h4> <p> Единица <code> rem </code> аналогична <code> em </code>, но вместо того, чтобы зависеть от значения </em> родительского элемента <em>, она полагается на значение </strong> корневого элемента <strong>, которое является элементом <code> <html> </code>.</p><pre> <code data-lang="css"> html {font-size: 18px;} body {font-size: 1rem;} / * = 18 пикселей * / h2 {font-size: 2rem;} / * = 36 пикселей * / h3 {font-size: 1.5rem;} / * = 27px * / </code> </pre><p> Разница между <code> rem </code> и <code> em </code> заключается в том, что значения <code> rem </code> равны <strong> фиксированным </strong>, а значения <code> em </code> могут <em> умножить </em> между каждым Другие. </p> <p> Если вы установите <code> html {font-size: 18px;} </code>: </p> <ul> <li> <code> 2rem </code> всегда будет равно <code> 36px </code>, независимо от того, где вы используете в своем CSS </li> <li> <code> 2em </code> всегда будет равно <strong> double </strong> родительскому <code> font-size </code>, поэтому не обязательно <code> 36px </code> </li> </ul> <p> Быстрый пример, где <code> 2em </code> отличается от <code> 2rem </code>: </p><pre> <code data-lang="css"> html {font-size: 20px;} п {размер шрифта: 0.8rem;} / * = 16 пикселей * / p span {font-size: 2em;} / * = 16 пикселей * 2 = 32 пикселей * / p strong {font-size: 2rem;} / * = 20px * 2 = 40px * / </code> </pre><p> <code> span </code> полагается на значение размера шрифта <code> p </code>, а <code> strong </code> полагается на <code> html </code> font- значение размера.</p> </div> <footer class="entry-footer"> <span class="cat-links">Category <a href="https://pyobjc.ru/category/css" rel="category tag">Css</a></span> </footer> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://pyobjc.ru/raznoe/rabota-pr-rabota-pr-menedzherom-v-moskve.html" rel="prev">Работа pr: Работа PR-менеджером в Москве</a></div><div class="nav-next"><a href="https://pyobjc.ru/raznoe/kak-ponyat-kem-hochesh-rabotat-kak-ponyat-kem-hochesh-stat-uchyoba-ru.html" rel="next">Как понять кем хочешь работать: Как понять, кем хочешь стать? — Учёба.ру</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/css-razmery-elementov-css3-razmery-elementov-box-sizing.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pyobjc.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6460' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></div><div class="col-lg-4"><aside id="secondary" class="widget-area"><section id="archives-2" class="widget widget_archive"><h2 class="widget-title">Архивы</h2><ul><li><a href='https://pyobjc.ru/2024/11'>Ноябрь 2024</a></li><li><a href='https://pyobjc.ru/2024/10'>Октябрь 2024</a></li><li><a href='https://pyobjc.ru/2019/11'>Ноябрь 2019</a></li><li><a href='https://pyobjc.ru/2019/10'>Октябрь 2019</a></li><li><a href='https://pyobjc.ru/2019/09'>Сентябрь 2019</a></li><li><a href='https://pyobjc.ru/2019/08'>Август 2019</a></li><li><a href='https://pyobjc.ru/2019/07'>Июль 2019</a></li><li><a href='https://pyobjc.ru/2019/06'>Июнь 2019</a></li><li><a href='https://pyobjc.ru/2019/05'>Май 2019</a></li><li><a href='https://pyobjc.ru/2019/04'>Апрель 2019</a></li><li><a href='https://pyobjc.ru/2019/03'>Март 2019</a></li><li><a href='https://pyobjc.ru/2019/02'>Февраль 2019</a></li><li><a href='https://pyobjc.ru/2019/01'>Январь 2019</a></li><li><a href='https://pyobjc.ru/2018/12'>Декабрь 2018</a></li><li><a href='https://pyobjc.ru/2018/11'>Ноябрь 2018</a></li><li><a href='https://pyobjc.ru/2018/10'>Октябрь 2018</a></li><li><a href='https://pyobjc.ru/2018/09'>Сентябрь 2018</a></li><li><a href='https://pyobjc.ru/1983/07'>Июль 1983</a></li><li><a href='https://pyobjc.ru/1983/06'>Июнь 1983</a></li><li><a href='https://pyobjc.ru/1983/05'>Май 1983</a></li><li><a href='https://pyobjc.ru/1983/04'>Апрель 1983</a></li><li><a href='https://pyobjc.ru/1983/03'>Март 1983</a></li><li><a href='https://pyobjc.ru/1983/02'>Февраль 1983</a></li><li><a href='https://pyobjc.ru/1983/01'>Январь 1983</a></li><li><a href='https://pyobjc.ru/1982/12'>Декабрь 1982</a></li><li><a href='https://pyobjc.ru/1982/11'>Ноябрь 1982</a></li><li><a href='https://pyobjc.ru/1982/10'>Октябрь 1982</a></li><li><a href='https://pyobjc.ru/1982/09'>Сентябрь 1982</a></li><li><a href='https://pyobjc.ru/1982/08'>Август 1982</a></li><li><a href='https://pyobjc.ru/1982/07'>Июль 1982</a></li><li><a href='https://pyobjc.ru/1982/01'>Январь 1982</a></li><li><a href='https://pyobjc.ru/1981/12'>Декабрь 1981</a></li><li><a href='https://pyobjc.ru/1981/11'>Ноябрь 1981</a></li><li><a href='https://pyobjc.ru/1981/10'>Октябрь 1981</a></li><li><a href='https://pyobjc.ru/1981/09'>Сентябрь 1981</a></li><li><a href='https://pyobjc.ru/1981/08'>Август 1981</a></li><li><a href='https://pyobjc.ru/1981/07'>Июль 1981</a></li><li><a href='https://pyobjc.ru/1981/06'>Июнь 1981</a></li><li><a href='https://pyobjc.ru/1981/05'>Май 1981</a></li><li><a href='https://pyobjc.ru/1981/04'>Апрель 1981</a></li><li><a href='https://pyobjc.ru/1981/03'>Март 1981</a></li><li><a href='https://pyobjc.ru/1981/02'>Февраль 1981</a></li><li><a href='https://pyobjc.ru/1981/01'>Январь 1981</a></li><li><a href='https://pyobjc.ru/1980/12'>Декабрь 1980</a></li><li><a href='https://pyobjc.ru/1980/11'>Ноябрь 1980</a></li><li><a href='https://pyobjc.ru/1980/10'>Октябрь 1980</a></li><li><a href='https://pyobjc.ru/1980/09'>Сентябрь 1980</a></li><li><a href='https://pyobjc.ru/1980/08'>Август 1980</a></li><li><a href='https://pyobjc.ru/1980/07'>Июль 1980</a></li><li><a href='https://pyobjc.ru/1980/06'>Июнь 1980</a></li><li><a href='https://pyobjc.ru/1980/05'>Май 1980</a></li><li><a href='https://pyobjc.ru/1980/04'>Апрель 1980</a></li><li><a href='https://pyobjc.ru/1980/03'>Март 1980</a></li><li><a href='https://pyobjc.ru/1980/02'>Февраль 1980</a></li><li><a href='https://pyobjc.ru/1980/01'>Январь 1980</a></li><li><a href='https://pyobjc.ru/1979/12'>Декабрь 1979</a></li><li><a href='https://pyobjc.ru/1979/11'>Ноябрь 1979</a></li><li><a href='https://pyobjc.ru/1979/10'>Октябрь 1979</a></li><li><a href='https://pyobjc.ru/1979/09'>Сентябрь 1979</a></li><li><a href='https://pyobjc.ru/1979/08'>Август 1979</a></li><li><a href='https://pyobjc.ru/1979/07'>Июль 1979</a></li><li><a href='https://pyobjc.ru/1979/06'>Июнь 1979</a></li><li><a href='https://pyobjc.ru/1979/05'>Май 1979</a></li><li><a href='https://pyobjc.ru/1979/04'>Апрель 1979</a></li><li><a href='https://pyobjc.ru/1979/03'>Март 1979</a></li><li><a href='https://pyobjc.ru/1979/02'>Февраль 1979</a></li><li><a href='https://pyobjc.ru/1979/01'>Январь 1979</a></li><li><a href='https://pyobjc.ru/1978/12'>Декабрь 1978</a></li><li><a href='https://pyobjc.ru/1978/11'>Ноябрь 1978</a></li><li><a href='https://pyobjc.ru/1978/10'>Октябрь 1978</a></li><li><a href='https://pyobjc.ru/1978/09'>Сентябрь 1978</a></li><li><a href='https://pyobjc.ru/1978/08'>Август 1978</a></li><li><a href='https://pyobjc.ru/1978/07'>Июль 1978</a></li><li><a href='https://pyobjc.ru/1978/06'>Июнь 1978</a></li><li><a href='https://pyobjc.ru/1978/05'>Май 1978</a></li><li><a href='https://pyobjc.ru/1978/04'>Апрель 1978</a></li><li><a href='https://pyobjc.ru/1978/03'>Март 1978</a></li><li><a href='https://pyobjc.ru/1978/02'>Февраль 1978</a></li><li><a href='https://pyobjc.ru/1978/01'>Январь 1978</a></li><li><a href='https://pyobjc.ru/1977/12'>Декабрь 1977</a></li><li><a href='https://pyobjc.ru/1977/11'>Ноябрь 1977</a></li><li><a href='https://pyobjc.ru/1977/10'>Октябрь 1977</a></li><li><a href='https://pyobjc.ru/1977/09'>Сентябрь 1977</a></li><li><a href='https://pyobjc.ru/1977/08'>Август 1977</a></li><li><a href='https://pyobjc.ru/1977/07'>Июль 1977</a></li><li><a href='https://pyobjc.ru/1977/06'>Июнь 1977</a></li><li><a href='https://pyobjc.ru/1977/05'>Май 1977</a></li><li><a href='https://pyobjc.ru/1977/04'>Апрель 1977</a></li><li><a href='https://pyobjc.ru/1977/03'>Март 1977</a></li><li><a href='https://pyobjc.ru/1977/02'>Февраль 1977</a></li><li><a href='https://pyobjc.ru/1977/01'>Январь 1977</a></li><li><a href='https://pyobjc.ru/1976/12'>Декабрь 1976</a></li><li><a href='https://pyobjc.ru/1976/11'>Ноябрь 1976</a></li><li><a href='https://pyobjc.ru/1976/10'>Октябрь 1976</a></li><li><a href='https://pyobjc.ru/1976/09'>Сентябрь 1976</a></li><li><a href='https://pyobjc.ru/1976/08'>Август 1976</a></li><li><a href='https://pyobjc.ru/1976/07'>Июль 1976</a></li><li><a href='https://pyobjc.ru/1976/06'>Июнь 1976</a></li><li><a href='https://pyobjc.ru/1976/05'>Май 1976</a></li><li><a href='https://pyobjc.ru/1976/04'>Апрель 1976</a></li><li><a href='https://pyobjc.ru/1976/03'>Март 1976</a></li><li><a href='https://pyobjc.ru/1976/02'>Февраль 1976</a></li><li><a href='https://pyobjc.ru/1976/01'>Январь 1976</a></li><li><a href='https://pyobjc.ru/1975/12'>Декабрь 1975</a></li><li><a href='https://pyobjc.ru/1975/11'>Ноябрь 1975</a></li><li><a href='https://pyobjc.ru/1975/10'>Октябрь 1975</a></li><li><a href='https://pyobjc.ru/1975/09'>Сентябрь 1975</a></li><li><a href='https://pyobjc.ru/1975/08'>Август 1975</a></li><li><a href='https://pyobjc.ru/1975/07'>Июль 1975</a></li><li><a href='https://pyobjc.ru/1975/06'>Июнь 1975</a></li><li><a href='https://pyobjc.ru/1975/05'>Май 1975</a></li><li><a href='https://pyobjc.ru/1975/04'>Апрель 1975</a></li><li><a href='https://pyobjc.ru/1975/03'>Март 1975</a></li><li><a href='https://pyobjc.ru/1975/02'>Февраль 1975</a></li><li><a href='https://pyobjc.ru/1975/01'>Январь 1975</a></li><li><a href='https://pyobjc.ru/1974/12'>Декабрь 1974</a></li><li><a href='https://pyobjc.ru/1974/11'>Ноябрь 1974</a></li><li><a href='https://pyobjc.ru/1974/10'>Октябрь 1974</a></li><li><a href='https://pyobjc.ru/1974/09'>Сентябрь 1974</a></li><li><a href='https://pyobjc.ru/1974/08'>Август 1974</a></li><li><a href='https://pyobjc.ru/1974/07'>Июль 1974</a></li><li><a href='https://pyobjc.ru/1974/06'>Июнь 1974</a></li><li><a href='https://pyobjc.ru/1974/05'>Май 1974</a></li><li><a href='https://pyobjc.ru/1974/04'>Апрель 1974</a></li><li><a href='https://pyobjc.ru/1974/03'>Март 1974</a></li><li><a href='https://pyobjc.ru/1974/02'>Февраль 1974</a></li><li><a href='https://pyobjc.ru/1974/01'>Январь 1974</a></li><li><a href='https://pyobjc.ru/1973/12'>Декабрь 1973</a></li><li><a href='https://pyobjc.ru/1973/11'>Ноябрь 1973</a></li><li><a href='https://pyobjc.ru/1973/10'>Октябрь 1973</a></li><li><a href='https://pyobjc.ru/1973/09'>Сентябрь 1973</a></li><li><a href='https://pyobjc.ru/1973/08'>Август 1973</a></li><li><a href='https://pyobjc.ru/1973/07'>Июль 1973</a></li><li><a href='https://pyobjc.ru/1973/06'>Июнь 1973</a></li><li><a href='https://pyobjc.ru/1973/05'>Май 1973</a></li><li><a href='https://pyobjc.ru/1973/04'>Апрель 1973</a></li><li><a href='https://pyobjc.ru/1973/03'>Март 1973</a></li><li><a href='https://pyobjc.ru/1973/02'>Февраль 1973</a></li><li><a href='https://pyobjc.ru/1973/01'>Январь 1973</a></li><li><a href='https://pyobjc.ru/1972/12'>Декабрь 1972</a></li><li><a href='https://pyobjc.ru/1972/11'>Ноябрь 1972</a></li><li><a href='https://pyobjc.ru/1972/10'>Октябрь 1972</a></li><li><a href='https://pyobjc.ru/1972/09'>Сентябрь 1972</a></li><li><a href='https://pyobjc.ru/1972/08'>Август 1972</a></li><li><a href='https://pyobjc.ru/1972/07'>Июль 1972</a></li><li><a href='https://pyobjc.ru/1972/06'>Июнь 1972</a></li><li><a href='https://pyobjc.ru/1972/05'>Май 1972</a></li><li><a href='https://pyobjc.ru/1972/04'>Апрель 1972</a></li><li><a href='https://pyobjc.ru/1972/03'>Март 1972</a></li><li><a href='https://pyobjc.ru/1972/02'>Февраль 1972</a></li><li><a href='https://pyobjc.ru/1972/01'>Январь 1972</a></li><li><a href='https://pyobjc.ru/1971/12'>Декабрь 1971</a></li><li><a href='https://pyobjc.ru/1971/11'>Ноябрь 1971</a></li><li><a href='https://pyobjc.ru/1971/10'>Октябрь 1971</a></li><li><a href='https://pyobjc.ru/1971/09'>Сентябрь 1971</a></li><li><a href='https://pyobjc.ru/1971/08'>Август 1971</a></li><li><a href='https://pyobjc.ru/1971/07'>Июль 1971</a></li><li><a href='https://pyobjc.ru/1971/06'>Июнь 1971</a></li><li><a href='https://pyobjc.ru/1971/05'>Май 1971</a></li><li><a href='https://pyobjc.ru/1971/04'>Апрель 1971</a></li><li><a href='https://pyobjc.ru/1971/02'>Февраль 1971</a></li><li><a href='https://pyobjc.ru/1971/01'>Январь 1971</a></li><li><a href='https://pyobjc.ru/1970/12'>Декабрь 1970</a></li><li><a href='https://pyobjc.ru/1970/11'>Ноябрь 1970</a></li><li><a href='https://pyobjc.ru/1970/10'>Октябрь 1970</a></li><li><a href='https://pyobjc.ru/1970/09'>Сентябрь 1970</a></li><li><a href='https://pyobjc.ru/1970/08'>Август 1970</a></li><li><a href='https://pyobjc.ru/1970/07'>Июль 1970</a></li><li><a href='https://pyobjc.ru/1970/06'>Июнь 1970</a></li><li><a href='https://pyobjc.ru/1970/05'>Май 1970</a></li><li><a href='https://pyobjc.ru/1970/04'>Апрель 1970</a></li><li><a href='https://pyobjc.ru/1970/03'>Март 1970</a></li><li><a href='https://pyobjc.ru/1970/02'>Февраль 1970</a></li><li><a href='https://pyobjc.ru/1970/01'>Январь 1970</a></li></ul></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2><ul><li class="cat-item cat-item-6"><a href="https://pyobjc.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://pyobjc.ru/category/html">Html</a></li><li class="cat-item cat-item-11"><a href="https://pyobjc.ru/category/js">Js</a></li><li class="cat-item cat-item-5"><a href="https://pyobjc.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-8"><a href="https://pyobjc.ru/category/verstk">Верстк</a></li><li class="cat-item cat-item-10"><a href="https://pyobjc.ru/category/idei">Идеи</a></li><li class="cat-item cat-item-3"><a href="https://pyobjc.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-9"><a href="https://pyobjc.ru/category/chego-nachat">Чего начать</a></li><li class="cat-item cat-item-7"><a href="https://pyobjc.ru/category/shablon">Шаблон</a></li></ul></section><section id="meta-2" class="widget widget_meta"><h2 class="widget-title">Мета</h2><ul><li><a href="https://pyobjc.ru/wp-login.php">Войти</a></li><li><a href="https://pyobjc.ru/feed">Лента записей</a></li><li><a href="https://pyobjc.ru/comments/feed">Лента комментариев</a></li><li><a href="https://ru.wordpress.org/">WordPress.org</a></li></ul></section></aside></div></div></div></div><footer class="footer-area"><div class="container"><div class="row"><div class="col-lg-12"><div class="copyright"> Перепечатка и любое использование материалов сайта допускается только с разрешения автора <br> © 2008-2025 Evgeniy Krysanov Карта Сайта</div></div></div></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://pyobjc.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body></html>