Размеры элементов задаются с помощью свойств 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, только теперь высота вычисляется по высоте элемента-контейнера.
Как видно на скриншоте, в реальности значение свойства 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 элемента
В данном случае элемент будет иметь ширину в 200 пикселей и высоту в 100 пиксей.
padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения. Например, пусть у нас есть следующий стиль:
Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) — 10px (padding-left) — 10px (padding-right) = 180px.
Стоит отметить, что большинство современных браузеров не поддерживают данное свойство.
border-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы и границы как часть своего значения.
Например, пусть у нас есть следующий стиль:
Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) — 10px (padding-left) — 10px (padding-right) — 5px (border-left-width)
— 5px (border-right-width) = 170px.
Например, определим два блока, которые отличаются только значением свойства box-sizing:
В первом случае при определении размеров блока к свойствам 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 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.
Размер в процентах
Задавать величину в процентах становится все более популярным. При грамотном использовании это может принести отличное отображение сайта на разных устройствах.
К примеру, вы захотели на своем сайте сделать слева боковую колонку, а справа – область с основным содержимым, где будет выводиться основная текстовая информация. Например, статья, каталог товаров или темы на форуме. Для начала нужно определить, какие размеры вы хотите дать примерно этим контейнерам.
В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.
Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере
Как влияют отступы на размеры блоков
Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).
Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.
Вот уже и получается, что общая ширина сайдбара увеличилась на 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
Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.
Все элементы (теги) можно разделить на две категории: Блочные и строковые.
Чем они отличаются?
Думаю, сами названия уже говорят о различиях. Блочные или боксовые элементы — это контейнеры, прямоугольные области на мониторе компьютера которым без труда и вело-изобретательства можно присвоить определенное положение, размер, вложить в них другие блоки, определить расположение относительно друг друга. А строковые элементы располагаются в одну сроку, выравниваются по её базовой линии и как правило служат для форматирования и редакции текста.
Основные отличия от элементов строкового и блочного типа заключаются в том что:
Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.
На примере:
<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 — скрывает часть содержимого, которое выходит за границы блочного элемента.
Свойство CSS box-sizing позволяет нам включать отступы и границу в общая ширина и высота элемента.
Без CSS-свойства размера блока
По умолчанию ширина и высота элемента рассчитываются следующим образом:
ширина + отступ + граница = фактическая ширина элемента высота + отступ + граница = фактическая высота элемента
Это означает: когда вы устанавливаете ширину / высоту элемента, элемент часто появляется больше, чем вы установили (поскольку граница и отступ элемента добавляются к указанной ширине / высоте элемента).
На следующем рисунке показаны два элемента
с одинаковым указанная ширина и высота:
Этот div меньше (ширина 300 пикселей, высота 100 пикселей).
Этот div больше (ширина также 300 пикселей и высота 100 пикселей).
Два элемента
выше имеют разные размеры в результате (потому что div2 имеет отступ указано):
.div2 { width: 300px; высота: 100 пикселей; отступ: 50 пикселей; граница: сплошной красный 1px; размер коробки: рамка-рамка; }
Попробуй сам »
Так как результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы на их страниц, чтобы работать таким образом.
Приведенный ниже код обеспечивает более интуитивное определение размеров всех элементов.Многие браузеры уже используют box-sizing: border-box; для многие элементы формы (но не все — вот почему поля ввода и текста выглядят по-разному при ширине: 100%;).
Применять это ко всем элементам безопасно и разумно:
CSS свойство размера коробки
Имущество
Описание
размер коробки
Определяет, как рассчитываются ширина и высота элемента: следует они включают отступы и границы, или нет
Определение размеров элементов в CSS — Изучение веб-разработки
До сих пор в различных уроках вы встретили несколько способов изменения размера элементов на веб-странице с помощью CSS.Важно понимать, насколько велики будут различные элементы вашего дизайна. Итак, в этом уроке мы суммируем различные способы, которыми элементы получают размер с помощью CSS, и определим несколько терминов о размере, которые помогут вам в будущем.
HTML-элементы имеют естественный размер, заданный до того, как на них повлияет какой-либо CSS. Простой пример — изображение. Файл изображения содержит информацию о размере, описываемую как его внутренний размер . Этот размер определяется самим изображением , а не каким-либо форматированием, которое мы применяем.
Если вы разместите изображение на странице и не измените его высоту или ширину, используя атрибуты в теге или с помощью CSS, оно будет отображаться с использованием этого внутреннего размера. В примере мы привели изображение под рамкой, чтобы вы могли видеть его размер, определенный в файле.
Пустой
, с другой стороны, не имеет собственного размера. Если вы добавите
в свой HTML без содержимого, а затем установите для него рамку, как мы это сделали с изображением, вы увидите строку на странице.Это свернутая граница элемента — нет содержимого, которое могло бы удерживать ее в открытом состоянии. В нашем примере ниже эта граница простирается до ширины контейнера, потому что это элемент уровня блока, поведение, которое должно быть вам знакомо. У него нет высоты (или размера в измерении блока), потому что нет содержимого.
В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Теперь граница содержит этот текст, потому что высота элемента определяется содержимым.Следовательно, размер этого
в измерении блока зависит от размера содержимого. Опять же, это внутренний размер элемента — его размер определяется его содержимым.
Разумеется, мы можем придать элементам нашего дизайна определенный размер. Когда элементу присваивается размер (содержимое которого должно соответствовать этому размеру), мы называем его внешним размером . Возьмите наш
из приведенного выше примера — мы можем дать ему конкретные значения width и height , и теперь он будет иметь этот размер независимо от того, какой контент в него помещен.Как мы обнаружили в нашем предыдущем уроке о переполнении, заданная высота может вызвать переполнение содержимого, если содержимого больше, чем у элемента есть место для размещения внутри него.
Из-за этой проблемы переполнения, исправление высоты элементов с помощью длин или процентов — это то, что нам нужно делать в Интернете очень осторожно.
Использование процентов
Во многих отношениях проценты действуют как единицы длины, и, как мы обсуждали в уроке, посвященном значениям и единицам, они часто могут использоваться как синонимы длины.При использовании процента вам необходимо знать, что это за процентное соотношение от . В случае блока внутри другого контейнера, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.
Это потому, что проценты разрешаются по размеру содержащего блока. Если процентное значение не применяется, наш
будет занимать 100% доступного пространства, так как это элемент уровня блока. Если мы зададим ему процентную ширину, это станет процентом от пространства, которое оно обычно заполняет.
Поля и отступы в процентах
Если вы установите полей и отступов в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть коробка. Мы присвоили внутреннему блоку маржу 10% и padding 10%. Отступы и поля сверху и снизу поля имеют тот же размер, что и поля слева и справа.
Вы можете ожидать, например, что верхнее и нижнее поля в процентах будут в процентах от высоты элемента, а процентные значения левого и правого полей будут в процентах от ширины элемента.Тем не менее, это не так!
При использовании полей и отступов, заданных в процентах, значение рассчитывается из встроенного размера содержащего блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% от ширины. Это означает, что вы можете иметь поля и отступы одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно используете проценты таким образом.
Помимо задания фиксированного размера, мы можем попросить CSS дать элементу минимальный или максимальный размер.Если у вас есть поле, которое может содержать переменное количество содержимого, и вы всегда хотите, чтобы он был по крайней мере определенной высоты, вы можете установить для него свойство min-height . Коробка всегда будет не меньше этой высоты, но затем станет выше, если содержимого будет больше, чем в коробке есть место при минимальной высоте.
В приведенном ниже примере вы можете увидеть два поля, оба с определенной минимальной высотой в 150 пикселей. Поле слева имеет высоту 150 пикселей; в поле справа есть контент, которому нужно больше места, поэтому он вырос более чем на 150 пикселей.
Это очень полезно для работы с переменным объемом контента, избегая переполнения.
Обычно max-width заставляет изображения уменьшаться, если недостаточно места для их отображения с их внутренней шириной, при этом следя за тем, чтобы они не становились больше этой ширины.
В качестве примера, если бы вы установили width: 100% для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.
Если вместо этого вы используете max-width: 100% , а его внутренняя ширина меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.
В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению присвоена ширина : 100% , и оно находится в контейнере, который больше его, поэтому оно растягивается до ширины контейнера. Второе изображение имеет max-width: 100% и поэтому не растягивается, чтобы заполнить контейнер.Третье поле снова содержит то же изображение, также с max-width: 100% set; в этом случае вы можете увидеть, как он уменьшился, чтобы поместиться в коробку.
Этот метод используется, чтобы сделать изображения отзывчивыми, , так что при просмотре на меньшем устройстве они соответствующим образом уменьшаются. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, который они отображаются в дизайне.Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитное соединение.
Область просмотра — видимая область вашей страницы в браузере, который вы используете для просмотра сайта — также имеет размер. В CSS у нас есть единицы измерения, которые относятся к размеру области просмотра — единица vw для ширины области просмотра и vh для высоты области просмотра. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно области просмотра пользователя.
1vh равно 1% высоты области просмотра, а 1vw равно 1% ширины области просмотра. Вы можете использовать эти единицы измерения для размеров полей, а также текста. В приведенном ниже примере у нас есть коробка размером 20vh и 20vw. Коробка содержит букву A , которой присвоен размер шрифта размером 10vh.
Если вы измените значения vh и vw , это изменит размер поля или шрифта; изменение размера области просмотра также изменит их размеры, поскольку они имеют размер относительно области просмотра.Чтобы увидеть изменение примера при изменении размера области просмотра, вам нужно будет загрузить пример в новом окне браузера, размер которого можно изменить (поскольку встроенный , который содержит пример, показанный выше, является его окном просмотра). Откройте пример, измените размер окна браузера и посмотрите, что происходит с размером поля и текста.
Размеры объектов в соответствии с областью просмотра могут быть полезны в ваших проектах. Например, если вы хотите, чтобы полностраничный раздел героя отображался перед остальным контентом, установка этой части страницы на высоту 100vh приведет к выталкиванию остального контента ниже области просмотра, что означает, что он появится только после того, как документ будет отображен. прокручивается.
В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: определение размеров.
Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы переходите к макету CSS, изменение размеров станет очень важным для освоения различных методов макета, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.
box-sizing — CSS: каскадные таблицы стилей
Свойство box-sizing CSS устанавливает способ вычисления общей ширины и высоты элемента.
По умолчанию в блочной модели CSS ширина и высота , которые вы назначаете элементу, применяются только к блоку содержимого элемента. Если у элемента есть какие-либо границы или отступы, они затем добавляются к ширине и высоте , чтобы получить размер поля, отображаемого на экране.Это означает, что когда вы устанавливаете ширину и высоту , вы должны отрегулировать значение, которое вы даете, чтобы учесть любую границу или отступ, которые могут быть добавлены. Например, если у вас есть четыре поля шириной : 25%; , если какой-либо из них имеет левое или правое заполнение или левую или правую границу, они по умолчанию не помещаются в одну строку в рамках ограничений родительского контейнера.
Свойство box-sizing можно использовать для настройки этого поведения:
content-box дает вам поведение CSS по умолчанию для изменения размера окна.Если вы установите ширину элемента на 100 пикселей, тогда ширина поля содержимого элемента будет 100 пикселей, а ширина любой границы или отступа будет добавлена к окончательной ширине отрисовки, что сделает элемент шире 100 пикселей.
border-box указывает браузеру учитывать любую границу и отступы в значениях, которые вы указываете для ширины и высоты элемента. Если вы установите ширину элемента на 100 пикселей, эти 100 пикселей будут включать любую добавленную вами границу или отступ, а поле содержимого будет сокращаться, чтобы поглотить эту дополнительную ширину.Обычно это значительно упрощает размер элементов. box-sizing: border-box — это стиль по умолчанию, который браузеры используют для элементов
, и , а также для элементов с типом радио , флажок , сброс , кнопка , отправить , цвет или поиск .
Примечание: Часто бывает полезно установить box-sizing на border-box для элементов макета.Это значительно упрощает работу с размерами элементов и, как правило, устраняет ряд подводных камней, на которые вы можете наткнуться при размещении своего контента. С другой стороны, при использовании position: relative или position: absolute , использование box-sizing: content-box позволяет значениям позиционирования быть относительно содержимого и независимо от изменений размеров границ и отступов. , что иногда желательно.
размер коробки: рамка-рамка;
размер коробки: коробка содержимого;
размер коробки: наследовать;
размер коробки: начальный;
размер коробки: вернуться;
размер коробки: не установлен;
Свойство размера коробки задается как одно ключевое слово, выбранное из списка значений ниже.
Значения
content-box
Это начальное значение и значение по умолчанию, как указано в стандарте CSS. Свойства width и height включают содержимое, но не включают заполнение, границу или поле. Например, .box {width: 350px; border: 10px solid black;} отображает блок шириной 370 пикселей.
Здесь размеры элемента рассчитываются следующим образом: ширина = ширина содержимого и высота = высота содержимого .(Границы и отступы в расчет не включаются.)
бордюр
Свойства width и height включают содержимое, заполнение и границу, но не включают поля. Обратите внимание, что отступ и граница будут внутри поля. Например, .box {width: 350px; border: 10px solid black;} отображает блок шириной 350 пикселей с областью для содержимого шириной 330 пикселей. Поле содержимого не может быть отрицательным и имеет значение 0, что делает невозможным использование border-box для исчезновения элемента.
Здесь размеры элемента рассчитываются следующим образом: ширина = граница + отступ + ширина содержимого и высота = граница + отступ + высота содержимого .
Размеры бокса с полем содержимого и рамкой
В этом примере показано, как различные значения размера блока изменяют визуализированный размер двух идентичных элементов.
HTML
Поле содержимого
Рамка
CSS
div {
ширина: 160 пикселей;
высота: 80 пикселей;
отступ: 20 пикселей;
граница: сплошной красный 8px;
фон: желтый;
}
.content-box {
размер коробки: коробка содержимого;
}
.border-box {
размер коробки: рамка-рамка;
}
Результат
Таблицы BCD загружаются только в браузере
CSS Box Sizing Module Level 3
1. Введение
Этот раздел не является нормативным.
Макет
CSS имеет несколько различных концепций автоматического изменения размера, которые используются в различных расчетах макета. В этом разделе даны более точные определения терминологии. чтобы помочь связать поведение макета этой спецификации с вычислениями, используемыми в других модулях, и несколько новых ключевых слов для свойств ширины и высоты чтобы позволить авторам присваивать элементам размеры, полученные в результате этих расчетов размеров.
Требуются иллюстрации! См. Проблему.
1.1. Модуль взаимодействия
Этот модуль расширяет функции ширины, высоты, минимальной ширины, минимальной высоты, максимальной ширины, максимальной высоты и ширины столбца, определенные в главе 10 [CSS2] и в [CSS3COL]
.
Определение свойства размера блока в этом модуле заменяет определение в [CSS-UI-3].
1.2. Определения значений
Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].Типы значений, не определенные в этой спецификации, определены в CSS Values & Units [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.
В дополнение к значениям для конкретных свойств, перечисленным в их определениях, все свойства, определенные в этой спецификации также принимают ключевые слова CSS в качестве значения свойства. Для удобства чтения они явно не повторяются.
2. Терминология
Некоторые ключевые термины, относящиеся к координатным осям и размерам определено в CSS Writing Modes 3 §6 Терминология абстрактного блока.
размер
Одно- или двухмерное измерение: размер блока и / или встроенный размер; альтернативно ширину и / или высоту. Соответствует ли ширина или высота к встроенному размеру или размеру блока зависит от режима записи.
внутренний размер
Размер блока содержимого. Внутренний размер
Внешний размер
Размер поля поля.Внешний размер
определенный размер
Размер, который можно определить без выполнения макета; то есть <длина>, размер текста (без учета переноса строк), размер исходного содержащего блока, или <процент> или другая формула (например, "растягиваемый" размер незамещенных блоков [CSS2]) это разрешено исключительно против определенных размеров.
Кроме того, размер содержащего блока абсолютно позиционированного элемента всегда определен относительно этого элемента.
неопределенный размер
Размер не определен. Неограниченное доступное пространство по сути бесконечно.
свободное место
Размер, представляющий пространство, в котором размещается коробка, как определено правила контекста форматирования, в котором он участвует. Пространство, доступное для коробки, обычно либо измерение содержащего его блока (если это точно) или бесконечный размер (когда он неопределенный).Доступное пространство альтернативно может быть либо ограничением минимального содержимого, либо ограничение максимального содержимого, что заставляет заложенные в него ящики располагаться под этим ограничением.
эластичная подгонка
Растяжка соответствует заданному размеру это размер, минус вычисленные поля блока (не свернуты, auto обрабатывается как ноль), граница и отступ в заданном измерении (так что внешний размер идеально подходит), и пол на нуле (чтобы внутренний размер не был отрицательным).
Примечание: это формула, используемая для расчета автоматической ширины незамещенных блоков в нормальном потоке в CSS2.1§10.3.3.
резервный размер
Некоторые алгоритмы определения размера не работают с бесконечным размером. В этих случаях вместо этого используется резервный размер. Если не указано иное, это размер начального содержащего блока.
2.1. Размеры авто коробки
В CSS есть четыре типа автоматически определяемых размеров. (размеры, полученные в результате правил автоматического определения размеров, в зависимости от контекста):
эластичный размер
растягивающийся встроенный размер
эластичный блок, размер
Размер коробки если его внешний размер заполнял доступное пространство по данной оси; другими словами, растяжка умещалась в доступном пространстве, если это точно.Не определено, если доступное пространство не определено.
Примечание. Для встроенной оси это называется «доступной шириной» в CSS2.1§10.3.5 и вычисляется по правилам CSS2.1§10.3.3.
Примечание. В расчетах, связанных с этим размером, необходимо указать резервное поведение. когда доступное пространство не определено, если это возможно.
максимальный размер содержимого
«Идеальный» размер коробки по заданной оси при бесконечном доступном пространстве.Обычно это наименьший размер коробки по этой оси. в то время как все еще укладывается в его содержимое, то есть минимизировать незаполненное пространство, избегая при этом переполнения.
максимальный размер в строке
«Идеальный» размер коробки по линейной оси. Обычно самый узкий встроенный размер, который он может занять при размещении вокруг его содержимого если нет возможностей мягкой упаковки внутри коробки были использованы. (См. §5 Определение внутреннего размера.)
Примечание. Это называется «предпочтительной шириной» в CSS2.1§10.3.5 и «максимальной шириной ячейки» в CSS2.1§17.5.2.2.
максимальный размер блока содержимого
«Идеальный» размер коробки по оси блока. Обычно размер блока контента после верстки.
минимальный размер содержимого
Наименьший размер, который может вместить коробка что не приводит к переполнению этого можно было избежать, выбрав больший размер.(См. §5 Определение внутреннего размера.)
min-content встроенный размер
Самый узкий встроенный размер, который может вместить коробка что не приводит к переполнению встроенных размеров этого можно было бы избежать, выбрав больший встроенный размер. Грубо говоря, встроенный размер, который уместился бы вокруг его содержимого если были использованы все возможности мягкой упаковки в коробке.
Примечание. Это называется «предпочтительной минимальной шириной» в CSS2.1§10.3.5 и «минимальная ширина содержимого» в CSS2.1§17.5.2.2.
Размер блока минимального содержимого
В целом, и определенно для блочных контейнеров, таблиц и встроенных боксов, это эквивалентно максимальному размеру блока содержимого.
подходящий размер
встроенный размер fit-content
размер блока fit-content
Если доступное пространство на данной оси определено, равен (минимальный размер содержимого, размер растягиваемого содержимого, максимальный размер содержимого) (т.е.е. макс (минимальный размер содержимого, минимальный (максимальный размер содержимого, размер растягивания)) ). При изменении размера с ограничением минимального содержимого, равен размеру минимального содержимого. В противном случае равняется максимальному размеру содержимого на этой оси.
Примечание. В CSS2.1§10.3.5 и CSS Multi-column Layout § 3.4 это называется шириной «подгонки по размеру».
внутренний размер
Максимальный размер содержимого или минимальный размер содержимого, то есть размер, возникающий в первую очередь из размера содержимого.(Некоторые варианты использования этого термина могут также относиться к размерам происходит в основном от одного из этих двух размеров.)
Заменяемые элементы часто получают свой собственный размер из своих естественных размеров.
2.2. Вклад в собственный размер
вклад max-content
Размер, который поле вносит в максимальный размер содержимого содержащего его блока.
вклад мин-контента
Размер, который поле вносит в минимальный размер содержимого содержащего его блока.
вклад собственного размера
Вклад максимального содержания, вклад минимального содержания, или рассчитанный аналогичным образом вклад размера на основе содержимого.
Вклады внутреннего размера основаны на внешнем размере коробки; для этой цели автоматические поля считаются нулевыми.
2.3. Внутренние ограничения размера
ограничение максимального содержимого
Ограничение размера, налагаемое содержащим блоком бокса, которое заставляет его производить свой вклад максимального содержания.
ограничение min-content
Ограничение размера, налагаемое содержащим блоком бокса, которое заставляет его создавать свой вклад min-content.
предпочтительное соотношение сторон
Соотношение ширины и высоты, присущее коробке, что смещает различные алгоритмы определения размеров для получения размера, соответствующего этому соотношению сторон насколько это возможно, соблюдая при этом другие данные о размерах. Если не указано иное, Предпочтительное соотношение сторон коробки - это естественное соотношение сторон, если оно имеет и применяется к его блоку содержимого.У большинства коробок нет предпочтительного соотношения сторон.
3. Определение размеров коробки
3.1. Размерные свойства
В этом разделе определяются свойства размера width, height, min-width, min-height, max-width и max-height. Их потенциальные значения определены в следующем разделе, §3.2 Значения размеров: <длина-процент>, авто | none, min-content, max-content и fit-content () значения.
Примечание. Дополнительные псевдонимы, относящиеся к потоку, для этих свойств определены в [CSS-LOGICAL-1].
Мы хотели бы определить сокращения для каждой пары свойств размеров. (например, ширина и высота) но существует конфликт имен с дескриптором размера @page [CSS-PAGE-3], так что это было отложено до уровня 4. Предложения по решению этой проблемы приветствуются, см. обсуждение.
3.1.1. Предпочтительные свойства размера: свойства ширины и высоты
Свойства ширины и высоты (физические) указывают предпочтительнее шириной и высотой коробки соответственно.
3.1.2. Свойства минимального размера: свойства min-width и min-height
Свойства min-width и min-height указывают минимальная ширина (или «минимальная ширина») и минимальная высота (или «минимальная высота») коробки соответственно.
Примечание. Начальное значение auto новое; в [CSS2] начальное значение было нулевым.
3.1.3. Свойства максимального размера: свойства max-width и max-height
Свойства max-width и max-height указывают максимальная ширина (или «максимальная ширина») и максимальная высота (или «максимальная высота») коробки соответственно.
3.2. Значения размеров:
<длина-процент>, авто | значения none, min-content, max-content и fit-content ()
<длина-процент>
Задает размер поля с помощью и / или . Свойство box-sizing указывает, измеряется ли блок содержимого или граница.
Процентное соотношение разрешается по ширине / высоте, в зависимости от ситуации, блока, содержащего коробку.Если на определенной оси размер содержащего блока зависит от размера коробки, см. соответствующий модуль макета для специальных правил о том, как разрешить проценты.
Отрицательные значения недопустимы.
авто
Для ширины / высоты задает автоматический размер ( автоматический размер блока / автоматический встроенный размер ). См. Соответствующий модуль макета, чтобы узнать, как это рассчитать.
Для минимальной ширины / минимальной высоты, задает автоматический минимальный размер .Если иное не определено соответствующим модулем компоновки, тем не мение, он разрешается к используемому значению 0. Для обратной совместимости разрешенное значение этого ключевого слова равно нулю для ящиков всех типов отображения [CSS2]: блочные и встроенные боксы, встроенные блоки, и все поля макета стола. Он также разрешается к нулю когда поле не создается.
нет
Нет ограничений по размеру коробки.
мин-содержание
Используйте размер минимального содержимого на соответствующей оси; для размера блока коробки, если не указано иное, это эквивалентно его автоматическому размеру.
макс. Содержание
Используйте максимальный размер содержимого на соответствующей оси; для размера блока коробки, если не указано иное, это эквивалентно его автоматическому размеру.
fit-content ()
Используйте формулу соответствия-содержания с заменой доступного пространства указанным аргументом, то есть мин (макс-содержание, макс (мин-содержание, <длина-процент>)) , где аргумент разрешен точно так же, как для отдельных значений .
Отрицательные значения <длина-процент> недопустимы.
Во всех случаях, используемое значение выравнивается, чтобы сохранить неотрицательный внутренний размер.
Примечание. Значения min-content, max-content и fit-content () являются новыми на уровне 3.
Примечание. Свойство flex-basic тем самым также получает эти новые ключевые слова, поскольку его значения определены ссылкой на .
Примечание. В этом разделе ранее были определены stretch и fit-content как ключевые слова, представляющие размер stretch-fit и размер fit-content, соответственно.Эти ключевые слова были перенесены на уровень 4. (вместе с дополнительным ключевым словом, которое ведет себя аналогично растягиванию, но сохраняет предпочтительное соотношение сторон, если таковое имеется) чтобы лучше проработать последствия в ситуациях с неограниченным доступным пространством.
3.2.1. «Вести себя как авто»
Чтобы иметь общий термин для обоих случаев, когда ширина / высота вычисляется как auto, и когда определено, чтобы вести себя так, как если бы было указано auto (как в случае разрешения процентной высоты блока на неопределенный размер, см. CSS2§10.5), в обоих случаях свойство ведет себя как auto .
Примечание. Устаревшая спецификация, определяющая поведение макета, особенно в [CSS2], может явно ссылаться на ширину / высоту с вычисленным значением auto как на условие; некоторые из этих случаев следует интерпретировать как значение ведет себя как авто, и переданы в рабочую группу CSS для обновления.
Заменить этот раздел ссылками на новый термин автоматический размер.
3.2.2. Содержащие или исключающие числа с плавающей запятой
Этот раздел не является нормативным.
Хотя границы блока блоков обычно проницаемы для поплавков, иногда автору нужно, чтобы они содержали свои собственные (потомки) поплавки или исключить поплавки извне. Для блочного макета указание display: flow-root сделает поле корнем контекста форматирования, который имеет такое поведение.
Примечание. Блоки, участвующие в макете Flex, Grid или Table, будут автоматически иметь такое поведение.
3.3. Края блока для определения размера: свойство размера блока
Свойство box-sizing определяет, фиксированные размеры (например, s и s) назначаются блоку содержимого или рамке.Это влияет на интерпретацию всех калибровочных свойств, в том числе флекс-основа.
Значения имеют следующие значения:
поле содержимого
Размеры, указанные в свойствах размеров как , представляют внутренние размеры коробки, исключая поля / границы / отступы: они применяются к блоку содержимого. Заполнение и граница поля выкладываются и рисуются за пределами указанной ширины и высоты.
Примечание. Это поведение ширины и высоты, как указано в CSS2.1, и поэтому используется по умолчанию.
бордюр
Размеры, указанные в параметрах размеров как , представляют визуально видимые размеры коробки, включая границы / отступы (но не поля): они применяются к рамке. Заполнение и граница поля выкладываются и рисуются внутри указанной ширины и высоты, с размером поля содержимого, чтобы заполнить оставшееся пространство, настил на нуле.
Рассчитываются ширина и высота содержимого. путем вычитания ширины границы и заполнения соответствующих сторон от указанного . Поскольку ширина и высота содержимого не могут быть отрицательными, это вычисление равно нулю.
Используемые значения, как показано, например, через getComputedStyle () , также обратитесь к рамке.
Значения, на которые влияет размер коробки, включают оба необработанных значения и те, которые используются в функциональных обозначениях, таких как fit-content ().Наоборот, неколичественные значения, такие как auto и min-content, не зависят от свойства box-sizing (если не указано иное).
Например, следующие свойства установлены размер поля содержимого - 100 пикселей, с размером рамки, равным 120 пикселей:
Внутренний размер не может быть меньше нуля, поэтому, если отступ + граница больше указанного размера рамки, коробка окажется больше, чем указано. В этом случае размер поля содержимого будет равняться 0 пикселей, поэтому размер рамки будет равен 120 пикселей, даже если ширина: 100 пикселей указана для рамки:
В этом примере используется размер блока для равномерного разделения по горизонтали. два блока div с границами фиксированного размера внутри контейнера div, что в противном случае потребовало бы дополнительной разметки.
Этот div занимает левую половину. Этот div занимает правую половину.
демонстрация образцов CSS и HTML:
Этот div должен занимать левую половину.
Этот div должен занимать правую половину.
Два приведенных выше блока div должны отображаться рядом, каждый (включая границы) на 50% ширины содержимого их контейнера. Если вместо этого они накладываются друг на друга, ваш браузер не поддерживает размер блока.
Примечание. Некоторые элементы HTML, например, кнопка , по умолчанию - поведение рамки. См. Подробности о том, какие элементы имеют такое поведение в HTML.
В устаревших спецификациях CSS термины ширина, высота, минимальная (минимальная) ширина, минимальная (минимальная) высота, максимальная (максимальная) ширина и максимальная (максимальная) высота обычно относятся к внутреннему размеру (размер поля содержимого) коробки, если не указано иное.
См. Пользовательский интерфейс CSS 3 §3.1 Изменение блочной модели: свойство box-sizing для явного устранения неоднозначности этих терминов. для раздела деталей модели визуального форматирования [CSS2].
Чтобы избежать двусмысленности, авторам спецификаций следует избегать двусмысленного использования таких терминов, как ширина или высота, без дополнительных уточнений, и должен явно ссылаться на внутренний размер, внешний размер, размер рамки, вычисленное значение свойств размера, так далее, в зависимости от конкретного случая.
3.4. Новые значения размера столбца: значения min-content, max-content и fit-content ()
При использовании в качестве значений ширины столбца, новые ключевые слова определяют оптимальную ширину столбца:
мин-содержание
Задает оптимальную ширину столбца в качестве встроенного размера min-content для содержимого контейнера с несколькими столбцами.
макс. Содержание
Задает оптимальную ширину столбца в качестве максимального встроенного размера содержимого контейнера с несколькими столбцами.
fit-content ()
Задает оптимальную ширину столбца как мин (макс. Размер содержимого, макс. (Размер мин. Содержимого, <длина-процент>))
Примечание. Ширина столбца не зависит от столбца. Когда ширина столбца определяется содержимым контейнера с несколькими столбцами (как в ключевых словах выше), все его содержимое принимается во внимание и рассчитанная ширина разделяется всеми столбцами.
4.Определение внешнего размера
Внешний размер определяет размеры в зависимости от контекста элемента, безотносительно к его содержанию.
4.1. Процентный размер
Проценты определяют размер блока по отношению к содержащему его блоку.
Например, в следующей разметке:
будет 15em высотой = 50% от высоты
См. §5.2.1 Внутренние вклады ячеек с процентным размером для получения подробной информации о том, как вычислить процентные значения. когда размер содержащего блока зависит от размера его содержания.
5. Определение внутреннего размера
Внутренний размер определяет размеры на основе содержимого элемента, без оглядки на его контекст.
5.1. Внутренние размеры
Минимальный размер блока по каждой оси это размер, который он имел бы, если бы был поплавок с автоматическим размером по этой оси (и нет минимального или максимального размера на этой оси) и если его содержащий блок был нулевым размером по этой оси.(Другими словами, минимальный размер, который он имеет при выборе размера «с усадкой».)
Максимальный размер содержимого бокса по каждой оси это размер, который он имел бы, если бы был поплавок с автоматическим размером по этой оси (и нет минимального или максимального размера на этой оси), и если его содержащий блок был бесконечно размером по этой оси. (Другими словами, максимальный размер, который он имеет при выборе размера «с усадкой».)
Минимальный размер и максимальный размер контента вместе называются как внутренние размеры.
Примечание. Если у окна предпочтительное соотношение сторон, ограничения размера в противоположном измерении будут передаваться через и может повлиять на размер авто в рассматриваемом. См. CSS2§10.
Эта спецификация не определяет, как определять размеры поплавков. См. [CSS2]. Однако внутренние размеры заменяемых элементов без естественных размеров определены ниже:
Если у него предпочтительное соотношение сторон:
Для минимального размера содержимого используйте ноль.
Для максимального размера содержимого:
Если доступное пространство определено на линейной оси, используйте растяжку этого размера для встроенного размера и рассчитайте размер блока, используя соотношение сторон.
В противном случае если поле имеет в качестве вычисленного значения для min-width или min-height, используйте этот размер и вычислите другой размер, используя соотношение сторон; если оба размера имеют минимум , выберите тот, который дает больший общий размер.
Примечание. Этот случай был ранее рассчитан из размера по умолчанию 300 x 150, а не минимальный размер коробки. Считается, что это лучшее поведение, и, вероятно, будет веб-совместимым, но, пожалуйста, отправьте отзыв в CSSWG, если возникнут какие-либо проблемы.
В противном случае использовать встроенное соответствие размера соответствующее измерение исходного содержащего блока и вычислить другое измерение, используя соотношение сторон.
Если у него нет предпочтительного соотношения сторон:
Для минимального и максимального размера содержимого:
Если поле имеет в качестве вычисленного минимального размера (min-width / min-height) в этом измерении, используйте этот размер.
Примечание: это управляемое автором поведение стало возможным новым значением auto для свойств минимального размера. Считается, что это лучшее поведение, но пока не ясно, совместим ли он с Интернетом, поэтому, пожалуйста, отправьте отзыв в CSSWG, если возникнут какие-либо проблемы.
В противном случае, используйте 300 пикселей для ширины и / или 150 пикселей для высоты по мере необходимости.
Поскольку заменяемый элемент на уровне блока или на уровне строки высота или ширина которого ведет себя как auto, эффективно определяется для использования максимального размера содержимого (CSS2§10.3.2), эта спецификация применяет правила выше к неопределенному случаю замененного элемента чья высота и ширина ведут себя как авто.
Примечание. Эта спецификация не определяет, как определять размером с поплавок. См. [CSS2], соответствующая спецификация CSS для этого типа отображения, и / или существующие реализации для получения дополнительной информации. В будущих спецификациях это будет подробно определено, заменяя «определение» CSS2, такой как есть.
Хотя автоматический размер элементов управления вводом текста такие как элементы HTML и
обычно фиксированный размер,
содержимое таких элементов может использоваться для определения внутреннего размера на основе содержимого,
Что касается незаменимых блок-контейнеров.Ключевые слова min-content и max-content в свойствах размеров, таким образом, представляют размеры на основе содержимого.
для элементов управления формы, которые отображают свое значение
как текст, содержащийся в их поле,
позволяя таким элементам управления изменяться по размеру, чтобы соответствовать их видимому содержимому
аналогично обычным незаменяемым элементам.
Контент в этом случае определяется как значения элемента управления вводом
(исходное значение в случае textarea ,
или значение в случае ввод ),
возможно преобразование в более удобочитаемый и / или локализованный формат отображения,
который затем обрабатывается как дочерний текст элемента управления вводом,
разрешая возможности мягкого переноса только там, где элемент управления вводом действительно позволяет переносить
(независимо от того, отключены ли свойства CSS или другие внутренние ограничения UA).Если элемент управления вводом имеет обозначенный текст-заполнитель
для наложения в области отображения значений,
затем этот текст также измеряется с целью вычисления размера на основе содержимого - независимо от того, виден ли текст заполнителя в данный момент.
(Таким образом, основанный на содержании внутренний размер элемента управления вводом
- это больший размер, соответствующий тексту-заполнителю, и размер, соответствующий значению.)
UA может потребовать минимум
(например, размер, необходимый для размещения одного символа нулевой ширины,
или наименьший используемый размер сенсорной мишени)
в размерах min-content и max-content элемента управления формы, чтобы обеспечить достаточно места для курсора
и иным образом поддерживать удобство использования элемента управления формы.
Примечание: это может быть расширено до iframe или других замененных элементов, содержащих контент.
(см. обсуждение),
но текстовый ввод является основным вариантом использования;
и являясь внутренним документом,
имеют наименьшие дополнительные осложнения.
5.2. Собственные взносы
Вклад минимального содержания / вклад максимального содержания блока на каждой оси
размер поля содержимого
гипотетического поплавка с автоматическим размером
который содержит только эту коробку,
если содержащий блок этого гипотетического числа с плавающей запятой имеет нулевой / бесконечный размер.
Примечание. В данной спецификации не указывается точно, как определять эти размеры.
См. [CSS2],
соответствующая спецификация CSS для этого типа отображения,
правила обработки процентов (ниже),
и / или существующие реализации
для получения дополнительной информации.
5.2.1. Внутренний вклад процентных коробок
Иногда размер содержащего блока блока процентного размера зависит от внутреннего размера самого блока,
создание циклической зависимости.При расчете вклада внутреннего размера такой коробки
(включая любые вычисления для автоматического минимального размера на основе содержимого),
процентное значение, соответствующее размеру
на той же оси, что и вклад внутреннего размера (циклический процентный размер )
разрешено специально:
Если коробка не заменена,
затем все значение любого свойства максимального размера или свойства предпочтительного размера (ширина / максимальная ширина / высота / максимальная высота)
задано как выражение, содержащее процент
(например, 10% или calc (10px + 0%))
то есть циклический, обрабатывается с целью вычисления вкладов внутреннего размера блока только в качестве начального значения этого свойства.Например, учитывая поле шириной: calc (20px + 50%),
его вклад в максимальное содержание рассчитывается так, как если бы его ширина была автоматической.
(Тем не менее, процент сохраняется как обычно,
во время собственно калибровки самого ящика; см. ниже.)
Аналогично, если коробка заменена,
затем все значение любого свойства максимального размера или свойства предпочтительного размера, заданного как выражение, содержащее процент
то есть циклический, обрабатывается с целью вычисления вкладов максимального содержимого блока только в качестве начального значения этого свойства.
Если коробку заменить,
циклический процент в значении любого свойства максимального размера или свойства предпочтительного размера (ширина / максимальная ширина / высота / максимальная высота),
решено против нуля
при вычислении вклада min-content на соответствующей оси.
(См. §5.2.2 Сжимаемые заменяемые элементы для получения списка, к каким элементам в HTML это относится.)
UA может дополнительно указать этот размер в зависимости от пользовательского интерфейса.
например, обеспечение видимости определенных элементов пользовательского интерфейса.
(например, стрелка раскрывающегося списка на выберите ).Это правило также применяется при расчете
автоматический минимальный размер на основе содержимого или соответствующий вклад в размер,
что дает определенное «предложение указанного размера».
Для свойств минимального размера,
а также для полей и отступов (и желобов),
Циклический процент разрешается против нуля
для определения вкладов собственного размера.
Затем, если не указано иное,
при вычислении используемых размеров и позиций содержимого содержащего блока :
Если циклическая зависимость была введена из-за
размер блока или максимальный размер блока в содержащем блоке
что заставляет его зависеть от размера его содержимого,
процентное соотношение окна не разрешается и вместо этого ведет себя как автоматически.
Примечание. Элементы сетки и элементы гибкости в этом случае позволяют вычислять проценты.
В противном случае процент сравнивается с размером содержащего блока.
(Размер содержащего блока не определяется повторно в зависимости от результирующего размера блока;
содержимое может, таким образом, переполнить или опустошить содержащий блок).
Примечание. Эти правила определяют ранее неопределенное поведение этого циклического случая.
в CSS2§10.2, CSS2§8.3,
и CSS2§8.4.
Также обратите внимание, что поведение в CSS2§10.5 заменено в соответствующих спецификациях для режимов макета.
(например, гибкий макет)
не описан в CSS2.
Например, в следующей разметке:
LOOOOOOOOOOOOOOOOOOOONG
При расчете ширины внешней
,
внутренний ведет себя как width: auto,
поэтому устанавливает себя равным ширине длинного слова.Поскольку ширина не зависела от "реального" макета,
тем не менее, это считается определенным для разрешения ,
ширина которого вдвое меньше ширины .
В этом примере
, потому что процентный размер блока (в данном случае высота) на элементах уровня блока
определено, чтобы не разрешаться внутри содержащихся блоков размером с контент,
процентная высота на
Начальная высота
составляет 100 пикселей, как указано,
что сделает высотой 50 пикселей
когда он разрешил свой процент.
Однако мы должны рассчитать минимальную высоту,
заменив его на высоту.Это приводит к тому, что процент на ведет себя как автоматический,
так что имеет высоту 150 пикселей.
Таким образом, общая высота содержимого составляет 180 пикселей.
Это больше, чем указанная высота в 100 пикселей,
поэтому высота будет изменена на 180 пикселей.
Затем, поскольку процентное соотношение может разрешиться первоначально относительно высоты (100 пикселей),
теперь разрешается высота 180 пикселей,
так что
В этом случае процент на
Это вариант первого блока кода,
и следует аналогичным путем;